【4月19日9:00-22日23:59まで】AmazonスマイルSALE>>CHECK!

【WPFormsの設定】WordPressブログにお問い合わせフォームを作る方法

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

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

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

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

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

 

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

▼▼▼

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

 

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

 

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

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

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

通知設定をする

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

ちあき

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

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

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

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

 

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

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

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

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

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

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

 

ちあき

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

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

 

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

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

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

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

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

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

 

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

STEP
画面右上の「埋め込む」をクリックします。
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をコピーしました!
目次