ブログの夏|会社員の副業ライフハックメディア!

WPFormsでお問い合わせフォームを作る方法|reCAPTCHA設定まで丁寧に解説

当ページには広告が含まれています
【WPForms】お問い合わせフォームの設定方法
悩む人

WordPressにお問い合わせフォームを設置したいけれど、
・簡単に設定できて
・デザイン性がよくて
・信頼性のある安心して使える

そんなプラグインを知りたい!

そんなお悩みの方におすすめのお問い合わせフォームを紹介します。

有名なプラグインとしてContact Form7がありますが、HTMLやCSSなどの知識が必要になる場面も多く、初心者には少しハードルが高い印象です。

そこで紹介するのが、コード不要でドラッグ&ドロップだけで簡単にフォームが作れるプラグイン「WPForms」です。

無料版でも整ったフォームがすぐに作れるので、コードが苦手な人にもおすすめです。

この記事では、WPForms(無料版)の設定方法から、スパム対策のGoogle reCAPTCHAの設定までを画像付きで丁寧に解説していきます。

設定方法から見たいという方は、WPFormsのフォーム作成手順と設置方法からご覧ください。

WPForms Liteは、こんな人におすすめ!
  • 無料でシンプルなお問い合わせフォームを作りたい
  • コードを使わず、見た目の良いフォームを簡単に作りたい
  • お問い合わせ件数があまり多くない(月に〜15件程度)
  • 主な連絡手段は、SNSのDMを想定している

ブログ開設の全体的な流れを先に把握しておきたい方は、こちらの記事もあわせて確認してみてください。

目次

WPFormsとは?無料版と有料版の違い

WPFormsは、世界中で500万以上のサイトに使われている海外製のフォーム作成プラグインで、「無料版のLite」と「有料版のPro」があります。

WPForms Lite(無料)

基本的な問い合わせフォーム作成できる。

WPForms Pro(有料)

条件分岐・ファイル添付・支払い連携などが高度な機能に対応しています。
Pro版には4つのプラン(Basic、Plus、Pro、Elite)があります。

個人ブログや小規模なサイトで、問い合わせページのみを作りたいという場合であれば無料版で十分です。

サイトで商品の販売をしたり、ファイルのアップロード、問い合わせが多く管理を効率化したいという場合は、Pro版の導入やその他のプラグインやを検討しましょう。

もっと詳しく知りたい方は、WPFormsの公式ブログで各バージョンやプラン内容についても紹介されているので、参考にしてみてください。

WPForms Liteのメリット・デメリットをレビュー

メリットとデメリット

実際にWPFormsを使ってみた感想をメリット・デメリットでまとめました。

WPForms Liteを使って感じたメリット・デメリット

まず、使ってみてよかった点を紹介します。

スクロールできます
ポイント良かった点 / メリット
デザイン・操作性HTMLやCSSの知識がなくても整ったフォームが作れる
ドラッグ&ドロップ式で直感的に操作できる
レスポンシブスマホ表示にも自動対応
互換性・安定性他のプラグインやテーマとの相性が良くエラーが少ない
セキュリティ対策reCAPTCH v2・v3どちらにも対応
なつP

コードを書かずに整ったフォームが作れるのは便利すぎ!

気になった点は、以下です。

スクロールできます
ポイント気になった点 / デメリット
操作性・表示海外製のため、日本語訳が少し不自然な部分がある
機能・カスタマイズ無料版はカスタマイズや利用できる機能に制限がある
スパム対策カスタムCAPTCHA(ひらがな入力など)は有料版のみ対応
価格・プラン有料プランは4段階あり、内容が少し複雑で価格も高め

WPFormsで、ひらがなの日本語CAPTCHAの設定は、有料版のみ対応となっています。

ここで注意したいのが、スパム対策です。

WPForms Lite(無料版)には、簡単なスパムブロック機能しか備わっていないため、後ほどGoogle reCAPTCHA(無料)の設定で対策していきます。

次に、WPFormsを使って、お問い合わせフォームの作成手順を画像付きで解説していきます。

WPFormsのフォーム作成手順と設置方法

WPFormsのプラグインをインストールしましょう。

STEP 1. WPFormsのインストール

