「Contact Form by WPForms」でお問い合わせフォームの作り方

この記事では、プラグイン「WPForms」でお問い合わせフォーム(コンタクトフォーム)を設置する方法を、画像を用いてわかりやすくご紹介します。

サイトの信頼性を高めるために最低限必要なものの1つが、お問い合わせフォームです。

Contact Form by WPForms」なら、プラグイン1つで、ほとんどの機能に対応できます。

suya

プライバシーポリシーと共に必須です。

なるほどくん

なるほど!必ず必要なんですね。

この記事でできること
  • 簡単にお問い合わせフォームを作成できる
  • スパムメール(迷惑メール)対策ができる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、WordPress(ワードプレス)プライバシーポリシーの設置がすぐ完了します。

ぜひ最後まで進めてみてください。

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

目次

プラグイン「Contact Form by WPForms」とは

Contact Form by WPForms」は、お問い合わせフォーム(コンタクトフォーム)申し込みフォームを作成できるWordPressプラグインです。

無料版では、「WPForms Lite」という名前になります。

「WPForms Lite」でできること
  • 雛形(テンプレート)簡単に作成できる
  • 自動返信メールを設定できる
  • サンクスページ(送信完了ページ)を設定できる
  • reCAPTCHA」でスパムメール(迷惑メール)対策ができる

メール送信プラグイン「WP Mail SMTP」と同じ開発元で、シンプルで使いやすいのが特徴です。

「WPForms」と「Contact Form 7」の違い(比較)

同様のフォーム作成プラグインとして「Contact Form 7」がありますが、「WPForms」の方がおすすめです。

比較項目WPFormsContact Form 7
おすすめ初心者向け上級者向け
全体機能シンプル複雑
動作速度軽い・速い重い・遅い
雛形(テンプレート)×
自動返信メール
サンクスページ(送信完了ページ)×
確認画面表示××
reCAPTCHA 標準対応×
データベース保存管理有料プラン追加プラグイン

WPForms」は、多くの機能に標準対応しているため、追加プラグインとの相性による不具合(障害)が起こりにくいです。

Contact Form 7」は、カスタマイズ(プログラミング)が前提となっており、外部プラグインとの相性による不具合(障害)も起こりやすいです。

  • サンクスページ(送信完了ページ)対応には、PHPカスタマイズ(プログラミング)が必要
  • reCAPTCHA 対応には、外部プラグインが必要で、相性による不具合が起こりやすい
  • 頻繁な仕様変更によるバージョンアップ対応が必要
suya

初心者に「Contact Form 7」はおすすめしません。

仕事の依頼を受けることがあるお問い合わせフォームで、「Google フォーム」を利用するのもやめておきましょう。

お問い合わせフォームを設置する流れ

まずは全体の流れをステップに分けて見ていきましょう。

STEP
プラグイン「WPForms」をインストール・有効化
  • WPForms」を検索
STEP
お問い合わせページを作成
  • 雛形(テンプレート)からお問い合わせフォームを作成
  • お問い合わせページ(固定ページ)を作成
STEP
Google「reCAPTCHA」を設定
  • Invisible reCAPTCHA v2」に登録
STEP
お問い合わせフォームの設定を変更
  • デザインをカスタマイズ
  • 自動返信メールを追加

大体の流れをつかんだら、あとは手順に従って作業を進めていくだけです。

ここから、具体的な作業が始まります。(画面は基本的にPC版です。)

1) プラグイン「WPForms」をインストール・有効化

WordPress(ワードプレス)にログインしたら、左メニューの[プラグイン][新規追加]をクリックして、[プラグインの検索]をします。

WordPress(ワードプレス)のプラグインを検索して新規追加
[プラグイン]→[新規追加]から、[プラグインの検索]

WPForms」を検索して、[今すぐインストール]した後に[有効化]します。

WordPressプラグイン「WPForms」のインストール
「Contact Form by WPForms」をインストール・有効化

