WordPressを利用している方の中には、「お問い合わせフォームを設置したい」と考えてContact Form 7（コンタクトフォーム7）を導入した方も多いかと思います。しかし、なかなか思った通りのフォームを作成できずに悩んでいる方もいるのではないでしょうか？
そこで本記事ではContact Form 7のカスタマイズ方法を解説します。Contact Form 7ので設定項目について詳細を解説しますので、ぜひ参考にしてください。
▼サイトに設置するお問い合わせフォームを作成したいならformrunもおすすめ！簡単操作で見栄えのいいフォームが最短30秒で完成します。
目次
Contact Form 7の使い方①インストールする
Contact Form 7はWordPressの管理画面からインストールすることができます。
まずはプラグインの「新規追加」の項目をクリックしてください。そして検索窓に「Contact Form 7」と入力後、「今すぐインストール」を選択しましょう。
インストール後、「有効化」をクリックすれば導入は完了です。
次にContact Form 7のカスタマイズ方法を解説します。
Contact Form 7の使い方②問い合わせフォームを新規作成する
実際に問い合わせフォームを設置する方法は以下のとおりです。
WordPressメニュー「お問い合わせ」から「新規追加」をクリックします。
タイトル入力・フォーム内容の選択後「保存」をクリックします。
以上で問い合わせフォームの作成は完了です。
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）
入力後、「タグを挿入」をクリックすればカスタマイズ完了です。
カスタマイズ設定⑺送信ボタン・送信先
ユーザーにお問い合わせをしてもらうためには、送信ボタンが必須です。
フォーム作成画面の、「送信ボタン」をクリックしましょう。
ここでは「ラベル」の項目に、「送信」「お問い合わせ」「申し込み」などボタンに表示したい文言を入力してください。その後、「タグを挿入」をクリックすればカスタマイズは完了です。
複数ユーザに送信したい時は、以下の例のように送信先にカンマ区切りでアドレスを入力してください。
例)111@ABC.com,222@ABC.com,333@ABC.com,333
カスタマイズ応用編⑴確認画面・サンクスページ
確認画面とサンクスページの作成は、Contact Form 7の通常機能だと実装できません。確認画面とサンクスページを実装する場合は、プラグインの「Contact Form7 Multi-Step Forms」をインストールする必要があります。
参照：https://ja.wordpress.org/plugins/contact-form-7-multi-step-module/
確認画面の作成
確認画面の作成方法は以下のとおりです。
「お問い合わせ」の「コンタクトフォーム」から、作成しているフォームを複製します。
複製したフォームのタイトルを変更します。
フォーム編集画面から「氏名」の「your-name」のテキストをコピーしてください。
「氏名」のラベルタグ（<label> </label>）の中身だけを削除します。
フォームタグ生成ボタンの「multifoem」をクリックしてください。
フォームタグ生成画面の「名前」に、コピーした「your-name」をペーストします。その後、右下の「Insert Tag」をクリックしてください。
「氏名」の欄に「[multiform “your-name”]」が追記されます。
「氏名」と同じ手順で、項目を追記します。
フォーム編集画面下部の、[submit “送信”]の上にカーソルを当てて、フォームタグ生成ボタンの「previous」をクリックしてください。
「Label」に「戻る」と入力して、「Insert Tag」をクリックします。
タグが追記されたら、フォーム編集画面の左下の「保存」をクリックして完了です。
サンクスページの作成
サンクスページの作成手順は、以下のとおりです。
カーソルをフォーム編集画面の[submit “送信”]の下に当てた状態で、フォームタグ生成ボタンの「multistep」をクリックしてください。
フォームタグ生成画面が表示されたら、「Check this if this form is the last step.」と「Send email after this form submits.」にチェックを入れます。
次に「Next Page URL」をサンクスページのURLを入力して、「Insert Tag」をクリックしてください。
[submit “送信”]の「送信」部分を「入力内容の確認」などのテキストに変更して、「保存」をクリックして完了です。
カスタマイズ応用編⑵プライバシーポリシーを記述する
プライバシーポリシーの追記方法は、以下のとおりです。
フォーム編集画面の「承諾確認」をクリックします。
「同意条件」に表示させるテキストを入力して、「オプション」のチェックを外して「タグを挿入」をクリックしてください。
フォーム編集画面の「保存」をクリックして完了です。
Contact Form 7に役立つプラグインを3つ紹介
Contact Form 7を利用する際に役立つ3つのプラグインは以下のとおりです。
- Conditional Fields：条件分岐で回答を変動させる
- Contact Form 7 add confirm：確認画面の作成ができる
- Google reCAPTCHA：スパムを防止できる
以下では、各プラグインについて詳しく解説します。
条件分岐で回答を変動させる：Conditional Fields
「Contact Form 7 Conditional Fields」は、お問い合わせフォームの質問に基づいて、表示する回答を条件分岐できます。例えば、「資料の送付を希望しますか？」という質問に「はい」と回答した場合のみ、住所入力フィールドを表示するなどです。条件分岐を活用して、ユーザーに応じた最適な回答を提供できます。
Contact Form 7 Conditional Fieldsの設定ではプログラミングスキルは不要で、メールフォームの選択項目に合わせて入力フィールドや送信メール内容の条件分岐が可能です。
注意点として、「Contact Form 7」のインストールが必須なため、先にContact Form 7をインストールしておきましょう。
確認画面の作成ができる：Contact Form7 Multi-Step Forms
Contact Form7 Multi-Step Formsは、Contact Form 7に確認画面を追加できます。もともとContact Form 7には、送信前の確認画面を表示させられません。そのためContact Form7 Multi-Step Formsは、ユーザー自身が入力した情報を再確認し、送信前に修正できるような機能を実装するために必要です。管理画面の表示ができると、ユーザーの誤送信のリスクが低減し、ユーザー体験の向上にもつながります。
Contact Form 7をインストールしていないと利用できない点に注意してください。
スパムを防止できる：Google reCAPTCHA
Google reCAPTCHAはプラグインではありませんが、スパム防止機能を実装する際に有効で、Googleが提供しているツールです。主に3つのバージョン（reCAPTCHA v3, v2, v2 invisible）があり、それぞれが異なる操作と機能を持っています。
Google reCAPTCHAは、「私はロボットではありません」というチェックボックスを活用し、botの攻撃を防ぐシステムが実装可能です。
Google reCAPTCHAには以下の4つのメリットがあるため、スパム防止策に悩んでいる場合は積極的に導入を検討してみましょう。
- 無料でbotのスパム対策ができる
- 簡単に導入できる
- レイアウトが整っている
- タイムアウトが起こらない
Contact Form 7（コンタクトフォーム7）の特徴
https://ja.wordpress.org/plugins/contact-form-7/
Contact Form 7はWordPressのプラグインです。このプラグインを利用することで、簡単にお問い合わせフォームを設置することができます。
Contact Form 7を利用するメリットは以下のとおりです。
- コードの知識がない方でも簡単にお問い合わせフォームを設置できる
- 自動返信メールなどの機能を利用することができる
- 開発者が日本人のため、日本語による解説が豊富にある
- ユーザーが多く、分からないことは検索して解決できる
- 公式サイトにFAQやお問い合わせ窓口が儲けられ、サポートが充実している
このような特徴から、Contact Form 7は世界中で人気のプラグインとなっています。
▼formrunならテンプレートと必要な項目を選ぶだけ！コードの知識がなくてもフォームを作成できるため、初心者でも安心です。
Contact Form 7のフォーム作成にはHTMLが必須
Contact Form 7でフォームを作成するときは、HTML<label>タグが必須です。なぜならこのタグを追加しなければ、ユーザーは入力フォームに何を入力すべきか分からず利便性が低下するためです。
たとえばContact Form 7で「テキスト」の入力フォームを追加した時、設定画面と実際の見た目は以下のようになります。
設定画面
実際の見た目
このように入力フォームに見出しがない場合、ユーザーはそこに何を入力すべきか分からなくなってしまうでしょう。
そのため、<label>タグを利用して「<label>入力したい文字[text* your-name] </label>」の形でフォームを編集してください。
以下は、labelタグを使用した入力フォームのコード例です。
<label> 氏名
[text* your-name autocomplete:name] </label>
<label> メールアドレス
[email* your-email autocomplete:email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit “送信”]
設定画面
実際の見た目
以上のやり方で、入力フォームに見出しを追加することができます。ユーザーは少しのストレスが原因でサイトを離れてしまうこともあるため、利用しやすい環境づくりを意識してお問い合わせフォームを設置しましょう。
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（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