WordPressのダッシュボード左メニューから[プラグインを追加] をクリックし、WPFromsを検索します。

WPFormsインストール画面
  • 検索バーに[WPForms]と入力し、[今すぐインストール]クリックします。
WPFormsの有効化
  • 有効化]をクリックします。

STEP 2. フォームを作成

WPForms 最初のフォームを作成

最初のフォームを作成]をクリックして、お問い合わせフォームを作成していきます。

フォームに名前をつける

WPForms セットアップ画面
  • まず、[フォームに名前をつける]にフォーム名を入力します。
  • 空白のフォームを作成]をクリックします。

WPFormsチャレンジのポップアップは[×]で閉じてOKです。

項目(フィールド)の設定

WPForms フィールド画面

左の「標準フィールド」から、右のフィールドへお問い合わせに必要な項目をドラッグ&ドロップします。
フィールドの項目を並び替えたい場合も、ドラックで入れ替えることができます。

サンプル画像では、以下の4項目を設定しています。

  • 名前
  • メールアドレス
  • 単一行テキスト
  • 段落テキスト

操作に慣れてきたら、ご自身の好みに合わせていろいろと設定してみてください。

高度なフィールド]は、有料版(Pro)のみ使用できます。

[名前]の設定

WPForms フィールド - 名前の設定

一般タグを選択し、[名前]の設定をおこなっていきます。

スクロールできます
名前設定
ラベルデフォルトのままでもOK
「氏名」や「お名前」など好みで変更できます
フォーマットシンプル]を選択
説明【任意】空欄のままでOK
注意書きや補足の入力ができます
必須ON(必須)にする
必須の場合はラベル名の横に*がつきます
フォーマット[シンプル]の選択について

海外製のプラグインのため、入力項目を分けると「名 → 姓」の順になり、日本の表記としては不自然に感じる場合があります。
コードを編集して順番を変更することも可能ですが、少し手間がかかります。

そのため、[シンプル]を選択しておけば、ハンドルネームなどで気軽にお問い合わせしてもらえるのでおすすめです。

メールアドレスの設定

WPForms フィールド - メールアドレスの設定

WPFormsはバージョンアップにより使いやすくなったため、現在、メールアドレスIDはあまり意識する必要はありませんが、各フィールドにはそれぞれIDが割り振られています。(例.メールアドレスID #2)

メールアドレスのIDナンバーは、あと使用する可能性があるので、少しだけ意識しておいてください。

スクロールできます
メールアドレス設定
ラベルデフォルトでもOK 
メールアドレスやemailアドレス、など任意で変更できます
説明空欄のままでOK
例.受信可能なメールアドレスを入力してください、など
必須ON(必須)にする
必須の場合はラベル名の横に*がつきます

単一行テキストの設定

WPForms フィールド - 件名の設定

ここは、メッセージの件名やタイトルを入力する欄です。

分かりやすいように[ラベル名]を変更しましょう。

スクロールできます
単一行テキスト設定
ラベル件名・タイトル、など分かりやすい名称に変更
説明空欄のままでOK
必須【任意】入力を必須にする場合はONにする

段落テキストの設定

WPForms フィールド - メッセージの設定(一般)

問い合わせの内容を入力する欄です。

分かりやすいように[ラベル名]を変更しましょう。

スクロールできます
単一行テキスト設定
ラベル本文・メッセージなど分かりやすい名称に変更
説明空欄のままでOK
必須ON(必須)にする
必須の場合はラベル名の横に*がつきます
[高度な設定]タブについて
WPForms フィールド - 名前の設定(高度な設定)

高度な設定]タブでは、フィールドサイズの調整や、プレースホルダーテキストを入力できます。

全項目の設定ができたら、忘れずに右上の[保存]をクリックしましょう。

STEP 3. 通知の設定

この通知機能本来の使い方は、お問い合わせが送信されたときに、管理者(自分)に通知メールとして届くようにすることです。

設定を工夫すれば、お問い合わせしたユーザーに対して自動返信メールとして利用することもできます。

ここでは、お問い合わせ送信時にユーザーや管理者に届く確認メールの設定方法を紹介します。

ここで出てくる「管理者のメールアドレス」とは、WordPressの設定一般設定にある[管理者メールアドレス]を指します。