以上で、フォーム作成プラグイン「Contact Form by WPForms」のインストール・有効化は完了です。

2) お問い合わせページを作成

インストール・有効化が完了すると、以下のような画面になります。

左メニューの[WPForms][新規追加]をクリックして[最初のフォームを作成]します。

WordPressプラグイン「WPForms」の新規追加
[WPForms]→[新規追加]をクリック

フォーム名に「お問い合わせ」と入力して[簡単なお問い合わせフォーム(Simple Contact Form)]を選択します。

WordPressプラグイン「WPForms」のテンプレート(簡単なお問い合わせフォーム)
フォーム名に「お問い合わせ」と入力して[簡単なお問い合わせフォーム]を選択

そのまま[</> 埋め込む]ボタンをクリックします。

WordPressプラグイン「WPForms」の埋め込み
[埋め込む]をクリック

選択画面が表示されたら、[新規ページを作成]をクリックします。

WordPressプラグイン「WPForms」の埋め込み(新規ページ)
[新規ページを作成]をクリック

ページタイトルに「お問い合わせ」と入力して[行きましょう!]をクリックします。

WordPressプラグイン「WPForms」の埋め込み(タイトル)
「お問い合わせ」と入力して[行きましょう!]をクリック

右メニュー(設定メニュー)の「パーマリンク(URL スラッグ)」に「contact」と入力して[公開]をクリックします。

WordPressプラグイン「WPForms」の埋め込み(URLスラッグ)
「パーマリンク(URL スラッグ)」に「contact」と入力して[公開]

これで、お問い合わせページはもう公開されています。

ページを新規作成した当初は、パーマリンク(URL スラッグ)の入力欄が表示されていません。

→ 一度[下書き保存]をクリックすると表示されます。

そもそも右メニュー(設定メニュー)が表示されていない場合もあります。

→ 右上の[(歯車)]アイコンから右メニュー(設定メニュー)を表示してください。

ブロックを編集(選択)中の場合は、右メニュー(設定メニュー)のタブが切り替わっていることがあります。

→ 右メニュー(設定メニュー)の[固定ページ]タブをクリックして、記事の設定項目を表示してください。

「noindex」を設定すると、「サイト名 問い合わせ」などで検索しても、検索結果に表示されなくなります。

  • 問い合わせを増やしたい場合、お問い合わせページに「noindex」を設定しない
  • 問い合わせを減らしたい場合、お問い合わせページに「noindex」を設定する

仕事の依頼を増やしたい個人副業や個人事業主であれば、「noindex」はおすすめしません。

問い合わせによるサポート対応を減らしたい法人企業であれば、「noindex」をおすすめします。

よくわからない場合は、お問い合わせページ「noindex」を設定しないことをおすすめします。

  • 「noindex」を設定しても、スパム対策にはならない
  • 「noindex」を設定したページに似せた詐欺サイト(フィッシングサイト)も登場している

スパム対策には、Google「reCAPTCHA」などを利用しましょう。

以上で、お問い合わせフォーム(コンタクトフォーム)の作成は完了です。

3) Google「reCAPTCHA」を設定

お問い合わせフォームを公開しただけでは、スパムメール(迷惑メール)対策ができていません。

ここでは、Googleの「reCAPTCHA」を利用したスパム対策(ロボット対策)のやり方を解説します。

Google「reCAPTCHA」とは

Googleの「reCAPTCHA」は、ユーザー挙動や画像認証によって、ロボット判定して送信拒否されるサービスです。

Checkbox reCAPTCHA v2」の場合、チェックボックスをクリックすることで、ロボットか判定されます。

Google reCAPTCHA v2 チェックボックス (私はロボットではありません)
私はロボットではありません

画像認証が利用できる場合は、タイル(画像)を選択することで、ロボットか判定されます。

Google reCAPTCHA v2 画像認証(タイルを選択してください)
reCAPTCHAの画像認証

