日替わりで毎日お得!Amazonタイムセール ▶CHECK!

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

  • URLをコピーしました!

本記事ではアフィリエイト広告を利用しています。

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

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

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

 

この記事で分かること
  • 「WPForms」プラグインで簡単にお問い合わせフォームを作る方法
    • WPFormsをインストールする方法
    • WPFormsでお問い合わせフォームの作り方
    • reCAPTCHAの設定方法(スパム対策)

 

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

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

目次

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

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

 

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

STEP
「プラグイン」⇒「新規追加」の順にクリックします。
「プラグイン」⇒「新規追加」の順にクリック
STEP
➀キーワードの欄に「WPForms」と入力
②表示された「Contact Form byWPForms– WordPress 用のドラッグ & ドロップフォームビルダー」の「今すぐインストール」をクリックします。
プラグインインストール画面の画像
STEP
インストールが完了したら、「有効化」をクリックします。
プラグイン有効化の画像

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

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

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

ちあき

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

お問い合わせフォームの画像

 

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

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

では早速始めましょう!

テンプレートを選択する

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

 

STEP
「WPForms」⇒「新規追加」の順にクリックします。
「WPForms」⇒「新規追加」の順にクリックの画像
STEP
フォームに名前を付けるの欄に「お問い合わせ」と入力し、簡単なお問い合わせフォームの「テンプレートを使用」をクリックします。
WPFormsテンプレート選択画像
STEP
選択したテンプレートが表示されます。
WPFormsテンプレート表示画像

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

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

WPFormsフィールドの設定画面1
  • 名前
  • メール
  • コメントまたはメッセージ

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

 

STEP
編集したい個所をクリックします。
ここでは、「コメントまたはメッセージ」をクリックします。
WPFormsフィールドの設定画面2
STEP
画面左フィールドの設定のラベルを、「メッセージ」と書き換え、「保存」をクリックします。
WPFormsフィールドの設定画面3

▼▼▼

WPFormsフィールドの設定画面4
STEP
「コメントまたはメッセージ」がら、「メッセージ」と表示が変わります。
WPFormsフィールドの設定画面5

 

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

 

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

  • ドラッグ&ドロップで場所を入れ替える
WPFormsフィールドの設定画面6
  • 追加したいボタンをクリックして、お問い合わせ画面に項目を増やす
WPFormsフィールドの設定画面7
  • いらない項目を削除する
WPFormsフィールドの設定画面8
ちあき

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

通知設定をする

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

ちあき

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

お問い合わせフォーム通知画面

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

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

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

 

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

STEP
「設定」⇒「通知」の順にクリックします。
WPForms通知設定画面1
STEP
メッセージの欄に好きなテキストを入力します。
このとき、{all_fields} は消さずに {all_fields} の前に入力してください。
WPForms通知設定画面2
STEP
入力後は「保存」をクリックしておきましょう。
WPForms保存ボタン画像

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

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

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

WPForms確認メッセージ編集画面1

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

 

ちあき

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

お問い合わせフォーム確認メッセージ画像

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

 

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

STEP
「設定」⇒「確認」の順にクリックします。
WPForms確認メッセージ設定画面
STEP
確認メッセージの欄に好きなテキストを入力します。
WPForms確認メッセージ編集画面2
STEP
入力後は「保存」をクリックしておきましょう。
WPForms保存ボタン画像

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

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

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

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

 

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

STEP
画面右上の「埋め込む」をクリックします。
WPForms埋め込み説明画像1
STEP
「新規ページを作成」をクリックします。
WPForms埋め込み説明画像2
STEP
ページ名に「お問い合わせ」と入力し、すぐ右のボタンをクリックします。
※ここでは「お問い合わせ」としてますが、お好きな名前を入力してください。
WPForms埋め込み説明画像3
STEP
固定ページが自動生成されます。
お問い合わせ固定ページ画像1
STEP
画面右のURLをクリックし、パーマリンクを「contact」と変更します。
※ここでは「contact」としてますが、お好きなURLを設定してください。
お問い合わせ固定ページ画像2
STEP
最後に「公開」をクリックします。
お問い合わせ固定ページ画像3

 

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

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

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

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

スパムメールとは

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

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

 

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

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

 

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

  1. 「reCAPTCHA」を使用するためのキーを取得する
  2. WPForms で reCAPTCHA の設定をする
ちあき

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

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

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

 

STEP
reCAPTCHA」のページにアクセスし、「v3 Admin Console」をクリックします。
reCAPTCHAページ画像1
STEP
画面右上の「+」ボタンを押します。
reCAPTCHAページ画像2
STEP
必要項目に入力をします。
reCAPTCHAページ画像3
  1. ラベル:どのサイトを登録したか分かりやすいようにサイト名を入力するのがおすすめ
  2. reCAPTCHAタイプ:最新のreCAPTCHA v3 にチェックをします
  3. ドメイン:登録したいサイトのドメインを入力します
    • 例えば、このサイトなら「chiakimemoblog.com」と入力します
    • 「https://」は入力しなくてOK
  4. reCAPTCHA 利用条件に同意するにチェックをします
  5. 最後に【送信】をクリックします
STEP
「サイトキー」と「シークレットキー」の取得ができます。
reCAPTCHAページ画像4
ちあき

この2つのキーは、続けて行う WPFormsの設定で使用します。

 

WPForms で reCAPTCHA の設定をする

先ほど取得した2つのキーを使って、WPFormsの方の設定をしていきます。

 

STEP
WordPressの画面から、「WPForms」⇒ 「設定」⇒ 「CAPTCHA」の順にクリックし、「reCAPTCHA」を選択します。
WPForms で reCAPTCHA の設定をする画像1
STEP
必要個所の設定をします。
WPForms で reCAPTCHA の設定をする画像2
  1. タイプ:reCAPTCHA v3 を選択します
  2. サイトキー:reCAPTCHAページで取得したサイトキーをコピペします
  3. シークレットキー:reCAPTCHAページで取得したシークレットキーをコピペします
  4. 最後に【設定を保存】をクリックします
STEP
「WPForms」⇒ 「お問い合わせ」の順にクリックし、 WPForms編集画面を開きます。
WPForms で reCAPTCHA の設定確認画像1
STEP
「reCAPTCHA」をクリックし、画面右上に reCAPTCHA有効 のボタンが表示されればOKです。
「保存」⇒「×」で編集画面を閉じてください。
WPForms で reCAPTCHA の設定確認画像2
STEP
確認のために、「プレビュー」をクリックしてみましょう。
WPForms で reCAPTCHA の設定確認画像3
STEP
画面の右下に reCAPTCHA のボタンが表示されていれば設定終了です!
WPForms で reCAPTCHA の設定確認画像4
ちあき

以上でセキュリティ対策OK!
安心してお問い合わせフォームを利用できますね。

初心者でも安心!WPFormsプラグインでお問い合わせを設置しよう

「WPForms」というプラグインでのお問合せフォーム設置方法を紹介してきました。

直観的に操作ができて初心者向き、そしてセキュリティ対策もできるのでおすすめです。

ブログを続けているうちに、読者だけでなく企業などからも連絡がくるようになるかもしれません。

絶対に必要なお問い合わせフォーム、ぜひ記事を参考に設置してみてくださいね。

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

よかったらシェアしてね!
  • URLをコピーしました!
目次