WPForms 通知設定
通知を有効化

ON]にします。

送信先メールアドレス

自動返信メールを受け取るメールアドレスです。以下の2つを設定します。

  • 管理者のメールアドレス(自分)
  • 入力されたメールアドレス(ユーザー)

初期設定では[管理者のメールアドレス]のみが設定されています。タグアイコンから[メールアドレス](ラベル名で設定した項目)を選択します。

複数アドレス入力する場合は、半角カンマ(,)で区切るようにします。

複数のメールアドレスを指定しても、メールはそれぞれ個別に送信されます。
そのため、受信者には他のメールアドレスは表示されません。

メール件名

自動返信メールの件名として表示されます。

例.サイト名|お問い合わせありがとうございます

フォーム名

自動返信メールのFrom(送信元の名前)として表示されます。

サイト名や管理人名を設定するのがおすすめです。

送信元メールアドレス

自動返信メールのFrom(送信元のメールアドレス)として表示されます。

初期設定では、管理者のメールアドレスが設定されています。

Reply-To

この自動返信メールに対して「返信」を押したときに、宛先として指定されるメールアドレスです。

ここで設定したアドレスに自動返信メール(通知メール)が届く、という意味ではないため注意してください。

メールメッセージ

ここに入力した内容が、自動返信メールの本文として送信されます。

デフォルトでは「{all_fields}」のみが設定されていますが、簡単なお礼の一文を追加しておくのがおすすめです。

{all_field}には、設定した項目(名前からメッセージまで)の問い合わせ内容がまとめて表示されます。

最後に、忘れずに「保存」しましょう。

実際にユーザーに送られた自動返信メールは、下の図のような内容で表示されます。

WPForms 通知設定とメール表示

送信元メールアドレスで以下のようなワーニングがでる場合

WPForms 通知設定(ワーニング)

送信元メールアドレスがサイトのドメインと異なる場合、迷惑メールとして扱われやすくなるため、上のような警告が表示されることがあります。

例えば、管理者のメールアドレスにGmailやYahoo!などのフリーメールを設定している場合です。

WordPress>設定>一般 -管理者メールアドレスの画面

この対策として、WP Mail SMTPなどのSMTPプラグインを利用することで、メールの到着率を高めることができます。

さらにメールの到着率を向上させる方法

管理者のメールアドレスには、レンタルサーバーで作成した独自ドメインメールを設定し、あわせてWP Mail SMTPなどのSMTPプラグインを設定することで到着率を高めることができます。

管理者のメールアドレスは、独自ドメインメールを設定するのがおすすめ!

STEP 4. 確認画面の設定

次に、お問い合わせ送信後に、ユーザーの画面に表示されるページを設定します。

以下の3つの方法から選択できます。

1. メッセージ

お問い合わせページの画面に、送信完了メッセージを表示します。

2. ページを表示

固定ページで作成したサンクスページなどを表示します。
事前に表示させたいページを作成しておきましょう。

3. URLに移動(リダイレクト)

指定したURLへ自動的に移動します。
基本的に別サイトへ遷移させたい場合に使うので、個人ブログではあまり使用しません。

ここでは、1. メッセージ2. ページを表示の設定を紹介します。

「メッセージ」を選択した場合

WPForms 確認画面設定(メッセージ)
  • 確認タイプ:[メッセージ]を選択します。
  • 確認メッセージ:画面に表示させるメッセージを作成します。

忘れずに、「保存」をクリックします。

「ページを表示」を選択した場合

WPForms 確認画面設定(ページを表示)
  • 確認タイプ:[ページを表示]を選択します。
  • 確認ページ:表示させたい固定ページを選択します。

URL Parametersは、上級者向けの使用になります。
サンクスページを表示するだけなら、ここはブランクで問題ありません。

忘れずに、「保存」をクリックします。

個人的には、ユーザーにとって送信完了が分かりやすいページを表示(サンクスページ)がおすすめです。

STEP 5. フォームをお問い合わせページに設定する

フォームや基本的な設定が完成したら、お問い合わせページを作っていきます。

設置方法としては、以下の方法があります。

  • 新規ページ作成と同時にお問い合わせフォームを設定する
  • 既存ページにお問い合わせフォームを設定する