Invisible reCAPTCHA v2」や「reCAPTCHA v3」の場合、以下のようなバッジが表示されるだけで、自動的にロボットか判定されます。

Google reCAPTCHAバッジ(v2 Invisible、v3)
reCAPTCHA で保護されています

事前)Gmail(Googleアカウント)の作成

Googleサービス(reCAPTCHA)の利用には、Googleアカウントが必要になります。

Gmail(Gメール)アドレスを持っていない人は、以下のページを参考にアカウントを作成してください。

1) Google「reCAPTCHA」に登録

以下のリンクから、Google reCAPTCHAの公式サイトにアクセスします。

Google reCAPTCHA

\ 登録開始 /

以下の画面が表示されたら、[v3 Admin Console]をクリックします。

[Get Started]をクリックしないように注意してください。

Google reCAPTCHAのサイト登録を開始
[v3 Admin Console]をクリック

Googleログイン画面が表示された場合は、Googleアカウントでログインしてください。

複数のGoogleアカウントを持っている場合は、右上のアイコンから登録したいアカウントに切り替えてください。

ラベル(ドメイン名)、reCAPTCHA タイプ(v2 非表示)、ドメイン、同意チェックを設定して[送信]をクリックします。

Google reCAPTCHAのサイト登録(v2 Invisible)
ラベル(ドメイン名)、reCAPTCHA タイプ(v2 非表示)、ドメイン、同意チェックを設定

WPForms」では「reCAPTCHA v2 非表示(Invisible reCAPTCHA v2)」を選択するようにしてください。

  • Checkbox reCAPTCHA v2」は、手動の画像認証でロボットか判定して送信
  • Invisible reCAPTCHA v2」は、自動でロボットか判定して、手動の画像認証も可能
  • reCAPTCHA v3」は、自動でロボットか判定して、手動の画像認証は不可

「v3」の場合、ロボットと誤判定されてしまうと、本当に問い合わせしたい人も送信不可(足切り)になってしまいます。

ただし、AMP機能を利用したい場合は、「reCAPTCHA v3」を利用する必要があります。

参考)How to Choose a CAPTCHA in WPForms

[サイトキーをコピー][シークレットキーをコピー]するか、画面を開いたままにしておきます。

Google reCAPTCHAのサイト登録(サイトキー、シークレットキー)
[サイトキーをコピー]と[シークレットキーをコピー]

2) WPForms に「reCAPTCHA」を設定

WordPress(ワードプレス)で、左メニューの[WPForms][設定]をクリックして設定画面を開きます。

WordPressプラグイン「WPForms」の設定を開始
[WPForms]→[設定]をクリック

[CAPTCHA]タブを開き、[reCAPTCHA]を選択します。

WordPressプラグイン「WPForms」のCAPTCHA設定(reCAPTCHA)
[CAPTCHA]を開き、[reCAPTCHA]を選択

タイプで「Invisible reCAPTCHA v2」を選択し、コピーしておいたサイトキーシークレットキーを入力して[設定を保存]をクリックします。

WordPressプラグイン「WPForms」のCAPTCHA設定(Invisible reCAPTCHA v2)
「Invisible reCAPTCHA v2」を選択し、コピーしておいたサイトキー、シークレットキーを入力

3) お問い合わせフォーム に「reCAPTCHA」を設置

作成したお問い合わせフォームに「reCAPTCHA」を設定します。

左メニューの[WPForms][すべてのフォーム]を開き、「お問い合わせ」フォームをクリックします。

WordPressプラグイン「WPForms」のすべてのフォーム
[WPForms]→[すべてのフォーム]から、「お問い合わせ」フォームをクリック

[reCAPTCHA]をクリックしてフィールドを追加して[保存]します。

WordPressプラグイン「WPForms」の編集画面(reCAPTCHAフィールド)
[reCAPTCHA]フィールドを追加

右上にreCAPTCHAバッジが表示されるのを確認してください。

以上で、Google「reCAPTCHA」の導入は完了です。

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

