コンタクトフォームのスパム対策:SWELLでの推奨コンタクトフォーム「WPForms」使用

WPFormsでスパム対策のコンタクトフォームを作る場合の備忘録です。
乱筆ですが必要な方はぜひ参考にしてください。
プラグイン2つをインストール
プラグイン「WPForms Lite」と「Advanced Google reCAPTCHA」をインストールします。


まずはリキャプチャで設定
こちらのページからアクセス。

「v3 Admin Console」をクリック。

「+」をクリック。


プロジェクト名には任意の名前を入力。
「送信」をクリック。

「サイトキー」と「シークレットキー」をメモ帳などにコピーしておきます。
「設定に移動」をクリック。

「保存」をクリック。
ここまでで、リキャプチャでの設定は完了。
次はWPFormsと連携します。
WPForms


何でも良いので、とりあえず今回は「簡単なお問い合わせフォーム」のテンプレートを使います。
「テンプレートを使用」をクリック。

「フィールド」の中の「CAPTCHA」をクリック。

「WPForms 設定」をクリック。

「reCAPTCHA」をクリック。

デフォルトではタイプが「Checkbox reCAPTCHA v2」に選択されているので注意!
「reCAPTCHA v3」を選択します。
「サイトキー」と「シークレットキー」に、reCAPTCHAでコピーしたキーをペーストする。

「設定は正常に保存されました」となったら連携完了です。
WPForms内での設定をする
再びWPFormsで作ったフォームに戻り、「フィールド」から「reCAPTCHA」をクリック。
すると、以下のような表示が出るので「OK」をクリック。


右上にマークが表示されたら、設定完了です。
「保存」をクリックし、「保存」の右にある「×」で戻ります。
サイト内にフォームを設置する
方法は2通りあります。
①ショートコードを貼り付ける
②ブロックエディターで呼び出す
①ショートコードで設置
WPFormsのショートコードをコピー。

このコードを、設置したい箇所に貼り付けたら完了です。

「ショートコード」をクリック。

フォームのショートコードをコピペします。
これで、フォームの設置完了です。
②ブロックエディタで設置

フォームを埋め込みたいページの任意の箇所でブロックエディター「WPForms」を追加します。
(見つけにくいので「Forms」などで検索するとやりやすいです。)

エディターを設置するとこのように表示されるので、使用したいフォームを選択します。

フォームを選択すると自動で呼び出してくれます。
これでフォーム設置完了です。
reCAPTCHAが設定されているかを確認する

フォームを設置したページの右下にマークが表示されたら、設定されている証です。
おつかれさまでした!
以上で、スパム対策としてreCAPTCHAの設定が完了です。
お疲れ様でした!
公式LINEにて、オンライン作業会や個別相談を無料で開催しています。
一人で走っていくことに不安がある方は、ぜひ気軽に話しに来てください
コメント