WPForms ページに埋め込み選択画面

パターン① 新規ページ作成と同時にお問い合わせフォームを設定する場合

WPForms 新規ページへの埋め込み

新しいページのタイトルを入力し、[はじめる]をクリックします。

WPForms お問い合わせ画面の完成

自動でフォームが埋め込まれたページが作成されます。

忘れずに、スラッグの変更やページを整えて公開]しましょう。

パターン② 既存ページにフォームを設定する場合

WPForms 既存ページへの埋め込み

プルダウンからフォームを設定する既存ページを選択し、[はじめる]をクリックします。

既存ページは、下書き保存の状態では選択できないため「公開中」にしておきましょう。

WPForms 既存ページへの埋め込み設定方法(ブロック追加)

左上にあるブロックを追加[+]をクリックします。

WPForms 既存ページへの埋め込み方法(ブロック選択)

検索窓に「WPForms」と入力し、[WPForms]を選択します。
記事スペース内に表示されたwpformsのプルダウンから、作成したフォームを選択します。

設定できたら、忘れずに「保存」をクリックしましょう。

このあと、お問い合わせフォームの動作確認を行いますが、ここでは先にスパム対策のためのGoogle reCAPTCHAを導入してから動作確認を行う方法で解説します。

スパム対策|Google reCAPTCHAの設定方法

reCAPTCHA 私はロボットではありませんのイラスト

お問い合わせフォームには、スパム対策が欠かせません。

そこでスパム対策として便利なのが、Googleが提供しているreCAPTCHAです。

WPFormsにreCAPTCHAを設定するには、事前にGoogleアカウントでサイト用のreCAPTCHAのサイトキーシークレットキーを取得しておく必要があります。

ここでは、reCAPTCHAを取得しWPFormsに設定する方法を説明していきます。

2026年4月以降、reCAPTCHAに関するプライバシー・利用規約のルールが変更される予定ですが、現時点では特別な対応は不要で、通常どおり設定して問題ありません。

Google reCAPTCHAのタイプについて

Google reCAPTCHAには、以下の3つのタイプがあります。

reCAPTCHA v2

「私はロボットではありません」というチェックボックスが表示されます。
ユーザーにとってチェックを入れる手間はかかりますが、スパムを防ぎやすい方式です。

Invisible reCAPTCHA v2

見た目上は何も表示されませんが、疑わしいと判断されたら場合は、送信時に画像承認が表示されます。

reCAPTCHA v3

reCAPTCHAのロゴは表示されますが、スコア判定によって自動で判断してくれるため、ユーザーが操作する必要はありません。
ただしスコア判定方式のため、環境や条件によっては誤判定が起こる可能性もあります。

個人的には、ユーザーが動作を把握しやすく誤判定が少ないreCAPTCHA v2(チェックボックス型)がおすすめですが、サイトの方針や好みに合わせて選んでも問題ありません。

STEP 1. reCAPTCHAの登録とキーの作成

reCAPTCHAのサイトにアクセスし、サイトキーとシークレットキーを作成します。

手順
サイト登録とreCAPTCHAタイプの設定
reCAPTCHAのサイト登録画面
スクロールできます
項目おすすめ設定
ラベルサイト名など任意の名前を入力
reCAPTCHAタイプ導入するreCAPTCHAタイプを選択
ドメイン導入するサイトのhttps://〜以降(ドメイン部分)を入力
Google Cloud Platform任意のプロジェクト名を入力

同意欄にチェックをいれ、[送信]をクリックします。

Google Cloud Platformの作成について

以前は、ドメインのみでreCAPTCHA を作成できましたが、現在はGoogle Cloud Platform(GCP)上でreCAPTCHAを設定する流れになっていました。

Google reCAPTCHAは、基本的に無料で利用できますが、無料枠(月に10,000件のリクエスト)を超えると、エラーとなったり有料プランの利用を求められることがあります。

しかし、通常の個人ブログであれば、月に1万回以上の検証リクエストが発生することはほとんどないため、基本的には無料範囲内で利用できます。

Google公式:reCAPTCHA による bot 攻撃からの保護とオンライン不正行為の防止