お問い合わせページにアクセスして、画面右下に「reCAPTCHAバッジ」が表示されているか確認します。

https://ドメイン名/contact

WordPressプラグイン「WPForms」の送信画面(reCAPTCHAバッジ)
「reCAPTCHAバッジ」が表示されているか確認

テスト送信すると、以下のような画面に切り替わります。(画面が自動スクロールします。)

WordPressプラグイン「WPForms」の送信完了画面
ご連絡ありがとうございます。近いうちにご返信させていただきます。

テスト送信すると、以下のような受信メールが届きます。(なりすましメールと判定されます。)

WordPressプラグイン「WPForms」の送信完了メール
お問い合わせ受信メール(Gmailの例)

メールが届かない場合は、「迷惑メール」フォルダに自動的に振り分けられている可能性があります。

以上で、お問い合わせフォーム(コンタクトフォーム)の動作確認(動作検証)は完了です。

suya

このままだとデザインやメール通知がいけていません。

  • 名前の入力欄が、「姓名」に分かれていて、「名、姓」の逆順(英語順)
  • コメントでないのに「コメントまたはメッセージ」と表示
  • 自分への受信メールだけで、送信者への自動返信メールが送信されない
  • なりすましメールとみなされて、迷惑メールフォルダに振り分けられる恐れがある

次に、デザインや通知メールを変更する方法を見ていきましょう。

4) お問い合わせフォームの設定を変更

左メニューの[WPForms][すべてのフォーム]を開き、「お問い合わせ」フォームを開きます。

WordPressプラグイン「WPForms」のすべてのフォーム
[WPForms]→[すべてのフォーム]から、「お問い合わせ」フォームをクリック

「フィールド」画面が開きます。

WordPressプラグイン「WPForms」の編集フィールドを開始
「フィールド」画面を開く

名前」フィールドをクリックして選択し、「フォーマット」を[名、姓]から[シンプル]に変更します。

「フィールド」画面は、フォームの見た目の設定項目です。

WordPressプラグイン「WPForms」の編集フィールド(名前)
[名前]の「フォーマット」を[名、姓]から[シンプル]に変更
設定項目変更前変更後
名前→フォーマット名、姓シンプル

[コメントまたはメッセージ]フィールドをクリックして選択し、「ラベル」を[メッセージ]に変更して[保存]をクリックします。

WordPressプラグイン「WPForms」の編集フィールド(メッセージ)
[コメントまたはメッセージ]の「ラベル」を[メッセージ]に変更
設定項目変更前変更後
段落テキスト→ラベルコメントまたはメッセージメッセージ

左アイコンの[設定]をクリックして「一般」設定画面を開きます。

WordPressプラグイン「WPForms」の編集設定を開始
「一般」設定画面を開く

左メニューの[通知]をクリックし、メールアドレスへ送る、メールの件名(Email Subject Line)、メッセージ(Email Message)を変更して[保存]をクリックします。

「通知」設定画面は、自動送信メール(受信メール、自動返信メール)の設定項目です。

WordPressプラグイン「WPForms」の編集設定(通知)
[通知]設定画面を変更
設定項目変更前変更後
通知→メールアドレスへ送る{admin_email}{admin_email},{field_id=”1″}
通知→メールの件名(Email Subject Line)新規項目: お問い合わせお問い合わせを受け付けました
通知→メッセージ(Email Message){all_fields}ご連絡ありがとうございます。近いうちにご返信させていただきます。
{all_fields}

「{field_id=”1″}」は、お問い合わせフォームに入力されたメールアドレスです。

メールアドレスへ送る」設定に「{field_id=”1″}」を追加することで、送信者に自動返信メールを送ることができます。

ちなみに、「{admin_email}」はWordPress(ワードプレス)の管理者ユーザー(あなた)のメールアドレスです。

左メニューの[確認]をクリックし、「確認メッセージまで自動的にスクロールする」をOFFに変更して[保存]をクリックします。

「確認」設定画面は、送信完了ページ(サンクスページ)の設定項目です。

