コーポレートサイトなど、企業のサイトにはお問い合わせページは必須になってきますよね？お問い合わせページがなくては意味がないという企業もたくさんあることでしょう。
お問い合わせページはあれば十分と考えている人も多いようですが、よく考えてみれば、お問い合わせをしたくてそのページをみてくれているのに、そこで入力が複雑であったりとか、大した説明書きなしで設置されていては何をどうお問い合わせすれば良いのか読者は迷ってしまうことにつながります。
この記事ではwordpressのサイトにお問い合わせを設置する方法とさらにどのようなお問い合わせページを作ることが良いのかについて詳しく解説していきます。
お問い合わせページの意味とは
まずそもそもお問い合わせページの意味についてお話ししておきます。
お問い合わせは基本的には必要だと思っている方は多いかもしれませんが、なんのために必要なのかまでを深く考えている人は少ないのではないでしょうか。
お問い合わせページを設置する意味としては以下のようなものがあります。
- 問い合わせ
- アンケート
- 資料請求
- 予約
- 購入情報
問い合わせ
最も一般的なものがお問い合わせをもらうという漠然とした理解ではないでしょうか。仕事の依頼についてのお問い合わせやその際の不明点を書いてもらうということが一般的だと思います。
よくあるお問い合わせだと名前と連絡先とお問い合わせ内容というケースが多いと思います。
しかしお問い合わせ内容だけを設置する場合は、ユーザーが意図した内容が漠然としたことになり、返信に困るケースもあるでしょう。
お問い合わせを設置する側のサイトがどのようなお問い合わせが欲しいのか、仕事につながるお問い合わせをする人はどのようなフォームであれば、入力しやすいのかなどを考える必要があります。
アンケート
２つ目にアンケートです。単なるお問い合わせといっても、どの記事に関心を抱いて問い合わせをしてくれたのか、どのようにあなたのサイトを知ってくれたかなどを記入してもらうことでユーザーのニーズを把握することができます。
資料請求
企業のホームページであれば、資料請求フォームを設置したいと考えている人も多いでしょう。
資料を送るために住所や電話番号など必要な要素を記入してもらわないといけないので、名前とメールアドレスとお問い合わせ内容だけではダメですよね。
また複数資料がある場合にはどの資料を請求したいのかなど選択をしてもらった方がいいケースもあることでしょう。
このように単なるお問い合わせとはフォームの内容が変わってくることが多いです。
予約
店舗や無料相談など、対面でビジネスを行なっている方は予約もできるようにしたいということもあるでしょう。
日にちや時間帯などまで入力してもらうのかの検討も必要になってきます。
自社でも飲食店を運営していますが、やはりお問い合わせフォームから予約の依頼が来ることもあります。
購入情報
あなたのサイトで商品購入できるのであれば、購入用のお問い合わせフォームが必要になってくることもあるかと思います。
決済手段や連絡先、商品ごとにフォームを作るのか、一つのお問い合わせフォームから選択してもらうかなど方法は色々存在するでしょう。
このようにお問い合わせフォームはそれぞれどんな意味をなして設置するかによって、変わってくるということを頭に入れておきましょう。
ここでは一般的なお問い合わせを対象として解説していきますが、操作方法を覚えたらあなたのサイトに最適なフォームにすることをおすすめします。
お問い合わせフォームを設置する
それでは実際にお問い合わせフォームを設置していきます。
お問い合わせフォームを全てオリジナルで作ろうとするとプログラミングの知識やウェブまわりの知識が多く必要となってくるため、プラグインを使って設置する方法を紹介します。
設置する手順としては以下になります。
- プラグインをインストールする
- プラグインの設定をする
- 固定ページに設置する
このような流れで解説していきます。
プラグインの紹介
今回紹介するプラグインは「Contact Form 7」です。
これはお問い合わせページを作成するためのプラグインになります。多くのサイトで問い合わせページを作るときにこれを使うと思います。
そのくらい有名かつ人気のプラグインです。
プラグインのインストール／有効化
それではプラグインをインストールしていきます。
wordpressの管理画面から「プラグイン」→「新規追加」と進んで「Contact Form 7」と検索し、「インストール」をクリック後「有効化」してください。
有効化が終わるとあなたのwordpressサイトの管理画面に「お問い合わせ」という欄が増えているはずです。
contact form7の設定はこちらから行なっていきます。
それでは管理画面から「お問い合わせ」をクリックしてください。
少し下にスクロールするとすでに一つお問い合わせフォームが出来上がっています。
今回はデフォルトで入っているフォームを元に解説していきます。
Contact Form 7の設定
それでは実際に設定を行なっていきます。
まずはデフォルトで入っているお問い合わせフォームをクリックしてください。
すると以下のような画面になると思います。
それでは順番に設定していきます。
フォームの設定
フォームはデフォルトでは以下のものになっています。wordpressのテーマ等で多少デザインが変わる場合もありますが、基本的なフォーム等はこのようになっています。
フォームの内容を削除したい場合は任意の部分を消すだけです。例えば、「題名」というフォームは必要でない人も多いかと思います。
その場合は以下の部分を消します。
一つのフォームが<label>から</label>までだと思ってもらえればわかりやすいと思います。
次に追加する方法を解説していきます。今回は『テキスト』というフォームを使って住所の入力欄を設置する方法をご紹介します。
まずはテキストです。今回はテキストに住所を入力してもらうと仮定して進めます。
メールアドレスの<label>から</label>までをコピーしてメールアドレスの下にペーストします。
その後[email* your-email]の部分を消します。この部分があったところでフォームの上段にあるテキストをクリックします。
すると以下のような画面になるので、順番に解説していきます。
今回操作するのは赤枠の部分です。
上から順番に解説します。
項目タイプ：ここでは入力を必須にするかを選択します。必須にして欲しい場合はチェックを入れましょう。
名前：デフォルトのままで大丈夫です。
デフォルト値：今回は住所なので、ユーザーが分かりやすいように画像のように入力しました。するとフォームに入力する前から入力した文字列が入っています。さらに下の『このテキストを項目のプレースホルダーとして使用する』にチェックすると、表示される文字が薄くなり、「このように書いてね」という案内の役目を果たします。
Akismet：これはAkismetというプラグインを使っている方は表示されます。今回は気にしなくて大丈夫です。
ID属性：スタイル等をいじるときに使います。今回はデフォルトの空欄のままでいいです。
クラス属性：スタイル等をいじるときに使います。今回はデフォルトの空欄のままでいいです。
このように設定したら、右下の『タグを挿入』ボタンをクリックします。
最後にフォームの入力欄の『メールアドレス（必須）』を今回は『住所』と変更して完成です。完成系のフォーム入力欄は以下のようになっています。赤枠の部分が今回新たに挿入したものになります。
まだサイトに設置していないので完成系が確認できませんが、最後に設置した後の表示画面は以下のようになっているはずです。
これで新たなフォームを追加することができましたね。
メールの設定
次はメールの設定を行なっていきます。
メールのタブを選択してください。
ここでは実際にお問い合わせがあった際にメールであなたのメールアドレスに通知が届く設定にするのですが、そのときにどのようなメールの内容にするのかを設定していきます。
まずは送信先にあなたのメールアドレスを入力してください。
ここに入力したアドレスに対して、あなたのサイトからお問い合わせがあった時に入力したアドレスに通知してくれるようになります。
送信元はあなたのサイトのwordpressアドレスが入力されていると思うので、そのままでいいです。
題名、追加ヘッダー、メッセージ本文もそのままでいいでしょう。
一応説明を加えておきます。
題名：題名の入力欄を作っている場合はデフォルトの状態のままでいいです。ユーザーが記入した文言が表示されます。それ以外の場合では『（サイトのタイトル）からのお問い合わせ』などと入力しておくと通知が来たときにわかりやすくなるでしょう。
追加ヘッダー：ここは特段機にする必要はないので、デフォルトのままでOKです。
メッセージ本文：これは実際にユーザーが問い合わせ内容の部分に書いた文言などを表示することが多いです。
どのフォームもそうですが、ショートコードと呼ばれる[〇〇]のようなものがありますね。これはcontact form7がすでに用意してくれているテンプレートのようなものになります。これらを使うことで簡単にメール設定もすることができるようになっています。ではどのようにメール設定を自分流にカスタマイズするかということをここで少し解説しておきます。
もう一度タブで『フォーム』に戻ってもらって見てもらえると赤枠の部分がショートコードになります。
これをメール設定の部分でもそのままコピーしてペーストするとその内容が表示されることになります。
先程のメッセージ本文に『題名』を消して『住所』を追加してみました。
このようにあなた好みにカスタマイズすることができます。
これでメール設定は完了です。
メッセージ本文より下の項目もありますが、最初のうちは使うことがないと思いますので、今はデフォルトのままいじる必要がありません。
メッセージの設定
次はメッセージの設定をやっていきましょう。
メッセージの設定はお問い合わせをする際にいろんな部分で定型分が表示されます。
ご覧のようにメッセージが正常に送信された場合や失敗した場合などなんてメッセージを表示するかというものを設定する項目です。
ここでは基本的にデフォルトのままいい感じに設定されているので。問題ないかと思います。
そのまま進めていきましょう。
その他の設定
最後にその他の設定です。ここでは独自のお問い合わせフォームを作る際に使うことができる部分です。
しかし、プログラムを知っている人でないと使いこなすことができないので、基本的には使わない人が多いでしょう。
ここもいじらずデフォルトのままでいいと思います。
最後に左下の『保存』を押して設定は完了です。
固定ページにお問い合わせフォームを設置する
さてここまででcontact form7の設定は終了しました。
次はいよいよここまで設定してきたお問い合わせフォームを設置する段階です。
お問い合わせフォームは基本的に固定ページで作成するようにしましょう。
実は設置することはとても簡単です。
wordpress管理画面から『お問い合わせ』をクリックしてください。
少し下にスクロールすると以下のような画面が見えると思います。
赤枠の部分を確認してください。これはショートコードと言って、赤枠の部分をコピー＆ペーストするだけでお問い合わせフォームが挿入される仕組みです。
固定ページに実装してみましょう。
wordpressの管理画面から『固定ページ』→『新規追加』と進みましょう。
タイトルは『お問い合わせフォーム』ということにしましょうか。
こんな感じですね。
それではここに先程のショートコードを貼り付けていきます。
貼り付けると私が使っているテーマでは画像のように表示されます。
プレビューを見て見ましょう。
このように完成系が表示されれば設置完了です。
もし先程の固定ページ編集画面にショートコードを入力してもダメな場合は左上から右下のプラスボタンから進んで『ショートコード』というブロックが見つかると思います。
それを選択して、ショートコードのブロックの中にコピーしたショートコードを貼ってみてください。
その方法であれば大抵のテーマでも実装することができるようになっているのではないかと思います。
しっかりとプレビュー画面で表示を確認することができたら公開ボタンを押して、公開しましょう。
パーマリンクは任意のものでいいのですが、『contact』なんかを指定しておくいいですね。
スパム対策をする
さて、ここまででお問い合わせフォームの設置が完了しました。
しかしお問い合わせというのはコメント機能同様、外部の人間がメッセージを送れる機能ですよね。するとスパムなんかもきてしまうようになるので、対策をしておきましょう。
スパムっていうのは、ロボットとかAIによる自動送信みたいなもので、必要のないお問い合わせまで受け取ってしまうことになります。
なので、それを防止する施策が必要になります。
今回は『google reCAPTCHA』というものを使って簡単にスパム対策をすることができる方法をご紹介します。
まずはwordpress管理画面から『お問い合わせ』→『インテグレーション』と進みます。
すると以下の画面になるので、『インテグレーションのセットアップ』をクリックします。
するとサイトキーとシークレットキーを入力する画面が出てくるので、そこにGoogle reCAPTCHAのキーを入力していきます。
それでは検索の別タブで、『google reCAPTCHA』を調べましょう。
そこで下の画面の赤枠の部分をクリックします。
すると以下のような画面になります。
もしかしたら初めて利用する方は多少画面が違うように見えるかもしれませんが、やることは同じですので、安心してください。
右上のプラスボタンからあるいは初めての方だと歯車マークを押します。
その後、サイトを追加などの文字が出てきたらクリックして新しいサイトを追加していきます。
次のものを入力していきます。
ラベル：サイト名を入力しておきましょう
reCAPTCHAタイプ：こちらはv３の方を選択しておいてください。
ドメイン：あなたのサイトのドメインを入力します。
reCAPTCHA 利用条件に同意するにチェックを入れてください。
最後に『送信』ボタンを押します。
すると『サイトキー』と『シークレットキー』が表示されますので、それをコピーして、先程のwordpressの管理画面のお問い合わせ→インテグレーションの部分に貼り付けていきます。
そしたら最後に『変更を保存』をクリックして完成です。
これでスパム対策をすることができました。
お問い合わせフォームのリンクを追加
それでは実際にお問い合わせページを作ることができたので、それのリンクを貼っていきましょう。
ナビゲーションメニューに追加する
ナビゲーションに追加する方法はこちらで詳しく解説しています。
ウィジェットに追加する
ウィジェットの追加方法はこちらで詳しく解説しています。
wordpressウィジェットの使い方【追加から編集まで詳しく解説】
wordpressの完全ガイドを公開しています
wordpressの始め方から、運用の仕方までまとめてある完全ガイドの記事はこちら↓から確認できます。