手順
サイトキーとシークレットキーの取得
reCAPTCHAのサイトキーとシークレットキー

reCAPTCHA を作成すると、サイトキーとシークレットキーが発行されます。

これらのキーをWPFormsに設定していきます。

STEP 2. reCAPTCHAをWPFormsに設定

WPForms CAPTCHA設定画面

WordPressの左メニューにある[WPForms]>[設定]をクリックします。
次に、上のメニューから[CAPTCHA]を選択し、[reCAPTCHA]をクリックします。

スクロールできます
項目設定
タイプ作成したreCAPTCHAタイプを選択
サイトキーreCAPTCHAのサイトキーを貼る
シークレットキーreCAPTCHAのシークレットキーを貼る
失敗メッセージデフォルトでOK
無競争モード他でreCAPTCHAを使っていないならOFFでOK
プレビューreCAPTCHA v2を選択した場合、「設定を保存」すると表示されます
*Invisible reCAPTCHA v2とv3を選択した場合は表示されません

最後に、忘れずに「設定を保存」しましょう。

STEP 3. 問い合わせフォームのreCAPTCHAを有効にする

WPForms スパム対策とセキュリティ画面

WPFormsをクリックし、作成したお問い合わせフォームを選択します。

設定] >[スパム対策とセキュリティ]からCAPTCHAを有効化します。

WPForms フィールドでのreCAPTCHA確認画面

フィールド]をクリックし、お問い合わせフォームにreCAPTCHAのマークを確認します。

(サンプル)お問い合わせページに表示されたreCAPTCHA v2の画面

最後に、実際のお問い合わせページにアクセスし、問題なくreCAPTCHAが表示されていれば設定完了です。

STEP 4. お問い合わせフォームの動作確認

これまでの設定が完了したら、最後に自分でお問い合わせフォームを送信して必ずチェックしておきましょう。

  • ユーザー視点での確認
    自分でフォームに入力して、メッセージを送信してみましょう。
    入力したメールアドレス宛に自動返信メールが届くかどうかを確認します。
  • ブログ運営者としての確認
    管理者として、フォーム送信内容が指定メールアドレスに届いているかをチェックしましょう。

まとめ|WPFormsでお問い合わせフォームを作ろう

WPFormsのお問い合わせフォーム作成画面

この記事では、WPFormsを使ってお問い合わせフォームを作成し、Google reCAPTCHAでスパム対策を行う方法を解説しました。

WPFormsは、簡単にデザインが整ったお問い合わせフォームを作成できるプラグインです。
お問い合わせフォーム選びに悩んでいる方は、一度試してみる価値は十分にあります。

最近では、お問い合わせフォームをよりもSNSのDMを好むユーザーが増えてきました。

そのため、お問い合わせのページにSNSのリンクを設置し、気軽にメッセージをもらえる導線を用意しておくのもおすすめです。

とはいっても、お問い合わせフォームを設置しておくことで、ブログ全体の信頼感アップにもつながります。

最近はSNSもあるから、Google reCAPTCHAも無料枠で十分そう!

お問い合わせページを設置したら、次はGoogleアナリティクスとサーチコンソールを導入して、アクセス状況を確認できるようにしましょう。

なつPのプチコラム

ブログ初心者のころ、私自身がWPFormsの設定で特に戸惑った点は、次の2つでした。

  • 通知の設定がうまくいかず、自動返信メールが届かない
  • 管理者のメールアドレスがドメインと違うというワーニングの意味分からない

この記事は、私が初めてWPFormsを設定したときに「これを先に知りたかった」と感じたポイントを中心にまとめています。
少しでも初心者の方がつまずかずに設定できたら嬉しいです。

また、動作確認として複数のフリーメールアドレスからお問い合わせフォームを送信してみましたが、Yahoo!メールだけは、現在でも自動返信が迷惑メールに振り分けられてしまうケースがありました。

なつP

Yahoo!メールは迷惑メール判定がやや厳しい印象があります…

そのため、送信完了後に表示するサンクスページには、「返信が届かない場合は、迷惑メールフォルダもあわせて確認してください」という一文を入れるようにしています。

ぜひ参考にしてみてください。

【WPForms】お問い合わせフォームの設定方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次