WordPressプラグイン「WPForms」の編集設定(確認)
「確認」設定画面を変更
設定項目変更前変更後
確認→確認メッセージまで自動的にスクロールするONOFF

確認タイプ」を[メッセージ]にすると、送信完了画面に設定したメッセージを表示することができます。

確認タイプ」を[ページを表示]にすると、自分で作成した固定ページ(サンクスページ)に飛ばすことができます。

確認タイプ」を[URLに移動(リダイレクト)]にすると、外部ページに飛ばすことができます。

以上で、お問い合わせフォーム(コンタクトフォーム)の設定変更は完了です。

必要に応じて、再度テスト送信で動作確認(動作検証)してみてください。

参考)その他の設定を変更

WPForms」をインストール・有効化すると、WordPress管理画面の上部の「管理バーメニュー」が追加されます。

また、メールの受信数を毎週メールで通知されます。

これをやめたい場合は、「その他」の設定から変更することができます。

左メニューの[WPForms][設定]をクリックしたら、「その他」タブを開きます。

管理バーメニューを非表示」と「メールの概要を無効化」をチェックONにして[設定を保存]をクリックします。

WordPressプラグイン「WPForms」のその他設定
「その他」設定画面を変更
設定項目変更前変更後
管理バーメニューを非表示OFFON
メールの概要を無効化OFFON

以上で、その他の設定変更は完了です。

参考)なりすましメール対策

自動送信メール(受信メール、自動返信メール)は、WordPress(ワードプレス)サーバーから送信されます。

そのため、メールアドレスの正しい送信サーバー以外から送信されたものとして、なりすましメールと判定されます。

これを防ぐためには、WordPress(ワードプレス)に正しい送信サーバーを設定する必要があります。

Gmail(Gメール)の場合

writing…

独自メールの場合

writing…「WP Mail SMTP

参考) グローバルナビやフッターメニューに設置

グローバルナビ(ヘッダーメニュー)フッターメニューに、お問い合わせページへのリンクを設置します。

  • 左メニューの[外観][メニュー]からお問い合わせページ(固定ページ)を設置

この後も、プロフィールページを作成したり、サイト全体のデザインをしたりするため、後でまとめて設定しましょう。

この記事のまとめ

プラグイン「WPForms」を利用してお問い合わせフォーム(コンタクトフォーム)を設置する方法を見てきました。

WPForms」なら、かなり簡単にお問い合わせフォームを設置できます。

なるほどくん

シンプルで簡単ですね。

必要最低限のページができたら、サイト全体の基本デザインを始めます。

WordPressテーマのデザイン設定をするため、次のステップに進みましょう。

よくある質問(FAQ)

「Google フォーム」はおすすめではありませんか?

Google フォーム」は、Googleのフォーム作成ツールです。

外部ページを埋め込む形になるため、デザイン崩れやデザイン統一の問題が生じます。

せっかくWordPress(ワードプレス)で自由にデザインできるのに、フォームだけ外部サービスを利用するのはおすすめしません。

入力内容の確認画面を追加することはできませんか?

標準機能では、入力内容の確認画面を追加することはできません。

外部プラグインを利用すると、バージョンアップ時に不具合が起こることがあります。

確認画面を追加したい場合は、有料サービスを利用することをおすすめします。

編集画面でパーマリンク(URL スラッグ)の入力欄はどこにありますか?

ページを新規作成した当初は、パーマリンク(URL スラッグ)の入力欄が表示されていません。

→ 一度[下書き保存]をクリックすると表示されます。

そもそも右メニュー(設定メニュー)が表示されていない場合もあります。

→ 右上の[(歯車)]アイコンから右メニュー(設定メニュー)を開いてください。

ブロックを編集(選択)中の場合は、右メニュー(設定メニュー)のタブが切り替わっていることがあります。

→ 右メニュー(設定メニュー)の[固定ページ]タブをクリックして、記事の設定項目を表示してください。

