現状・条件
Contact Form 7 プラグインを設置する
WordPress 管理画面から、
・押下：「プラグイン」>「新規追加」
・ページ内：
検索キーワードに Contact Form 7 で検索します。▼ のように「今すぐインストール → 有効」をクリックしてください。
インストールが完了すると、WordPress 管理画面のナビゲーション パネルの「お問い合わせ」というメニューが追加されます。
Contact Form 7 – reCaptcha v2 プラグインを設置する
同じく、検索キーワードに Contact Form 7 – reCaptcha v2 で検索します。▼ のように「今すぐインストール → 有効」をクリックします。
Google reCAPTCHA からキーを取得する
※ 設定するのに、有効な Google アカウントが必要です。
Google reCAPTCHA の画面右上の「Admin console」ボタンをクリックします。
▼ 新しいサイトを登録する ページで下記の図の通り設定してください。
※ 注意点は、「reCAPTCHA タイプ」v3 ではなく、v2 にしてください。その下のサブオプションは任意で選択してください。
▲「送信」ボタンをクリックします。
▲「サイトキー」と「シークレットキー」をコピーします。
WordPress 管理画面から、
・押下：「お問い合わせ」>「インテグレーション」
・ページ内：
「reCAPTCHA」>「インテグレーションのセットアップ」ボタンをクリックします。
▼「サイトキー」と「シークレットキー」をペーストして「変更を保存」ボタンをクリックします。
▼ reCAPTCHA はこのサイト上で有効かされています、と表示されます。
Google reCAPTCHA と連携する
それでは、reCAPTCHA が有効かされたので、Contact Form 7 と連携させましょう！
WordPress 管理画面から、
・押下：「お問い合わせ」>「reCaptcha Version」
・ページ内：
「Select reCaptcha Usage」>「reCaptcha version 2」を選択します。
「Select reCaptcha Source」>「google.com」を選択して「Submit」ボタンをクリックします。
これで、reCaptcha v2 が使えるようになりました。
▲ 実は、デフォルトでは [recaptcha] フォームタグがコンタクトフォームの編集画面の「フォーム」タブに表示されませんが、上記の設定で表示されるようになります。( フォームタグの種類は環境によって異なります )
コンタクトフォームを用意する
これからお問い合わせできるようにフォームを 作成 修正して、自動応答機能を含めメールで送信する仕組みを設定します。Contact Form 7 にはデフォルトでフォームが用意されているのでそれをカスタマイズして利用します。
WordPress 管理画面から、
・押下：「お問い合わせ」>「コンタクトフォーム」
・ページ内：
▼ のように「コンタクトフォーム１」ページがすでに作成されています。ショートコードも確認できます。コンタクトフォーム１をクリックして編集モードに入りましょう。
▼ タイトルを コンタクトフォーム１ から コンタクトフォーム に変更します。( 任意 )
編集ページでも「ショートコード」が確認できます。
これから、このショートコードをコピーして、お問い合わせ用 固定ページを作成し、その内容にペーストします。
ショートコードの id=”14″ の数字は環境によって異なります！
ショートコードには title=”” 属性が含まれているので、タイトルを変更する際はこれから作成する固定ページのショートコードも編集しましょう。
お問い合わせ 固定ページを作成する
WordPress 管理画面から、
・押下：「固定ページ」>「新規追加」
・ページ内：
タイトル名を「お問い合わせ」など適宜入力して下さい。
※ このタイトル名は外部に公開する際にメニュー名として表示されるものです。
「パーマリンク」>「編集」ボタンをクリックして contact に変更して下さい。
エディターが「クラシックエディター」で「テキスト」モードになっていることを確かめて下さい。「お問い合わせ」>「コンタクトフォーム」でコピーした ショットコード をエディターのコンテンツ部分にペーストして下さい。
上記の「お問い合わせ」編集ページで「AMP設定 → AMPページを生成しない」にチェックを入れておいてください。
※ AMPページを生成しない 詳細は ( ▼ )をご確認ください。( 必読 )
設定を終えたら「更新」ボタンをクリックして設定を完了してページを公開しておきましょう。
お問い合わせページを確認する
現時点ではサイトに「お問い合わせ 」メニューを設けていないため、直接 URL を入力して「お問い合わせ」ページを確認します。
ブラウザを開き、yourdomain/contact のようにアドレスバーに入力して下さい。
良く見てみると「題名」は無くした方が良さそうですし、先ほど設定した reCaptcha ボタンも見えません。編集しましょう。
お問い合わせフォームをカスタマイズする
WordPress 管理画面から、
・押下：「お問い合わせ」
・ページ内：
タイトル「コンタクトフォーム」リンクをクリックします。
▼「フォーム」タブに [recaptcha] フォームタグが表示されたか確認して下さい。「題名」を削除して「submit “送信”」ボタンの真上に [recaptcha] フォームタグを追加します。
※ [recaptcha align:center]のように設定すると中央揃えできます。
編集が終わったら「保存」ボタンをクリックして下さい。
カスタマイズ内容を確認する
再度、直接 URLを入力してブラウザで確認すると、
「題名」がなくなり、「私はロボットではありません」チェックボックスが表示されました。
チェックを入れて、下記のようなポップアップが出たら OK です。( 表示内容はランダムで変わります )
これで、お問い合わせのフォームが出来上がりました。
次は、管理者への通知と自動返信メールを設定しましょう。
▼ メールを設定するには、下記の記事をご覧ください。
▼「お問い合わせ」メニューを公開しておこう！
▼ Contact Form 7 は Akismet によるスパムフィルタリングをサポートしています。
コメント