ホームページ作成を成果につなげるのであれば、お問い合わせ項目の設定は必須と言い得ます。
自分でお問い合わせフォームを作るのは、HTMLやCSS、PHPの知識が必要になるため、簡単には作ることができず、ハードルが非常に高くなります。また業者に依頼するにしても予算が意外とかかったりするんですよね。
こうした拡張機能を追加する時に役立つのがプラグイン。WordPressを使うメリットとして拡張機能であるプラグインが充実していることなので、基本的にはプラグインを使って設定していきます。
さくっとお問い合わせフォームを作成できるプラグイン「Contact Form 7」がオススメです。
今回の記事では、お問い合わせフォームを作ることができる定番プラグイン「Contact Form 7」について解説していきます。
この記事を最後まで読むことで、「Contact Form 7」を使用したお問い合わせフォームの作成方法、カスタマイズについて理解することができますので、参考にしてくださいね。
プラグインで「Contact Form 7」をカスタマイズする際の注意点として、ローカル環境で試してから本番環境に反映させましょう。最初は思い通りに設定できないかもしれないので、完璧に設定できることを確認してから本番環境に入れます。
こちらの記事でローカル環境の作り方について詳しく説明していますので、参考にしてくださいね。→【初心者向け】WordPressのローカル環境を簡単に構築する方法について
Contact Form 7を使うメリット
なぜ「Contact Form7」が、お問い合わせフォームを作成する際の定番プラグインと言われているのか、このプラグインを採用するメリットとして２つ挙げられます。
・ユーザー数が多いため、不明点があっても情報がすぐ集められる
・導入、カスタマイズが簡単にできる
ホームページ運営を成功させるために大切なのは、運営を効率化させることです。そのため、設定に専門的な知識が必要であったり時間をかけるのは時間ロスが多くなります。
思い通りのフォームを作成するための情報に簡単にアクセスできる、操作が簡単であることがこのプラグインを使用する大きなメリットと言えるでしょう。
Contact Form 7のインストール手順と設定方法
プラグイン検索画面で「Contact Form 7」と検索し、インストール。その後有効化で完了です。
プラグインのインストール・削除・更新のような基本操作に関しては、こちらの記事で解説しています。「【簡単】WordPressのプラグインの基本操作(インストール・更新・削除の方法)」
以上がインストール方法になります。
「Contact」→「Contact Forms」を選択すると、デフォルトで追加されているコンタクトフォームが確認できます。こちらをページ挿入して完了です。
具体的な設定方法や固定ページ、ナビゲーションバーへの設定方法について詳しく別記事で解説していますので、こちらをご確認ください。「【簡単】WordPressで固定ページを使って問い合わせページを作る方法」
Contact Form 7のカスタマイズ方法
問い合わせページのフォームを変更する場合、Formタブを設定していきます。
今回は画像のようなお問い合わせフォームを作成しました。この問い合わせフォームをどのように作っていくのか、完成形のお問い合わせフォームに沿ってご紹介していきます。
各項目と使用したFormについて表でまとめましたので、こちらに沿ってご説明していきますね。
| No. | 項目 | Form |
| 1 | お名前 | text |
| 2 | アドレス | |
| 3 | 問い合わせ内容 | drop-down menu |
| 4 | 当ブログを知った経緯 | checkboxes |
| 5 | ファイルの送付 | file |
| 6 | 本文 | textarea |
| 7 | 送信 | submit |
基本操作として、覚えておいて欲しいのが、tagはlabelタグ内に入れると言うことです。
このように<label> [項目ごとtag] </label>のなかにtagを挿入する形で変更していきます。
Required field：必須項目
default value：初期で記載する文字
Use this text as the placeholder of the field：初期入力として使用する
と言う意味になりますので、必要に応じて設定してくださいね。
・テキスト項目の設定
1. texタグを選択し、必要項目にチェックしたらinsert Tagをクリックします。
2. <label> お名前 [text* text-157 placeholder “田中 太郎”] </label>と入力されたら完了です。
・アドレス入力欄の設定
1. e-mailタグを選択し、必要項目にチェックしたらinsert Tagをクリックします。
2. <label> アドレス [email* email-579] </label>入力されたら完了です。
・ドロップダウンの設定
1. drop-down menuを選択し、設定したい選択肢を入力します。設定できたらinsert tagをクリックします。
2. <label> 問い合わせ内容 [select* menu-660 “英語の勉強方法について” “講演・セミナーについて” “取材について” “その他”]</label>と入力されれば、完了です。
・チェックボックスの設定
1.checkboxesを選択し、設定したい選択肢を入力します。設定できたらinsert tagをクリックします。
2. <label> 当ブログを知った経緯[checkbox checkbox-829 label_first use_label_element “検索” “インスタグラム” “Twitter” “セミナー” “その他”]</label>と入力されたら完了です。
・ファイルのアップロードの設定
1.fileを選択し、設定できたらinsert tagをクリックします。
2. <label> ファイルの送付 [file file-553 limit:2B]</label>と入力されたら完了です。
・テキストエリアの設定
1.textareaを選択し、設定できたらinsert tagをクリックします。
2. <label> 本文 [textarea your-message] </label>と入力されたら完了です。
・送信ボタンの設定
1.submitを選択し、設定できたらinsert tagをクリックします。
2. <label> 本文 [submit “送信ボタン”]と入力されたら完了です。
以上、Formタグの使用方法について解説しました。少しややこしい部分もあるかと思いますが、どんどん使って慣れていきましょうね。
Contact Form 7で自動メールの設定
読者が問い合わせを送付した後、自動返信でお礼メールを送付することができます。設定するタグは、Mailタグになりますので、こちらを選択して設定していきます。
下の方にスクロールすると、Use Mail(2)があるので、ここにチェックをして各項目について設定して完了です。
サンクスページの設定方法
ホームページのユーザビリティを高めるので、ぜひ設定してください。設定方法については、今後追記していきます。
まとめ
Contact Form 7のカスタマイズ方法についてご紹介しました。
一度設定してしまえば、頻繁に変更する項目ではありません。
しかし、問い合わせフォームの良し悪しで問い合わせ率が変わってくるので、トライアンドエラーで一番効果的な問い合わせフォームを設定していきましょう。