お問い合わせページに「noindex」を設定する必要はありませんか?

「noindex」を設定すると、「サイト名 問い合わせ」などで検索しても、検索結果に表示されなくなります。

問い合わせを増やしたい場合、お問い合わせページに「noindex」を設定しなようにしましょう。

問い合わせを減らしたい場合、お問い合わせページに「noindex」を設定しましょう。

よくわからない場合は、お問い合わせページ「noindex」を設定しないことをおすすめします。

スパム対策(迷惑メール対策)のために、お問い合わせページを「noindex」に設定する必要はありませんか?

「noindex」は、検索エンジンなどのロボット(クローラ)に対して、インデックス(登録)不要と通知するための設定です。

悪意のあるロボットは、「noindex」設定は無視するため、スパム対策(迷惑メール対策)にはなりません。

Google「reCAPTCHA」は、最新バージョンの「v3」を利用すべきではないですか?

reCAPTCHA v3」は、手動での画像認証ができず、自動認証のみ行います。

そのため、ロボットと誤判定されてしまうと、本当に問い合わせしたい人も送信不可になってしまいます。

基本的に「reCAPTCHA v2 非表示(Invisible reCAPTCHA v2)」を選択するようにしてください。

「reCAPTCHAバッジ」は、全ページに表示されませんか?

はい、「WPForms」reCAPTCHA設定では、バッジが全ページに表示されることはありません。

Contact Form 7」の場合は、reCAPTCHA外部プラグインによって、バッジが全ページに表示されることがあります。

メールが届かないのはなぜですか?

メールが届かない場合は、「迷惑メール」フォルダに自動的に振り分けられている可能性があります。

Gmail(Gメール)であれば、「ソーシャル」、「プロモーション」フォルダもご確認ください。

名前の入力欄を「姓、名」の順番にすることはできませんか?

標準機能では、名前の入力欄を「姓、名」の順番にすることはできません。

ただ、多様性(ダイバーシティ)が広がる中で、アクセシビリティの観点では「姓名」に分けないことをおすすめします。

法令やビジネス上の理由で、「姓名」に分ける必要がある場合は、有料サービスを利用することをおすすめします。

「WPForms」の自動返信メールは、有料プランではないですか?

WPForms」では、条件分けでメール通知を分岐させるには、有料プランにする必要があります。

しかし、同じ内容のメールを複数のメールアドレスに送信するのは、無料プランでも可能です。

そのため、「メールアドレスへ送る」設定に「{field_id=”1″}」を追加して、自動返信メールを可能にしています。

「メールアドレスへ送る」設定に追加した「{field_id=”1″}」はどういう意味ですか?

「{field_id=”1″}」は、お問い合わせフォームに入力されたメールアドレスです。

メールアドレスへ送る」設定に「{field_id=”1″}」を追加することで、送信者に自動返信メールを送ることができます。

ちなみに、「{admin_email}」はWordPress(ワードプレス)の管理者ユーザー(あなた)のメールアドレスです。

サンクスページ(送信完了ページ)を自由に編集することはできますか?

はい、自分で作成した固定ページ(サンクスページ)に飛ばす設定も可能です。

「確認」設定画面で、「確認タイプ」を[ページを表示]に変更します。

サンクスページ(送信完了ページ)を外部ページに飛ばすことができますか?

はい、別ドメインの外部ページに飛ばす設定も可能です。

「確認」設定画面で、「確認タイプ」を[URLに移動(リダイレクト)]に変更します。

お問い合わせフォームの履歴(データベース)を残すことはできませんか?

WPForms」では、有料プランで可能になります。

Contact Form 7」では、追加プラグイン「Flamingo」で可能になります。

ただし、サーバー上にデータが残るということは、不正ログインされたら個人情報流出につながります。

メールを消さずに残しておけば、履歴(データベース)を残す必要はありません。

法人企業などで管理上残す必要がある場合は、有料サービスを利用することをおすすめします。

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる