【WordPress】SWELL推奨プラグイン「WPForms Lite」を使用したお問い合わせフォームの作り方を解説～メール転送設定やスパム対策「reCAPTCHA v3」の設定方法も

1. WordPressのダッシュボードのプラグインをクリックします。
   
   
2. 新規追加をクリックします（画像は新規追加を押したあとの画面なので「プラグインのアップロード」と表示されています）。
   
   
3. キーワード欄から「WPForms」を検索します。
   
   
4. Contact Form by WPForms　というクマさんのイラストがあるプラグインが出てきたら、有効化をクリックします。

背景がブルーの「フィールドオプション」のエリアで、表示内容の設定・カスタマイズができます。

・ラベル：デフォルトで「名前」となっている部分を好きな言葉に変更できます（氏名・お名前など）。

・必須：チェックボックスにチェックが入ると、その記入欄は入力必須項目となり、アスタリスク（＊マーク）が必須項目の目印になります。

・説明：そのフィールドで補足情報を追記することができます。

「フォーマット」をクリックすると、プルダウンが表示されます。

※デフォルトでは、名前の部分が「名」「姓」の順になっており日本仕様ではないので、「シンプル」を選択して入力欄を姓名分けずに1つにすると良いかと思います。

・作業を終えたら、右上の「保存」をクリックします。

左上の「フィールドを追加」というタブをクリックすると、「標準フィールド」というカテゴリに、フォームに挿入できる要素が青いブロックで一覧表示されます。

例えば、赤枠で囲った「一行のテキスト入力」をクリックすると、右側のフィールドに一行テキストの入力欄が挿入されます。

このように必要に応じてフォームのカスタマイズが可能です。

赤枠のように、並び替えたい場所までドラッグ＆ドロップすればOKです。

間違えて挿入してしまったなど、要素が不要な場合は、その要素をオンマウスすると、キャプチャの右側、矢印部分のところにゴミ箱マークが出てきますのでクリックすれば削除できます。

その他の要素も、同様に作業して好みのフォームを作成したら、右上の保存をクリックします。

1. フォーム名：このままだと少し違和感があるので、「お問い合わせ」などに変更しましょう。
   
   
2. 送信ボタンのテキスト：表示も変更ができますので、変えたい場合は修正してください。
   
   
3. 「スパム対策保護を有効化」と「Google v3 reCAPTCHAを有効化」にチェックをいれます。
   （スパム対策、reCAPTCHAの有効化については追って詳しく解説します）
   
   
4. 右上の保存ボタンをクリックします。

1. メールアドレスへ送る：お問い合わせが送信された際に、その内容を転送するメールアドレスです。
   
   規定では{admin_email}が入力されています。
   これは、Wordpressの「設定」＞「一般設定」で入力した「管理者メールアドレス」に該当します。
   管理者メールアドレスの入力がないと、空欄状態になり転送されませんのでご注意ください。
   
   
   【問い合わせた人にも、受領メールとして転送する場合】
   
   右上にある「スマートタグを表示」をクリックし、「利用可能なフィールド」から「メールアドレス」を選択します。
   すると、{field_id=”1″}というタグが入力欄に挿入されます。
   これは、お問い合わせフォームで入力されたメールアドレスを反映するタグです。
   挿入されたら、先に入力されている{admin_email}との間に半角カンマ(,)を入れればOKです。
   
   
   【別のメールアドレスに転送したい場合】
   
   {admin_email}を削除し、メールアドレスを直接入力します。
   複数ある場合は、半角カンマ(,)で区別します。
   
   例：{admin_email},{field_id=”1″},○○＠▲▲▲
   　　と入力すると、
   
   　　管理者メルアド,問い合わせした人のメルアド,○○＠▲▲▲のメルアド
   
   　　の3か所に問い合わせ内容が転送されます。　　
   
   
2. メールの件名：転送するメールの件名になります。
   管理者だけに転送する場合は「サイト名：問い合わせ」等にするとわかりやすいでしょう。
   問い合わせた人にも受領メールとして転送する場合は「お問い合わせありがとうございました」といった表現がよいと思います。
   
   
3. 送信者名：転送するメールの差出人名になります。
   基本的には、サイト名やサイト管理人名、「サイト名＋お問い合わせ窓口」等になると思います。
   
   
4. 送信元メールアドレス：送信元のメールアドレスになります。
   規定では①と同じ{admin_email}となっています。
   送信元を変更したい場合（送信専用アドレスにしたい等）は、{admin_email}ではなく任意のメールアドレスを入力します。
   信用に関わる部分ですので、サイトに関係性のないアドレスは避けましょう。
   
   
