【図解で丁寧解説】WordPressブログにお問い合わせフォームを作る方法｜WPFormsの設定

2023年2月10日2023年2月11日

おかっぱちゃん

ブログにお問い合わせを設置する方法が知りたいです。
初心者なので分かりやすく教えてほしいです。

お問い合わせフォームは、プラグインを使えば初心者でも簡単に作ることができます。

ここでは、直観的に操作ができて初心者向きな「WPForms」というプラグインでの設置方法を紹介します。

この記事で分かること

「WPForms」プラグインで簡単にお問い合わせフォームを作る方法
- WPFormsをインストールする方法
- WPFormsでお問い合わせフォームの作り方
- reCAPTCHAの設定方法（スパム対策）

インストール方法や作り方、スパム対策まで、図解で丁寧に解説しています。

ぜひ一緒に操作をしながら進めてみてくださいね。

WPFormsをインストールする方法

まず最初に、WPFormsをインストールします。

インストールは次の手順で行います。

STEP

「プラグイン」⇒「新規追加」の順にクリックします。

STEP

➀キーワードの欄に「WPForms」と入力。
②表示された「Contact Form byWPForms– WordPress 用のドラッグ & ドロップフォームビルダー」の「今すぐインストール」をクリックします。

STEP

インストールが完了したら、「有効化」をクリックします。

以上でインストールは完了です。

WPFormsでお問い合わせを作る方法

インストールが完了したら、早速お問い合わせフォームを作成していきましょう。

ちあき

ここでは、以下のようなシンプルなお問い合わせフォームを作成していきますね。

お問い合わせフォームは次の順番で作成していきます。

テンプレートを選択する
お問い合わせ画面の編集をする（フィールドの設定）
通知設定をする
確認メッセージの設定（しなくてもOK）
お問い合わせフォームを固定ページに設置する

では早速始めましょう！

テンプレートを選択する

　まず最初にお問い合わせフォームの元となるテンプレートを選択します。

STEP

「WPForms」⇒「新規追加」の順にクリックします。

STEP

フォームに名前を付けるの欄に「お問い合わせ」と入力し、簡単なお問い合わせフォームの「テンプレートを使用」をクリックします。

STEP

選択したテンプレートが表示されます。

お問い合わせ画面の編集をする（フィールドの設定）

「簡単なお問い合わせフォーム」のテンプレートでは、次の3つが設定されています。

名前
メール
コメントまたはメッセージ

このままでも十分なのですが、今回は「コメントまたはメッセージ」を「メッセージ」とだけ表示されるように編集してみます。

STEP

編集したい個所をクリックします。
ここでは、「コメントまたはメッセージ」をクリックします。

STEP

画面左フィールドの設定のラベルを、「メッセージ」と書き換え、「保存」をクリックします。

▼▼▼

STEP

「コメントまたはメッセージ」がら、「メッセージ」と表示が変わります。

テンプレートの画面は自由に編集することができます。

例えば、次のようなことができます。

ドラッグ＆ドロップで場所を入れ替える

追加したいボタンをクリックして、お問い合わせ画面に項目を増やす

いらない項目を削除する

ちあき

編集は後から行うこともできますよ。

通知設定をする

お問い合わせがきたときは、自動で返信されるようになっています。

ちあき

当ブログでは次のようにメッセージが届くように設定しています。

以下の内容でお問い合わせを受け付ました。
同日、または2～5日以内に返信しますので、しばらくお待ちください。

メールを受け付けて、どのくらいで返信がくるのか分かると安心しますよね。

ぜひ設定しておきましょう。

メッセージの設定は次の手順で行います。

STEP

「設定」⇒「通知」の順にクリックします。

STEP

メッセージの欄に好きなテキストを入力します。
このとき、{all_fields} は消さずに {all_fields} の前に入力してください。

STEP

入力後は「保存」をクリックしておきましょう。

確認メッセージの設定（しなくてもOK）

お問い合わせで送信した後に画面に表示される確認メッセージが編集できます。

デフォルトでは以下の内容でメッセージが表示されます。

このままでいいという人は、特に設定を変更する必要はありません。

ちあき

ちなみに、当ブログでは次のように表示されます。

お問い合わせを受け付けました。
返信までしばらくお待ちください。

確認メッセージの設定は次の手順で行います。

STEP

「設定」⇒「確認」の順にクリックします。

STEP

確認メッセージの欄に好きなテキストを入力します。

STEP

入力後は「保存」をクリックしておきましょう。

お問い合わせフォームを固定ページに設置する

設定が完了したので、お問い合わせフォームを固定ページに設置します。

通常、フォームを表示させるには個別に固定ページを作らないといけません。

ですが、WPForms はフォーム用の固定ページを自動生成してくれるので安心です。

固定ページへの設置は次の手順で行います。

STEP

画面右上の「埋め込む」をクリックします。

STEP

「新規ページを作成」をクリックします。

STEP

ページ名に「お問い合わせ」と入力し、すぐ右のボタンをクリックします。
※ここでは「お問い合わせ」としてますが、お好きな名前を入力してください。

STEP

固定ページが自動生成されます。

STEP

画面右のURLをクリックし、パーマリンクを「contact」と変更します。
※ここでは「contact」としてますが、お好きなURLを設定してください。

STEP

最後に「公開」をクリックします。

これでお問い合わせページは完成です。

あとは、URLを好きな箇所に設定しましょう。

やったほうがいいスパム対策｜reCAPTCHAの設定

最後に、スパムメール対策の設定を紹介します。

スパムメールとは

「スパムメール」は、一方的に送り付けられる迷惑メールのこと。

中には、ウイルスが仕込まれていたり、個人情報を盗もうとしたりするなど悪質なものもあるので要注意です！

WPForms では、元々備わっている「reCAPTCHA」の設定をすることで、このスパムメールを防ぐことができます。

「reCAPTCHA」はGoogleが無償で提供しているスパム対策ツールで、使用するにはキーを取得する必要があります。

取得から設定方法まで順番に解説していきます。

「reCAPTCHA」を使用するためのキーを取得する
WPForms で reCAPTCHA の設定をする

ちあき

セキュリティ対策としておすすめなので、必ず設定しておきましょう！

「reCAPTCHA」を使用するためのキーを取得する

まずは、「reCAPTCHA」を使用するためのキーを取得します。

STEP

「reCAPTCHA」のページにアクセスし、「v3 Admin Console」をクリックします。

STEP

画面右上の「＋」ボタンを押します。

STEP

必要項目に入力をします。

ラベル：どのサイトを登録したか分かりやすいようにサイト名を入力するのがおすすめ
reCAPTCHAタイプ：最新のreCAPTCHA v3 にチェックをします
ドメイン：登録したいサイトのドメインを入力します
- 例えば、このサイトなら「chiakimemoblog.com」と入力します
- 「https://」は入力しなくてOK
reCAPTCHA 利用条件に同意するにチェックをします
最後に【送信】をクリックします

STEP

「サイトキー」と「シークレットキー」の取得ができます。