WordPressを利用している方の中には、「お問い合わせフォームを設置したい」と考えてContact Form 7（コンタクトフォーム7）を導入した方も多いかと思います。しかし、なかなか思った通りのフォームを作成できずに悩んでいる方もいるのではないでしょうか？
そこで本記事ではContact Form 7のカスタマイズ方法を解説します。Contact Form 7ので設定項目について詳細を解説しますので、ぜひ参考にしてください。
目次
Contact Form 7（コンタクトフォーム7）とは？
https://ja.wordpress.org/plugins/contact-form-7/
Contact Form 7はWordPressのプラグインです。このプラグインを利用することで、簡単にお問い合わせフォームを設置することができます。
Contact Form 7を利用するメリットは以下のとおりです。
- コードの知識がない方でも簡単にお問い合わせフォームを設置できる
- 自動返信メールなどの機能を利用することができる
- 開発者が日本人のため、日本語による解説が豊富にある
- ユーザーが多く、分からないことは検索して解決できる
- 公式サイトにFAQやお問い合わせ窓口が儲けられ、サポートが充実している
このような特徴から、Contact Form 7は世界中で人気のプラグインとなっています。
Contact Form 7の詳細については以下の記事で詳しく解説しているため、参考にしてみてください。
Contact Form 7の導入方法
Contact Form 7はWordPressの管理画面からインストールすることができます。
まずはプラグインの「新規追加」の項目をクリックしてください。そして検索窓に「Contact Form 7」と入力後、「今すぐインストール」を選択しましょう。
インストール後、「有効化」をクリックすれば導入は完了です。
次にContact Form 7のカスタマイズ方法を解説します。
Contact Form 7のカスタマイズ方法
Contact Form 7は名前、メールアドレスなどの基本項目からチェックボックス、ラジオボタンなどの追加項目まで幅広く設定できるプラグインです。
ここでは特に利用頻度の多い7つについてカスタマイズ方法を解説します。
- テキスト・メールアドレス・URL・電話番号の設定
- 日付の設定
- ドロップダウンメニューの設定
- チェックボックス・ラジオボタンの設定
- 承諾確認の設定
- ファイルアップロードの設定
- 送信ボタンの設定
それぞれ見ていきましょう。
テキスト・メールアドレス・URL・電話番号の設定
フォーム作成画面の「テキスト」「メールアドレス」「URL」「電話番号」をクリックすると、以下のような設定画面が表示されます。（設定項目は同様です。）
ここでは以下の3つの項目を設定しましょう。
- 項目タイプ：「必須項目」にチェックをつけることで、入力必須の項目を作成できます。
- デフォルト値：入力例を表示することができます。この機能を利用することによって、ユーザーにとって分かりやすい入力項目が完成します。
- Akismet：スパム対策のプラグイン「Akismet」を導入・設定している場合には、この項目をチェックすることでスパム対策をすることができます。
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
日付の設定
日付の項目は、主に生年月日などの入力で利用します。
フォーム作成画面の「日付」をクリックすると、設定項目が表示されます。
ここでは3つの項目を設定しましょう。
- 項目タイプ：必須項目の設定ができます。
- デフォルト値：入力例を表示できます。
- 範囲：入力できる年月日の範囲を指定することができます。
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
ドロップダウンメニューの設定
ドロップダウンメニューは、出身地など複数項目から1つを選んでほしいシーンで活躍します。
フォーム作成画面の「ドロップダウンメニュー」を選択してください。
ここでは4つの項目を設定しましょう。
- 項目タイプ：必須項目の設定ができます。
- オプション：空白部分にドロップダウンメニューの選択肢を入力します。1行に1つの項目が設定できるため、たとえば都道府県を指定するメニューを作成したい場合は、47行に1つずつ県名を入力してください。
- 複数選択を可能にする：複数選択を可能にしたい場合はチェックしましょう。
- 空の項目を先頭に挿入する：該当する項目がない場合に選べる「空の項目」を設定できます。
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
チェックボックス・ラジオボタンの設定
チェックボックスやラジオボタンは、性別の選択などで活躍する機能です。設定項目も同様であるため、ここではチェックボックスの設定方法を解説します。
フォーム作成画面の「チェックボックス」を選択してください。
ここでは5つの項目を設定しましょう。
- 項目タイプ：必須項目の設定ができます。
- オプション：チェックボックスの表示項目を1行に1つ設定することができます。
- ラベルを前に、チェックボックスを後に配置する：文字の右側にチェックボックスを配置することができます。
- 個々の項目を label 要素で囲む：<label>タグを利用することで、テキストとチェックボックスを関連づけることができます。
- チェックボックスを排他化する：この項目にチェックすることで、1つの項目しか選択できない仕様にすることができます。
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
承諾確認の設定
承諾確認は利用規約への同意を求める際などに使われます。
フォーム作成画面の「承諾確認」を選択してください。
ここでは「同意条件」の項目に表示したい文言を入力しましょう。
例：「利用規約に同意する」「個人情報の取扱いに同意する」
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
ファイルアップロードの設定
この項目を設定することで、履歴書・職務経歴書などを送付ができるエントリーフォームとしても利用することが可能となります。
フォーム作成画面の「ファイル」を選択してください。
ここでは3つの項目を設定します。
- 項目タイプ：必須項目の設定ができます。
- ファイルサイズの上限 (バイト)：ファイルサイズの上限を設定できます。特に入力をしない場合には1MBが自動的に上限として設定されます。
- 受け入れ可能なファイル形式：ファイル形式を設定できます。複数設定したい場合は「|」で区切ることで設定可能です。（例：jpg|png|xls）
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
送信ボタンの設定
ユーザーにお問い合わせをしてもらうためには、送信ボタンが必須です。
フォーム作成画面の、「送信ボタン」をクリックしましょう。
ここでは「ラベル」の項目に、「送信」「お問い合わせ」「申し込み」などボタンに表示したい文言を入力してください。その後、「タグを挿入」をクリックすればカスタマイズは完了です。
以上がContact Form 7で使用頻度の高い7つのカスタマイズ項目となります。
【注意点】Contact Form 7のフォーム作成は<label>タグが必須
Contact Form 7でフォームを作成するときは、<label>タグが必須です。なぜならこのタグを追加しなければ、ユーザーは入力フォームに何を入力すべきか分からず利便性が低下するためです。
たとえばContact Form 7で「テキスト」の入力フォームを追加した時、設定画面と実際の見た目は以下のようになります。
設定画面
実際の見た目
このように入力フォームに見出しがない場合、ユーザーはそこに何を入力すべきか分からなくなってしまうでしょう。
そのため、<label>タグを利用して「<label>入力したい文字[text* your-name] </label>」の形でフォームを編集してください。
設定画面
実際の見た目
以上のやり方で、入力フォームに見出しを追加することができます。ユーザーは少しのストレスが原因でサイトを離れてしまうこともあるため、利用しやすい環境づくりを意識してお問い合わせフォームを設置しましょう。
WordPressにカスタマイズ性の高いお問い合わせフォームを作成するなら「formrun」がおすすめ
もしあなたが以下のような要望を持っているのなら、弊社の提供する「formrun」を利用することでニーズを満たすことができるでしょう。
- 「もっとデザインにこだわりたい」
- 「顧客管理・対応にも力をいれたい」
- 「簡単に幅広くカスタマイズしたい」
formrunは40種類以上の豊富なテンプレートからデザインを選択することができます。さらに回答者の補助機能（住所の自動入力など）やカンバン方式の顧客ステータスの管理（以下参照）ができるため、より顧客に寄り添ったお問い合わせフォーム運用が可能です。
無料から利用することができるため、まずは設置して使用感などをチェックしてみましょう。WordPressにフォームを設置する方法については以下の記事で詳しく解説しています。
【フォームをシェアしたい方必見！】iframe埋め込みを用いて、ホームページでフォームを共有しよう（STUDIO・Wix・ペライチ・Ameba Ownd・Jimdo・WordPress)
まとめ：WordPressにお問い合わせフォームを設置しよう
本記事ではContact Form 7によって設置したお問い合わせフォームをカスタマイズ方法をご紹介しました。
しかしWordPressにお問い合わせフォームを設置する方法は他にも数多く存在します。「Contact Form 7」のようなWordPressでインストールできるプラグインの他にも、先ほど紹介した「formrun」のような外部ツールなど、選択肢は多種多様です。
それぞれ特徴や強み・弱みが異なるため、ぜひあなたに合ったツールを利用しましょう。以下の記事ではWordPressにお問い合わせフォームを設置できるプラグイン・ツールをまとめているため、参考にしてください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
