このサイトではSWELLを使用しています。詳しくはこちら

【画像で解説】初心者でも簡単!お問い合わせページの作り方

お問い合わせページの作り方
  • URLをコピーしました!

ブログ作ったばかりだし問い合わせなんてこないだろう。PVが増えてから作ればいいや。

なんて思っていませんか?

実は、お問合せフォームがあることでアドセンスの合格や企業案件の獲得、クローズドASPへの加入などのチャンスに繋がります。

この記事では初心者でも簡単にお問合せフォームを作成する方法について画像と合わせて解説しています。

ブログにお問合せフォームを作りたいと考えている人は必見です。

このサイトの環境
  • レンタルサーバー:ロリポップ
  • テーマ:SWELL
  • 問合せ用のプラグイン:WPForms
目次

お問い合わせフォームは「WPFroms」が簡単

WPFromsが簡単

お問い合わせフォームを作ろうと思った時に以下2つのプラグインが選択肢に上がります

  • Contact Form 7
  • WPForms

両方使いましたが、初心者は「WPForms」がオススメです。

Contact Form 7と比べて圧倒的に簡単で直感的にお問合せフォームを作ることができます。

実際にどんな問い合わせページを作ることができるかは「くろいろブログ お問い合わせページ」で確認してみてください。

WPFormsはコメントの他にチェックボックスなどを細かく設定することができます。

問い合わせ内容が質問なのかお仕事の依頼なのかも分かりやすくなるので便利なプラグインです。

ということでWPFromsの導入からお問い合わせフォームの作成方法について解説します。

1.WPFromsの導入

WPFromsのくま

WPFromsはプラグインからインストールできます。

クマっぽいイラストが特徴のプラグインなのでひと目で分かります。

WPFromsインストール

プラグインをインストールしてから有効化しましょう。

2.お問い合わせフォームの作成

WPFromsを有効化したら「WPFromsへようこそ」の画面へ自動的に移動します。

ようこそ画面の「最初のフォームを作成」かWordPressメニューの「新規作成」からお問い合わせフォームを新規作成しましょう。

WPFromsの新規作成

新規追加を選択するとテンプレートを選択できます。

テンプレートによって入力項目が設定されているので面倒な時はテンプレートから選んでも問題なしです。

「Simple Contact Form」では

  • 名前
  • メールアドレス
  • コメント

の入力欄が設定されています。

面倒な時はこちらでも大丈夫です。

ただし、テンプレートから作成した場合は入力項目が英語になっている所もあるので修正する必要はあります。

今回は「空のフォーム」から作成します。

空のフォームを選択

今回は

  • 名前・・・差出人
  • メールアドレス・・・返信に必要
  • 問い合わせの目的・・・目的が分かりやすくなる
  • 段落テキスト・・・問い合わせ内容を入力

を入力できるページを作成します。

フォームの作成画面では左側の部品をフィールドに入れることで作ることができます。

空のフォーム作成

フィールドに入れただけでは各項目のタイトルや内容が不十分なので設定する必要があります。

各フィールドを選択することで細かい設定ができます。

名前

初期状態では名・性どちらも入れる必要があります。

どちらも入れるのはちょっと抵抗感があるので、ハンドルネームでも問題ない問い合わせフォームにしておくことで一般の訪問者からも問い合わせしやすくなります。

WPFromsの名前欄
メールアドレス

初期状態では「メール」となっているのでメールアドレスに変更しておきましょう。

また、メールは必須にしておくこと

メールアドレスが入力されていない問い合わせが来た場合、その問い合わせに回答することができなくなってしまいます。

WPFromsのメール欄
多項選択式

多項選択式でお問い合わせの目的の選択欄を追加できます。

問い合わせする時に選択してもらうと管理しやすくなります。

いらない場合は設定しなくても大丈夫です。

WPFromsの多項選択式
段落テキスト

問い合わせ内容を書いてもらう項目です。

これが無いと質問も書けないので必ず入れておきましょう。

入力も必須にしておくのがオススメです。

WPFromsのコメント欄

以上で問い合わせの入力画面は完成です。

3.送信時の設定

送信ボタンを押した時の動作を設定できます。

  • 送信ボタンを押した時の動作
  • 送信完了後のメッセージ
  • 通知メールの設定

設定は画面左側の「設定」を選択します

WPFromsの設定

設定では以下3つの内容を設定できます。

  • 一般・・・送信ボタンを押した時の動作
  • 通知・・・実際に送られるメールの設定
  • 確認・・・問い合わせ送信後のメッセージ
一般|送信ボタンを押した時の動作

「一般」ではお問い合わせフォームの説明や送信ボタンを押した時の動作について設定することができます。

こちらは基本的にデフォルト設定で問題ありません。

WPFromsの設定(一般)

ただし、以下2項目については有効にしておきましょう。

  • スパム対策保護を有効化
  • Google v3 reCAPTCHAを有効化

※「Google v3 reCAPTCHAを有効化」の設定方法については後半で解説しています。
Google v3 reCAPTCHAを有効化が表示されていない場合、先にreCAPTCHAの設定を完了させる必要があります。

通知|実際に送られるメールの設定

くろいろブログの通知設定

メールアドレスへ送る{field_id=”1″},{admin_email}
メールの件名くろいろブログ: お問い合わせフォーム
送信者名くろいろブログ
送信元メールアドレス{admin_email}
送信先メールアドレス{field_id=”1″}
メールメッセージ以下お問い合わせを受け付けました。
確認させていただきます。
{all_fields}
WPFromsの通知設定