5. Reply-To：転送メールから返信する際の宛先をここで指定できます。
   規定では{field_id=”1″}が入力されています。
   問い合わせに返信する際、宛先を間違えないためにも、このままにするのが妥当かと思います。空欄にすることもできます。
   
   
6. メッセージ：規定で{all_fields}というタグが入っています。
   これは転送メールの本文に「お問合せフォーム」の内容をすべて含むという意味のタグになりますので消さないように注意してください。
   このタグの前後に文言を追加することが可能です。
   例えば、上のキャプチャのように、{all_fields}のタグよりも前に文言を入れると、転送メールでは下記のように表示されます。
   

• 確認タイプ：とくにこだわりがない場合は、「メッセージ」でよいと思います。
  
  この他に、「ページを表示」「URLに移動」という設定も可能です。
  アンケートフォーム利用や送信後に広告連動させる場合などの意図をもって使用するケースと思います。
  
  
• テキスト入力エリア（赤枠部分）は、問い合わせた人が送信ボタンを押したあとにそのページ内で表示するメッセージになります。
  「メッセージ」を選択後、ここで文言を入力すると、送信後に下記のような形で表示されます。

・「フィールドを追加」の部分で、「reCAPTCHA」をクリックします。

・クリックすると、上のキャプチャのようなポップアップがでてきますので「OK」を押してください。

・OKを押すと、右上に「reCAPTCHA」が有効化されたことを示す表示が出てきます。

・右上の保存ボタンをクリックします。

これで、このお問い合わせフォームはreCAPTCHAの対象となります。

1. ラベル：ご自身でわかりやすい名称（サイト名など）を入力します。
   
   
2. reCAPTCHAタイプ：「reCAPTCHAv3」を選択します。
   
   
3. ドメイン： reCAPTCHAを使用するサイトのドメインを入力します。
   
   
4. オーナー：ログインしたアカウントのメールアドレスがデフォルトで記載されています。任意で変更追加してください。
   
5. 同意にチェックします。
   
   
6. 同意にチェックします。
   
   
7. 送信ボタンをクリックします。

1. WordPressのダッシュボードから「WPForms」をクリックします
   
   
2. 「設定」をクリックします
   
   
3. タブの中から「CAPTCHA」をクリックします
   
   
4. 上記キャプチャにある「reCAPTCHA」を選択します

5. タイプ：「reCAPTCHA v3」を選択します。
   
   
6. サイトキー：先程「Google reCAPTCHA」で取得したサイトキーをここにペーストします。
   
   
7. シークレットキー：⑥と同様に取得したシークレットキーをここにペーストします。
   
   
8. スコアしきい値：規定値で0.4になっています。ここは任意で設定します。
   
   
9. 最後に設定を保存をクリックします。

・ダッシュボードの「WPForms」をクリックすると、上のキャプチャ画面のようなフォーム概要が表示されます。

・右側の赤枠に、、カッコでくくられたショートコード（wpforms id=”数字”の部分）が記載されています。
　使用したいフォームのショートコードをカッコごとコピーします。

・ショートコードをコピーしたら、ダッシュボードの「固定ページ」＞「新規追加」をクリックして編集画面を開きます。

1. タイトルを追加：通常の記事と同様にここで入力した文言がページタイトルになります。
   「お問い合わせ」等、わかりやすい表現にしましょう。
   
   
2. 本文：先程コピーしたショートコードを本文にペーストします。
   お問合せフォームを呼び出すタグになります。
   
   
3. 本文では、問い合わせフォームの他にも通常の記事と同様に文字や装飾の追加が可能です。
   お問合せフォーム以外に説明文や広告などを記載したい場合、お好きな内容を入力し編集してください。
   ここでは例として、②のショートコードの手前に説明文を2行入力しています。
   

入力を終えたら下書き保存し、プレビューすると下記のように表示されます。

問題なければ公開します。

1. ダッシュボードの「外観」＞「テーマエディタ」＞「スタイルシート」(style.css)に遷移します。
   
   
2. 以下のコードをコピペします。
   
   ※上のキャプチャはその他のコードを白色で消しているので中途半端な位置で書き込んでいるように見えますが、その他のコードの直下でOKです。

/* reCAPTCHA v3　表示位置調整*/
.grecaptcha-badge{
position: fixed;
bottom: 100px!important;
}

また、bottom:のあとの「100px」 という数値は私がブログで設定している値です。
この値を「70px」「80px」等、ご自由に調整してご自身のサイト内でしっくりくる位置に調整してください。

3. 「ファイルを更新」をクリックします。