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

プラグイン「Contact Form 7」をインストールして、有効化する。

管理画面のメニューの中に、「お問い合わせ」という項目が追加される。

「お問い合わせ」をクリックすると、コンタクトフォーム画面が表示されるので、「新規追加」をクリックする。

「コンタクトフォームを追加」画面が表示され、「フォーム」タブにデフォルトの問い合わせフォームが設定されている。タイトルを入力した後、好みに合わせて問い合わせフォームをカスタマイズして、「保存」をクリックする。

コンタクトフォームが作成されると、問い合わせフォームをWordPressのコンテンツ内に埋め込むための「ショートコード」が表示される。

「メール」タブを開くと、送信先にメールアドレスがセットされている。

再び「お問い合わせ」をクリックすると、コンタクトフォーム画面に、作成したフォームのタイトルが表示され「編集」することが出来る。

GoogleのreCAPTCHAサービスページにアクセスし、右上のAdmin Consoleボタンをクリックする。

サイトの登録画面が表示される（既に3つのサイトが登録されている）ので、「✙」ボタンをクリックする。

「ラベル」にはサイト名を、reCAPTCHA タイプは「reCAPTCHA v3」を選択し、ドメインとオーナーを設定する。

reCAPTCHA 利用条件に同意するにチェックを入れ、「送信」をクリックする。

登録したサイトのサイトキーとシークレットキーが発行されので、コピーして保管しておく。

管理画面のお問い合わせの中にあるインテグレーションを選択し、「インテグレーションのセットアップ」をクリックする。

先ほど保存したサイトキーとシークレットキーを、それぞれの入力欄に貼り付け「変更を保存」をクリックする。

「設定を保存しました。」が表示され「reCAPTCHA はこのサイト上で有効化されています。」となれば完了。

サイトを開いてみると、右下に【reCAPTCHAの保護マーク】が表示される様になる。

.grecaptcha-badge { visibility: hidden; }

外観 → カスタマイズ → 追加 CSSでの、追記例。

固定ページを作成し、この中に問い合わせフォームの「ショートコード」を貼付ける。

<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>

問い合わせ用の固定ページを表示してみる。

送信テストを行ってみる。

無事に、送信完了。

問い合わせフォームの入力欄が、コンテンツ領域の幅を越えて、右にはみ出る。

/*-----------------------------------------*/
/*  Contact Form 7 画面の幅を超えへの対処  */
/*-----------------------------------------*/
.wpcf7 input:not([type="submit"]), .wpcf7 textarea{
  width: 100%;
}
/*-----------------------------------------*/

CSSの適用結果。

/*--------------------------------------------------------------*/
/*   お問い合わせページを除き、「reCAPTCHA」を読み込ませない    */
/*--------------------------------------------------------------*/
function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js' );
/*--------------------------------------------------------------*/

固定ページ一覧から、お問い合わせページを編集で開き、右上にある「表示」を展開して「スラッグ」にチェックを入れる。

固定ページの最下部に、「スラッグ」が表示されるので、英文字に変更する。