件名と送信者名はブログに合わせて設定しましょう。

  • {admin_email}・・・WordPressに設定されているメールアドレス
  • {field_id=”1″}・・・問い合わせフォームに入力されたメールアドレス
  • {all_fields}・・・問い合わせフォームに入力されたすべての情報

基本的にデフォルト設定で問題ありませんが、送信先は自分と相手両方に設定しておくのがオススメです。

問い合わせした人にもメールが送られるので、内容を確認できたほうが助かります。

メールメッセージではメール本文に書かれる内容を設定できます。

{all_fields}は問い合わせフォームに入力された情報がすべて表示されます。

テストメールを送ると以下のようなメールが届きます。

テストメール
テストメールの例
確認|問い合わせ送信後のメッセージ

「通知」では送信完了後のメッセージ内容や、送信完了後にページを移動させるかの設定ができます。

基本的にデフォルトでも問題なしです。

WPFromsの通知設定

以上でメールの設定は完了です。

4.お問い合わせページを作成

お問い合わせフォームは完成しましたが、お問い合わせページが無いので作成する必要があります。

お問い合わせページは固定ページから作成します。

固定ページの作成画面からブロック挿入ツール(左上の+マーク)をクリックします。

ブロックの中に「WPFroms」があるので挿入し、プルダウンから作っておいたお問い合わせフォームを選びます。

お問い合わせページの作成

これを選ぶだけでお問い合わせページが完成します。

お問い合わせページ

あとはページのタイトルとパーマリンクを設定後、公開しましょう。

以上でお問い合わせページは完成です。

【スパム対策】reCAPTCHAの設定

WPFromsreCAPTCHA設定

WPFromsではスパムメール対策のreCAPTCHAがデフォルトで使うことができます。

これを設定しておくことでスパムメールが届きづらくなるので設定しておきましょう。

reCAPTCHAは意外とすごく、設定するとスパムメールがほぼ届かなくなります。

1.reCAPTCHAのキーを入力

reCAPTCHAの設定はWPFroms内の「設定」から利用できます。

WPFromsのreCAPTHCA設定
サイトキーの再確認

reCAPTCHAのアカウントはあるけどキーが分からない場合はreCAPTCHAの設定画面から再確認できます。

reCAPTCHAキーの再確認

reCAPTCHAで確認したサイトキーとシークレットキーを入力後「設定を保存」します。

reCAPTCHA(サイトキー・シークレットキー)の取得方法についてはこちらで解説しています。

2.reCAPTCHAの有効化

サイトキー・シークレットキーを入力しただけでは、問い合わせフォームで有効化されていません。

忘れず有効化する必要があります。

作成していたお問い合わせフォームを開く

reCAPTCHAの有効化はWPFromsの「すべてのフォーム」-作成した「お問い合わせフォーム」を開きます。

WPFromsのreCAPTCHA設定
reCAPTCHAを有効化

「設定」-「一般」から「Google v3 reCAPTCHAを有効化」にチェックを入れます。

WPFromsのreCAPTCHAの有効化

チェックを入れた後は保存して完了です。

グローバルナビにお問い合わせリンクを追加

問い合わせページへのリンクをグローバルナビに追加する方法について解説します。

※「くろいろブログ」のトップページと同じ様な場所に表示されます。

「外観」から「メニュー」を開きます。

新しいメニューを作成しましょう。」からグローバルナビ用に新規作成します。

  1. 新しいメニューを作成
  2. メニュー名・・・分かりやすいように「グローバルナビ」
  3. メニュー設定・・・グローバルナビにチェック
  4. メニュを作成

※すでにグローバルナビ用のメニューがある場合は「編集するメニューを選択」から選択しましょう。

グローバルナビに問い合わせページ設定

「メニューを作成」すると各ページをメニュー項目に追加できるようになります。

グローバルナビにページを追加

グローバルナビに入れたいページにチェックを入れて「メニューを追加」することでグローバルナビに表示できます。

メニューが追加されたことを確認して「メニューを保存」することでグローバルナビに表示されます。

ここでは問い合わせページ以外にも、カテゴリーや好きなページを表示させることができます。
サイトのコンテンツに合わせて設定しましょう。

問合せメールが届くか確認

問い合わせページが完成したら必ずメールが届くか確認しましょう

以前、設定が間違っていてメールが届いていなかった!といったことが発生したことがあります。

送信時の設定で送信先メールアドレスの「,」が抜けてしまっていました。

正:{field_id=”1″},{admin_email}

誤:{field_id=”1″}{admin_email}

設定が間違っているとメールが届かないのでずっと気付かないままになってしまいます。

もしも質問や企業から連絡が来ていた場合は折角のチャンスを無くしてしまうので問題が無いか確認しておきましょう。

確認する時は実際に使えるメールアドレスを入力して確認するのがオススメです。

実際に問い合わせをした人への確認メールが届くかも合わせて確認することができます。

まとめ

アドセンス合格や企業、読者からの問い合わせのために必ず作っておいたほうが良いお問い合わせページの作成方法について解説しました。

問い合わせページ作成の流れ
  1. WPFromsで問い合わせフォームを作る
  2. 固定ページで問い合わせページを作る
  3. reCAPTCHAの設定・有効化
  4. グローバルナビにリンクを設定
  5. メールが届くか送信確認

WPFromsを使うことで、お問い合わせフォームの作成からスパム対策のreCAPTCHA設定まで簡単に設定することができます。

PVが少ない時期でも企業からの問い合わせが意外と来るので忘れずに設定しておきましょう。

最後までご覧いただきありがとうございました。

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