3年前（2022年）、当ブログを開設した後に「お問い合わせ」のページを設置しました。
そのために「Contact Form by WPForms」というプラグインをインストールしました。
今回は備忘録として当時の設定と使い方を記します。
現在とは規約や設定方法などが違うおそれがあります。
小石健と申します。YouTubeチャンネルはこちら。
WPFormsをインストールした
「Contact Form by WPForms」（以下「WPForms」）とは、問い合わせフォームを設置するためのWordPressのプラグインです。
当ブログで使用しているテーマ「SWELL
」の開発者もおすすめしています。
SWELLのインストールについては下の記事をご参照ください。
同じ用途として「Contact Form 7」というプラグインが世界的に人気だそうですが、私はとりあえずWPFormsをインストールしました。
以下、有効化してからの設定手順となります。
WPFormsを設定する
WPFormsを有効化したら、ダッシュボード左メニュー「WPForms」の「新規追加」をクリックします。
「フォームに名前を付ける」にフォームの名前を入力します（ここでは「お問い合わせ」）。
その下の「テンプレートを選択」にある「Simple Contact Form」の「テンプレートを使用」をクリックします。
私の場合「注意！」の画面が表示されました。「OK」をクリックします。
これはサーバーの「WAF」というセキュリティ機能によるものらしく、これを一時的にオフにします。
ここでは「ConoHa WING」というレンタルサーバーを例にします。
ConoHa WINGのコントロールパネルにログインして以下の操作を行います。
上部メニュー「WING」→左メニュー「サイト管理」→「サイトセキュリティ」→「WAF」のタブ→WAFの「利用設定」の「OFF」を選択する。
これで「お問い合わせ」の編集画面が表示されます。
「フィールド」→「フィールド設定」→「一般」を開きます。
お問い合わせの入力欄のラベルが英語表記だったので、それぞれをクリックして以下のように日本語に変更しました。
- 「Name」→「お名前」（フォーマット：「シンプル」・必須）
- 「Email」→「メールアドレス」（必須・メールでの確認を有効化）
- 「Comment or Message」→「メッセージ」（必須）
また私は各入力欄を以上のように設定しました。「必須」をオンにすれば、問い合わせの際その項目は入力必須となります。
「設定」→「一般」を開きます。
私はさきほどと同様に「送信」ボタンのテキストを「Submit」から「送信」に、「送信」ボタン処理テキストを「Sending…」から「送信中…」に変更しました。
次に、問い合わせメッセージが送信された際に送受信者両方に届く自動送信メールの設定を行います。
「設定」→「通知」をクリックして「デフォルト通知」の項目を開きます。
「送信先メールアドレス」欄の{admin_email}の後に「,（カンマ）」を入力します。
「スマートタグを表示」→「利用可能なフィールド」の「メールアドレス」をクリックします。
「{admin_email}, {field_id=”1″}」と表示されます。
任意の「メール件名」を入力します。
「フォーム名」「送信元メールアドレス」「返信先メールアドレス」はそのままにしました。
「メールメッセージ」は「{all_fields}」と入力します。
- 「{admin_email}」＝WordPressに登録した受信者（サイト管理者）のメールアドレス
- 「{field_id=”1″}」＝問い合わせフォームに入力した送信者のメールアドレス
「設定」→「確認」を開きます。
メッセージ送信後の問い合わせページに表示される「確認メッセージ」を入力します。
その下の「確認メッセージまで自動的にスクロールする」をオフにします。
問い合わせページを作成する
ダッシュボード左メニュー「WPForms」の「すべてのフォーム」をクリックします。
画面右端の「ショートコード」の文字列をコピーします。
ダッシュボード左メニュー「固定ページ」の「新規追加」をクリックします。
「タイトルを追加」に「お問い合わせ」と入力します。
その右下の「＋」→「ショートコード」をクリックします。
さきほどコピーしたショートコードを貼り付けます。
画面右上の「プレビュー」でこのページのプレビューが確認できます。
なお「パーマリンク」の「URLスラッグ」には「contact」と入力しました。
自分のブログを開くと、ヘッダーの右端に「お問い合わせ」のリンクが追加されていました。
リンクをクリックして問い合わせページを開くと、URLもちゃんと「https://koishiken.com/contact/」となっていました。
スマホのブログでは「お問い合わせ」のリンクが表示されていなかったので、ダッシュボードの「外観」の「メニュー」からメニューを作成して問い合わせページを追加しました。
次にGoogle reCAPTCHAを設定します。
reCAPTCHAを設定する
Google reCAPTCHA（以下「reCAPTCHA」）とは、Googleの迷惑メール（スパムメール）対策のサービスです。
問い合わせページに導入することで、ロボットと判定した相手からの送信を拒否することができます。
Googleアカウントを取得した状態でreCAPTCHAにアクセスします。
上部メニューの「v3 Admin Console」をクリックします。
「ラベル」にドメインを入力します。
「reCAPTCHAタイプ」は「reCAPTCHA v2」→「非表示reCAPTCHAバッジ」を選択します。
「ドメイン」にドメイン名を入力します。
プライバシーポリシーと利用規約を確認して「reCAPTCHA利用条件に同意する」にチェックを入れます。
「アラートをオーナーに送信する」にチェックを入れます。
サイトキーとシークレットキーが表示されます。
この画面を開いたまま別画面でWordPressのダッシュボードを開きます。
左メニュー「WPForm」の「設定」→「CAPTCHA」タブをクリックします。
「reCAPTCHA」をクリックします。
「タイプ」は「Invisible reCAPTCHA v2」にチェックを入れます。
コピーしたサイトキーとシークレットキーをそれぞれ入力します。
reCAPTCHAを有効化する
お問い合わせページにreCAPTCHAを追加します。
ダッシュボードの左メニュー「WPForms」の「すべてのフォーム」→「お問い合わせ」をクリックします。
左メニュー「フィールド」の「フィールドを追加」にて「reCAPTCHA」→画面右上の「保存」をクリックします。
これでreCAPTCHAが有効になりました。
自分で問い合わせる
以上で作業は終わりですが、確認のため自分でメッセージを送信します。
問い合わせページを開くと、画面右下に「reCAPTCHAバッジ」が表示されています。
メッセージの送信に成功すると、設定した確認メッセージが表示されます。
設定に間違いがなければ、送受信者両方にこのような確認メールが届くはずです。
これでお問い合わせページが使えるようになりました。
コメント