この記事では、Contact Form 7（コンタクトフォームセブン）というプラグインを使って、お問い合わせフォームを作成する方法をご紹介いたします。
初心者の方に向けて画像多めで、丁寧に解説しています。手順通りに進めていただくだけで、簡単に設置することができますよ。
手順1：お問い合わせフォームの作成手順
まずはプラグインをインストールして、お問い合わせフォームを作成します。
・左のメニューの『プラグイン』をクリック。
・『新規プラグインを追加』をクリック。
・プラグインページの検索ボックスで「Contact Form 7」と検索。
・『今すぐインストール』をクリック。
・『有効化』をクリック。
・有効化を押すとプラグインの画面に移動するので、Contact Form 7の『設定』をクリック。
・Contact Form 7の設定画面に移動しますので『新規追加』をクリック。
ここから新しいフォームを作成します。
・赤枠の箇所にページのタイトルを入力しましょう。
特に決まってない方は「お問い合わせフォーム」と入力。
・『保存』をクリック。
・そうすると、青い箇所にショートコードが表示されます。
これは、フォームを表示させるためのコードなので、後でページに設置します。
パソコンのメモなどにコピーしておきましょう。
ショートコードって？
お問い合わせフォームに必要な名前やメールアドレスなどの項目を簡単に設置できる、短いコードのこと。HTMLの知識がなくても、手軽に問い合わせフォームを作れます。
ショートコードはコピーし忘れても、後で何度でも確認できます。
また [ contact-form から、“お問い合わせフォーム” ] までがショートコードです。前後のカッコも必要なので一緒にコピーしましょう。
手順2：お問い合わせページの作成手順
手順1で作成したお問い合わせフォームを、新しく作成するお問い合わせページに設置しましょう。
・左のメニューの『固定ページ』をクリック。
・『新規固定ページを追加』をクリック。
・ページタイトルを入力しましょう。特に決まっていない人は、『お問い合わせフォーム』と入力。
・そしてプラスマークのアイコンから、『ショートコード』というツールをクリックします。
『ショートコード』ツールとは？
ショートコードをページに表示させるための専用ツールです。ページにそのまま貼り付けても表示されないので、このツールを使うことで設置できるようになります。
プラスマークのアイコンを押したあと、検索ボックスに「ショートコード」と入力すると、ツールが出てきます。
・手順1でフォームを作った時に表示されたショートコードを、この入力ボックスに貼り付けます。
これでページへのフォーム設置が完了しました。
・あとは、右上の『公開』を押せばページが公開されます。
公開後のページ確認
公開をしたあとは、必ず公開したページを確認しましょう！
ユーザー目線になって、ページに問題が無いか、使いやすいかを確認します。
パソコンでの見え方とスマートフォンでの見え方を、それぞれ確認するのがおすすめです。
公開したページを確認すると、先程設定したページタイトルとショートコードが問題なく表示されていました。
お問い合わせフォームのように、ユーザーに入力操作してもらうものを設置した場合は、必ず確認のために自分でもお問い合わせをしてみましょう。
サイトに訪問したユーザーの気持ちを想像しながら、実際に項目を入力することで、「この項目はいらないのでは？」「あとはこの項目が必要かも」という気づきを得られる場合があります。
手順3：ページの導線設置
手順2でお問い合わせページの作成は完了しましたね！
今のままではこのページにアクセスするリンクが無く、ユーザーがこのページにたどり着けないので、サイトにリンクを設置しましょう。
今回はフッターに設置する方法をご紹介します。
ここでメニューを作成します。
・左のメニューの『外観』をクリック。
・メニュー名のところに「フッター」と入力しましょう。
・そしてフッターメニューにチェックを入れます。
・『メニューを作成』をクリックします。
作成したフッターメニューに表示させるページを選択します。
・『問い合わせフォーム』をチェック
・『メニューに追加』をクリック
・そうすると選択したお問い合わせフォームが右側に追加されます。
フッターに表示させたい表記を赤枠の部分に入力しましょう。
（フッターに英語で表示させたい場合は、ここに「Contact」のように入力します。）
・『メニューを保存』をクリック。
・これでフッターに問い合わせフォームが表示されました。
※見た目のデザインは、使用スキンによって異なります。
リンクを設置したあとは、実際にリンクをクリックしてみて、問題なくページに移動できるか確認しましょう！
フォームの詳細設定
手順1〜手順3では最低限の設定で、お問い合わせフォームが設置されました。
ここでは詳細設定をご説明いたします。
まずは『メール』設定
ここでは、ユーザーからきた問い合わせが、自分に通知される内容の設定です。
・左メニュー『お問い合わせ』をクリック
・手順1で作成したお問い合わせフォームをクリックします。
A 送信先：ユーザーから届いたメールが届く先です。
site admin emailとは、サイト管理者のメールアドレスのことです。
ユーザーから問い合わせがあれば、ワードプレスに設定されているメールアドレス宛に届きます。
管理者のアドレスとは別のアドレス宛に通知を送りたい場合は、Aの欄に通知を届けたいメールアドレスを記入します。
サイト管理者メールアドレスの確認方法
管理者メールアドレスを確認したい・変更したい場合は、管理画面左メニューの『ユーザー』から確認します。そして管理者名をクリックすると、『連絡先情報』の『メール (必須)』がありますので、そこから確認・変更ができます。
B 送信元：通知メールが送信される元のアドレスですので、このアドレスは変更せずにそのままにしておきましょう。
C 題名：自分に通知メールが届くときのメールタイトルです。
自分自身でわかりやすいようなタイトルに変更しても大丈夫です。
D メッセージ本文：自分に届く通知メールの本文です。
こちらは、実際に問い合わせフォームから問い合わせがあった際に、自分のアドレス宛に届いた通知メールです。
先程の『C題名』と『Dメッセージ本文』が、このような感じでメールに記載されます。
次は『メッセージ』設定
ここでは、ユーザーがお問い合わせフォームに入力後、『送信』ボタンを押した際にでるメッセージの設定です。
・『メッセージ』をクリック。
・Eメッセージが正常に送信された：ユーザーが送信ボタンを押した際、特に問題なくお問い合わせが完了した際に表示されるメッセージです。
実際の画面でみるとこんな感じ。こちらにメッセージが表示されます。
メッセージのページでは、ここに表示メッセージを自由に変えることができます。
ユーザーの使いやすさを考え満足度を上げるには、以下のようなメッセージに変更するのもおすすめです。
メッセージが正常に送信された場合：
お問い合わせありがとうございます。お送りいただいたメッセージは、原則24時間以内に返信致しますので、今しばらくお待ちください。24時間経っても返信が無い場合は、大変お手数ですが、XXX@address.com（メールアドレス）宛にお問い合わせいただけますと幸いです。
メッセージの送信に失敗した場合：
申し訳ございません。メッセージの送信に失敗しました。一部の項目に誤りがある可能性があるか、インターネット回線の接続状態が悪い場合も送信できないことがあります。時間を置いてから再度お試しください。それでも送信できない場合は、090-XXXX-XXXX（電話番号）までご連絡いただけますと幸いです。
入力必須の項目が入力されていない場合：
入力必須項目のご入力をお願いします。お問い合わせの内容に、よりスムーズに回答させていただくために、必須項目を設けさせていただいております。お手数ですが情報の入力後、再度送信ボタンを押してください。
最後に
Contact Form 7を使えば、htmlの知識が無くても、誰でも簡単にプロフェッショナルな問い合わせフォームを作成できます。
この記事を参考に、ぜひあなたのウェブサイトにも問い合わせフォームを設置してみてください。読者からの問い合わせが増えると、より多くのユーザーとのコミュニケーションが円滑になるかもしれません。
コメント