HOME → 6 Luxeritas → 01 設定と管理 → 

Luxeritas お問い合わせフォーム Contact Form 7 と reCAPTCHA の設定

Luxeritas(ルクセリタス)
問い合わせフォームの作成 と スパムメール対策
 
「Contact Form 7」で作成した問い合わせフォームに、スパムメール対策として【 reCAPTCHAv3 】という「人目につかないバックグラウンドで、スパムかどうかを判断してサイトを保護する仕組み」を導入した。
 
GoogleのreCAPTCHAサービスページにアクセスし、右上のAdmin Consoleボタンをクリックする
 
以下、Luxeritasでの「問い合わせフォームの作成」と【 reCAPTCHAv3 】の設定記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. コンタクトフォームの作成
 
プラグイン「Contact Form 7」をインストールして、有効化する。
プラグイン「Contact Form 7」をインストールして、有効化する
 
管理画面のメニューの中に、「お問い合わせ」という項目が追加される。
管理画面のメニューの中に、「お問い合わせ」という項目が追加される
 
「お問い合わせ」をクリックすると、コンタクトフォーム画面が表示されるので、「新規追加」をクリックする。
「お問い合わせ」をクリックすると、コンタクトフォーム画面が表示されるので、「新規追加」をクリックする
 
「コンタクトフォームを追加」画面が表示され、「フォーム」タブにデフォルトの問い合わせフォームが設定されている。タイトルを入力した後、好みに合わせて問い合わせフォームをカスタマイズして、「保存」をクリックする。
「コンタクトフォームを追加」画面が表示され、「フォーム」タブにデフォルトの問い合わせフォームが設定されている。タイトルを入力した後、好みに合わせて問い合わせフォームをカスタマイズして、「保存」をクリックする。
 
コンタクトフォームが作成されると、問い合わせフォームをWordPressのコンテンツ内に埋め込むための「ショートコード」が表示される。
コンタクトフォームが作成されと、問い合わせフォームをWordPressのコンテンツ内に埋め込むための「ショートコード」が表示される
 
この「ショートコード」をコピーして、投稿記事や固定ページなどに貼り付ければ、問い合わせフォームの設置が出来る。
 
「メール」タブを開くと、送信先にメールアドレスがセットされている。
「メール」タブを開くと、送信先にメールアドレスがセットされている
 
再び「お問い合わせ」をクリックすると、コンタクトフォーム画面に、作成したフォームのタイトルが表示され「編集」することが出来る。
再び「お問い合わせ」をクリックすると、コンタクトフォーム画面に作成したフォームのタイトルが表示されるので、「編集」することが出来る
 
 
 
2. reCAPTCHAのキーを取得
 
GoogleのreCAPTCHAサービスページにアクセスし、右上のAdmin Consoleボタンをクリックする。
GoogleのreCAPTCHAサービスページにアクセスし、右上のAdmin Consoleボタンをクリックする
 
サイトの登録画面が表示される(既に3つのサイトが登録されている)ので、「✙」ボタンをクリックする。
下記の、サイトの登録画面が表示される(既に3つのサイトが登録されている)ので、「✙」ボタンをクリックする
 
「ラベル」にはサイト名を、reCAPTCHA タイプは「reCAPTCHA v3」を選択し、ドメインとオーナーを設定する。
「ラベル」にはサイト名を、reCAPTCHA タイプは「reCAPTCHA v3」を選択すして、ドメインとオーナーを設定する
 
reCAPTCHA 利用条件に同意するにチェックを入れ、「送信」をクリックする。
reCAPTCHA 利用条件に同意するにチェックを入れ、「送信」をクリックする
 
登録したサイトのサイトキーとシークレットキーが発行されので、コピーして保管しておく。
登録したサイトのサイトキーとシークレットキーが発行されので、コピーして保管しておく
 
 
 
3. Contact Form 7にreCAPTCHAを実装
 
管理画面のお問い合わせの中にあるインテグレーションを選択し、「インテグレーションのセットアップ」をクリックする。
管理画面のお問い合わせの中にあるインテグレーションを選択し、「インテグレーションのセットアップ」をクリックする
 
先ほど保存したサイトキーとシークレットキーを、それぞれの入力欄に貼り付け「変更を保存」をクリックする。
先ほど保存した、サイトキーとシークレットキーをそれぞれ、下記の入力欄に貼り付け「変更を保存」をクリックする
 
「設定を保存しました。」が表示され「reCAPTCHA はこのサイト上で有効化されています。」となれば完了。
「設定を保存しました。」が表示され「reCAPTCHA はこのサイト上で有効化されています。」となれば完了
 
サイトを開いてみると、右下に【reCAPTCHAの保護マーク】が表示される様になる。
サイトを開いてみると、右下に【reCAPTCHAの保護マーク】が表示される様になる
 
 
 
4. reCAPTCHAの保護マークを消す
 
外観 → カスタマイズ → 追加 CSS、または、子テーマのcssに下記コードをを追記する。
.grecaptcha-badge { visibility: hidden; }
外観 → カスタマイズ → 追加 CSSでの、追記例。
外観 → カスタマイズ → 追加 CSSでの、追記例
 
 
 
5. 問い合わせ用の固定ページの作成
 
固定ページを作成し、この中に問い合わせフォームの「ショートコード」を貼付ける。
固定ページを作成し、この中に問い合わせフォームの「ショートコード」を貼付ける
 
保護マークを消した代わりに、recaptchaのプライバシーポリシーと利用規約の文言を追記。
 
問い合わせ用の固定ページの作成例。
<p>このブログに関して、ご質問などがある方は、下記の問い合わせフォームをご利用ください。</p>
<p>[contact-form-7 id="14" title="お問い合わせ"]</p>
<p>このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a><a href="https://policies.google.com/terms">利用規約</a>が適用されます。</p>
 
問い合わせ用の固定ページを表示してみる。
問い合わせ用の固定ページを表示してみる
問い合わせ用の固定ページを表示してみる
 
送信テストを行ってみる。
送信テストを行ってみる
 
無事に、送信完了。
無事に、送信完了
 
 
 
6. 問い合わせフォームが画面の幅を越える対策
 
問い合わせフォームの入力欄が、コンテンツ領域の幅を越えて、右にはみ出る。
問い合わせフォームの入力欄が、コンテンツ領域の幅を越えて、右にはみ出る
 
対策用のCSSを追記。
/*-----------------------------------------*/
/*  Contact Form 7 画面の幅を超えへの対処  */
/*-----------------------------------------*/
.wpcf7 input:not([type="submit"]), .wpcf7 textarea{
  width: 100%;
}
/*-----------------------------------------*/
 
CSSの適用結果。
CSSの適用結果
 
 
以上。
(2020.02.05)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください