悩む人WordPressにお問い合わせフォームを設置したいけれど、
・簡単に設定できて
・デザイン性がよくて
・信頼性のある安心して使える
そんなプラグインを知りたい…
本日は、そんなお悩みの方におすすめのお問い合わせフォームを紹介します。
有名なプラグインとしてContact Form7がありますが、HTMLやCSSなどの知識が必要になる場面も多く、初心者には少しハードルが高い印象です。
そんな中、コード不要でドラッグ＆ドロップだけで簡単にフォームが作れるプラグインが「WPForms」です。
無料版のWPForms Liteでも整ったフォームがすぐに作れるので、コードが苦手な人にもおすすめです。
この記事では、WPForms Lite（無料版）の設定方法から、スパム対策のGoogle reCAPTCHAの設定までを画像付きで丁寧に解説していきます。
設定方法から見たいという方は、WPFormsのフォーム作成手順と設置方法からご覧ください。
WPFormsとは？無料版と有料版の違いを解説
WPFormsは、世界中で500万以上のサイトに使われている海外製のフォーム作成プラグインで、無料版のLiteと有料版のProがあります。
- WPForms Lite（無料）
-
基本的な問い合わせフォームを作るだけなら、これで十分！
- WPForms Pro（有料）
-
条件分岐・ファイル添付・支払い連携などが高度な機能に対応しています。
Pro版には4つのプラン（Basic、Plus、Pro、Elite)があります。
個人ブログや小規模なサイトで、問い合わせページのみを作りたいという場合であれば、無料で十分です。
WPFormsの公式ブログでは、各バージョンやプラン内容についても紹介されているので、詳しく知りたい方は、参考にしてみてください。
WPForms Liteのメリット・デメリットをレビュー
WPFormsを使ってみた感想をメリット・デメリットでまとめてみました。
WPForms Liteを使ってみて感じたメリット・デメリット
まず、実際に使ってみてよかった点を紹介します。
| ポイント | 良かった点 / メリット |
|---|---|
| デザイン・操作性 | HTMLやCSSの知識がなくても整ったフォームが作れる |
| ドラッグ＆ドロップ式で直感的に操作できる | |
| レスポンシブ | スマホ表示にも自動対応 |
| 互換性・安定性 | 他のプラグインやテーマとの相性が良くエラーが少ない |
| セキュリティ対策 | reCAPTCH v2・v3どちらにも対応 |
なつなろコードを書かずに整ったフォームが作れるのは便利ですね
気になった点は、以下です。
| ポイント | 気になった点 / デメリット |
|---|---|
| 操作性・表示 | 海外製のため、日本語訳がやや不自然な部分がある |
| 機能・カスタマイズ | 無料版はカスタマイズや利用できる機能に制限がある |
| スパム対策 | カスタムCAPTCHA（ひらがな入力など）は有料版のみ対応 |
| 価格・プラン | 有料プランは4段階あり、内容が少し複雑で価格も高め |
WPFormsで、ひらがななどの日本語CAPTCHAの設定は、有料版のみ対応となっています。
ここで注意したいのがスパム対策です。
WPForms Liteにも、簡単なスパムブロック機能が備わっているため、後ほどGoogle reCAPTCHA（無料）の設定で対策していきます。
- 無料でシンプルなお問い合わせフォームを作りたい
- コードを使わず、見た目の良いフォームを簡単に作りたい
- お問い合わせ件数があまり多くない（月に〜15件程度）
- 主な連絡手段は、SNSのDMを想定している
次に、WPFormsを使って、お問い合わせフォームの作成手順を画像付きで解説していきます。
WPFormsのフォーム作成手順と設置方法
まず、WPFormsのプラグインをインストールしましょう。
STEP 1. WPFormsのインストール
WordPressのダッシュボード左メニューから［プラグインを追加］ をクリックし、WPFromsを検索します。
- 検索バーに［WPForms］と入力し、［今すぐインストール］クリックします。
- ［有効化］をクリックします。
STEP 2. フォームを作成
［最初のフォームを作成］をクリックして、お問い合わせフォームを作成していきます。
フォームに名前をつける
- まず、［フォームに名前をつける］にフォーム名を入力します。
- ［空白のフォームを作成］をクリックします。
項目（フィールド）の設定
左の「標準フィールド」から、右のフィールドへお問い合わせに必要な項目をドラッグ＆ドロップします。
フィールドの項目を並び替えたい場合も、ドラックで入れ替えることができます。
サンプル画像では、以下の4項目を設定しています。
- 名前
- メールアドレス
- 単一行テキスト
- 段落テキスト
［名前］の設定
一般タグを選択し、［名前］の設定をおこなっていきます。
| 名前 | 設定 |
|---|---|
| ラベル | デフォルトのままでもOK 「氏名」や「お名前」など好みで変更できます |
| フォーマット | ［シンプル］を選択 |
| 説明 | 【任意】空欄のままでOK 注意書きや補足の入力ができます |
| 必須 | ON（必須）にする 必須の場合はラベル名の横に*がつきます |
海外製のプラグインのため、入力項目を分けると「名 → 姓」の順になり、日本の表記としては不自然に感じる場合があります。
コードを編集して順番を変更することも可能ですが、少し手間がかかります。
そのため、［シンプル］を選択しておけば、ハンドルネームなどで気軽にお問い合わせしてもらえるのでおすすめです。
メールアドレスの設定
WPFormsはバージョンアップにより使いやすくなったため、現在、メールアドレスIDはあまり意識する必要はありませんが、各フィールドにはそれぞれIDが割り振られています。（例．メールアドレスID #2）
メールアドレスのIDナンバーは、あと使用する可能性があるので、少しだけ意識しておいてください。
| メールアドレス | 設定 |
|---|---|
| ラベル | デフォルトでもOK メールアドレスやemailアドレス、など任意で変更できます |
| 説明 | 空欄のままでOK 例．受信可能なメールアドレスを入力してください、など |
| 必須 | ON（必須）にする 必須の場合はラベル名の横に*がつきます |
単一行テキストの設定
ここは、メッセージの件名やタイトルを入力する欄です。
分かりやすいように［ラベル名］を変更しましょう。
| 単一行テキスト | 設定 |
|---|---|
| ラベル | 件名・タイトル、など分かりやすい名称に変更 |
| 説明 | 空欄のままでOK |
| 必須 | 【任意】入力を必須にする場合はONにする |
段落テキストの設定
問い合わせの内容を入力する欄です。
分かりやすいように［ラベル名］を変更しましょう。
| 単一行テキスト | 設定 |
|---|---|
| ラベル | 本文・メッセージなど分かりやすい名称に変更 |
| 説明 | 空欄のままでOK |
| 必須 | ON（必須）にする 必須の場合はラベル名の横に*がつきます |
［高度な設定］タブでは、フィールドサイズの調整や、プレースホルダーテキストを入力できます。
全項目の設定ができたら、忘れずに右上の［保存］をクリックしましょう。
STEP 3. 通知の設定
この通知機能本来の使い方は、お問い合わせが送信されたときに、管理者（自分）に通知メールとして届くようにすることです。
設定を工夫すれば、お問い合わせしたユーザーに対して自動返信メールとして利用することもできます。
ここでは、お問い合わせ送信時にユーザーや管理者に届く確認メールの設定方法を紹介します。
ここで出てくる「管理者のメールアドレス」とは、WordPressの設定 ＞ 一般設定にある［管理者メールアドレス］を指します。
- 通知を有効化
-
［ON］にします。
- 送信先メールアドレス
-
自動返信メールを受け取るメールアドレスです。以下の2つを設定します。
- 管理者のメールアドレス（自分）
- 入力されたメールアドレス（ユーザー）
初期設定では［管理者のメールアドレス］のみが設定されています。タグアイコンから［メールアドレス］（ラベル名で設定した項目）を選択します。
複数アドレス入力する場合は、半角カンマ（,）で区切るようにします。
- メール件名
-
自動返信メールの件名として表示されます。
例．サイト名｜お問い合わせありがとうございます
- フォーム名
-
自動返信メールのFrom（送信元の名前）として表示されます。
サイト名や管理人名を設定するのがおすすめです。
- 送信元メールアドレス
-
自動返信メールのFrom（送信元のメールアドレス）として表示されます。
初期設定では、管理者のメールアドレスが設定されています。
- Reply-To
-
この自動返信メールに対して「返信」を押したときに、宛先として指定されるメールアドレスです。
ここで設定したアドレスに自動返信メール（通知メール）が届く、という意味ではないため注意してください。
- メールメッセージ
-
ここに入力した内容が、自動返信メールの本文として送信されます。
デフォルトでは「{all_fields}」のみが設定されていますが、簡単なお礼の一文を追加しておくのがおすすめです。
最後に、忘れずに「保存」しましょう。
実際にユーザーに送られた自動返信メールは、下の図のような内容で表示されます。
送信元メールアドレスで以下のようなワーニングがでる場合
送信元メールアドレスがサイトのドメインと異なる場合、迷惑メールとして扱われやすくなるため、上のような警告が表示されることがあります。
例えば、管理者のメールアドレスにGmailやYahoo!などのフリーメールを設定している場合です。
この対策として、WP Mail SMTPなどのSMTPプラグインを利用することで、メールの到着率を高めることができます。
管理者のメールアドレスに、レンタルサーバーで作成した独自ドメインメールを設定し、あわせてSMTPプラグインを設定することで、到着率を高めることができます。
STEP 4. 確認画面の設定
次に、お問い合わせ送信後に表示される画面を設定します。
設定は以下の3つから選択できます。
- 1. メッセージ
-
お問い合わせページの画面に、送信完了メッセージを表示します。
- 2. ページを表示
-
固定ページで作成したサンクスページなどを表示します。
事前に表示させたいページを作成しておきましょう。 - 3. URLに移動（リダイレクト）
-
指定したURLへ自動的に移動します。
基本的に別サイトへ遷移させたい場合に使うので、個人ブログではあまり使用しません。
ここでは、1. メッセージと2. ページを表示の設定を紹介します。
「メッセージ」を選択した場合
- 確認タイプ：［メッセージ］を選択します。
- 確認メッセージ：画面に表示させるメッセージを作成します。
忘れずに、「保存」をクリックします。
「ページを表示」を選択した場合
- 確認タイプ：［ページを表示］を選択します。
- 確認ページ：表示させたい固定ページを選択します。
忘れずに、「保存」をクリックします。
なつなろ個人的には、ユーザーにとって送信完了が分かりやすいページを表示（サンクスページ）がおすすめです。
STEP 5. フォームをお問い合わせページに設定する
フォームや基本的な設定が完成したら、お問い合わせページを作っていきます。
設置方法としては、以下の方法があります。
- 新規ページ作成と同時にお問い合わせフォームを設定する
- 既存ページにお問い合わせフォームを設定する
パターン① 新規ページ作成と同時にお問い合わせフォームを設定する場合
新しいページのタイトルを入力し、［はじめる］をクリックします。
自動でフォームが埋め込まれたページが作成されます。
忘れずに、スラッグの変更やページを整えて［公開］しましょう。
パターン② 既存ページにフォームを設定する場合
プルダウンからフォームを設定する既存ページを選択し、［はじめる］をクリックします。
左上にあるブロックを追加［＋］をクリックします。
検索窓に「WPForms」と入力し、［WPForms］を選択します。
記事スペース内に表示されたwpformsのプルダウンから、作成したフォームを選択します。
設定できたら、忘れずに「保存」をクリックしましょう。
このあと、お問い合わせフォームの動作確認を行いますが、ここでは先にスパム対策のためのGoogle reCAPTCHAを導入してから動作確認を行う方法で解説します。
スパム対策｜Google reCAPTCHAの設定方法
お問い合わせフォームには、スパム対策が欠かせません。
そこでスパム対策として便利なのが、Googleが提供しているreCAPTCHAです。
WPFormsにreCAPTCHAを設定するには、事前にGoogleアカウントでサイト用のreCAPTCHAのサイトキーとシークレットキーを取得しておく必要があります。
ここでは、reCAPTCHAを取得しWPFormsに設定する方法を説明していきます。
Google reCAPTCHAのタイプについて
Google reCAPTCHAには、以下の３つのタイプがあります。
- reCAPTCHA v2
-
「私はロボットではありません」というチェックボックスが表示されます。
ユーザーにとってチェックを入れる手間はかかりますが、スパムを防ぎやすい方式です。 - Invisible reCAPTCHA v2
-
見た目上は何も表示されませんが、疑わしいと判断されたら場合は、送信時に画像承認が表示されます。
- reCAPTCHA v3
-
reCAPTCHAのロゴは表示されますが、スコア判定によって自動で判断してくれるため、ユーザーが操作する必要はありません。
ただしスコア判定方式のため、環境や条件によっては誤判定が起こる可能性もあります。
個人的には、ユーザーが動作を把握しやすく誤判定が少ないreCAPTCHA v2（チェックボックス型）がおすすめですが、サイトの方針や好みに合わせて選んでも問題ありません。
STEP 1. reCAPTCHAの登録とキーの作成
reCAPTCHAのサイトにアクセスし、サイトキーとシークレットキーを作成します。
| 項目 | おすすめ設定 |
|---|---|
| ラベル | サイト名など任意の名前を入力 |
| reCAPTCHAタイプ | 導入するreCAPTCHAタイプを選択 |
| ドメイン | 導入するサイトのhttps://〜以降（ドメイン部分）を入力 |
| Google Cloud Platform | 任意のプロジェクト名を入力 |
同意欄にチェックをいれ、［送信］をクリックします。
以前は、ドメインのみでreCAPTCHA を作成できましたが、現在はGoogle Cloud Platform（GCP）上でreCAPTCHAを設定する流れになっていました。
Google reCAPTCHAは、基本的に無料で利用できますが、無料枠（月に10,000件のリクエスト）を超えると、エラーとなったり有料プランの利用を求められることがあります。
しかし、通常の個人ブログであれば、月に1万回以上の検証リクエストが発生することはほとんどないため、基本的には無料範囲内で利用できます。
reCAPTCHA を作成すると、サイトキーとシークレットキーが発行されます。
これらのキーをWPFormsに設定していきます。
STEP 2. reCAPTCHAをWPFormsに設定
WordPressの左メニューにある［WPForms］＞［設定］をクリックします。
次に、上のメニューから［CAPTCHA］を選択し、［reCAPTCHA］をクリックします。
| 項目 | 設定 |
|---|---|
| タイプ | 作成したreCAPTCHAタイプを選択 |
| サイトキー | reCAPTCHAのサイトキーを貼る |
| シークレットキー | reCAPTCHAのシークレットキーを貼る |
| 失敗メッセージ | デフォルトでOK |
| 無競争モード | 他でreCAPTCHAを使っていないならOFFでOK |
| プレビュー | reCAPTCHA v2を選択した場合、「設定を保存」すると表示されます *Invisible reCAPTCHA v2とv3を選択した場合は表示されません |
最後に、忘れずに「設定を保存」しましょう。
STEP 3. 問い合わせフォームのreCAPTCHAを有効にする
WPFormsをクリックし、作成したお問い合わせフォームを選択します。
［設定］ ＞［スパム対策とセキュリティ］からCAPTCHAを有効化します。
［フィールド］をクリックし、お問い合わせフォームにreCAPTCHAのマークを確認します。
最後に、実際のお問い合わせページにアクセスし、問題なくreCAPTCHAが表示されていれば設定完了です。
STEP 4. お問い合わせフォームの動作確認
これまでの設定が完了したら、最後に自分でお問い合わせフォームを送信して必ずチェックしておきましょう。
- ユーザー視点での確認
自分でフォームに入力して、メッセージを送信してみましょう。
入力したメールアドレス宛に自動返信メールが届くかどうかを確認！ - ブログ運営者としての確認
管理者として、フォーム送信内容が指定のメールアドレスに届いているかをチェックしましょう
まとめ｜WPFormsでお問い合わせフォームを作ろう
この記事では、WPFormsを使ってお問い合わせフォームを作成し、Google reCAPTCHAでスパム対策を行う方法を解説しました。
WPFormsは、初心者でもデザインが整ったお問い合わせフォームを簡単に作成できるプラグインです。
お問い合わせフォーム選びに悩んでいる方は、一度試してみる価値は十分にあります。
最近では、お問い合わせフォームをよりもSNSのDMを好むユーザーが増えてきました。
そのため、お問い合わせのページにSNSのリンクを設置し、気軽にメッセージをもらえる導線を用意しておくのもおすすめです。
とはいっても、お問い合わせフォームを設置しておくことで、ブログ全体の信頼感アップにもつながります。
なつなろSNSもあるからGoogle reCAPTCHAも無料枠で十分そう！
お問い合わせページを設置したら、次はGoogleアナリティクスとサーチコンソールを導入して、アクセス状況を確認できるようにしましょう。
なつなろプチコラム
ブログ初心者のころ、私自身がWPFormsの設定で特に戸惑った点は、次の2つでした。
- 通知の設定がうまくいかず、自動返信メールが届かない
- 管理者のメールアドレスがドメインと違うというワーニングの意味分からない
この記事は、私が初めてWPFormsを設定したときに「これを先に知りたかった」と感じたポイントを中心にまとめています。
少しでも初心者の方がつまずかずに設定できたら嬉しいです。
また、動作確認として複数のフリーメールアドレスからお問い合わせフォームを送信してみましたが、Yahoo!メールだけは、現在でも自動返信が迷惑メールに振り分けられてしまうケースがありました。
なつなろYahoo!メールは迷惑メール判定がやや厳しい印象があります…
そのため、送信完了後に表示するサンクスページには、「迷惑メールフォルダもあわせて確認してください」という一文を入れるようにしています。
ぜひ参考にしてみてください。
