【図解で簡単】Contact Form 7の設定・使い方・カスタマイズ方法まとめ！

Webサイトでユーザーからのお問い合わせや予約を受け付けるためにはフォームが必要です。WordPressサイトの定番プラグイン「Contact Form 7（コンタクトフォームセブン）」を利用すると、開発スキルがなくてもフォームが作成できるので非常に手軽です。さらに基本から少しカスタマイズするだけで、見栄えや使い勝手をアップすることも可能。この記事では、Contact Form 7 を利用するために必要な基本設定と簡単にできるカスタマイズ方法について紹介します。

「Contact Form 7」とは？お問い合わせフォームが簡単作成できる

Contact Form 7は、WordPressで制作したWebサイトでお問い合わせフォームを設置できるプラグインです。無料で利用でき、難しいコーディング知識がなくても簡単にフォームを作成できます。開発者が日本人のため、公式サイトやFAQなどのコンテンツが日本語で参照できる強みもあります。

Webサイトのお問い合わせのほか、以下のような用途で利用されています。

• セミナーの申し込み
• 来店予約の受付
• ホワイトペーパー・資料申し込み

【図解】Contact Form 7の基本的な設定方法をやさしく解説

はじめに、基本的なフォームの作成方法を紹介します。おおまかな作成手順は、「フォームを作成する」→「自動返信メール・エラーメッセージなどを設定する」→「ページに実装搭載する」です。

フォームを作成する前に、事前に固定ページでフォームを実装搭載するページを準備しておくと作業がスムーズにできます。

新規にフォームを作成する

WordPress管理画面の左側メニューに［お問い合わせ］が追加されていることを確認します。これはContact Form 7をインストールすると追加されるメニュー項目です。

［お問い合わせ］をクリック（①）し、コンタクトフォームの画面へ移動します。
次に画面上部にある［新規作成］をクリック（②）します。
または直接［お問い合わせ］_［コンタクトフォーム］_［新規作成］をクリックします。

フォームが新規に作成され、編集画面が表示されますので、管理しやすいフォーム名をタイトル欄に入力（③）します。
このフォーム名は公開されませんが、ページに表示する際のショートコードとして使用されます。
そのため、何の用途か区別がつくような名前をつけるようにしましょう。

この時点で、すでに【お名前】【メールアドレス】【題名】【メッセージ本文】の4項目が設定されています（④）。

この状態でも基本的なお問い合わせフォームとして利用することはできますが、以下のような表示になります。

ページ上に表示されるフォームの各項目と、管理画面内で表示されているコード（タグ）とは、以下のように対応しています。

氏名、メールアドレスなどの個々の項目は、labelタグ内に表示名とコンタクトフォームのタグ（図の青字部分）を記述するかたちです。送信ボタンは表示名がないため直接タグを記述します。この基本構造を理解していると、今後フォームを修正したりカスタマイズする際に役立ちます。

氏名、メールアドレス、題名の各タグについている「*（アスタリスク）」は、必須入力項目であることを示しています。必須ではなく任意入力項目に変更したい場合は、*を削除します。

自動返信メールを設定する

次に、フォームが送信された際に自動で返信されるメールの題名や本文を設定します。コンタクトフォーム編集画面の［メール］タブをクリックします。

送信先、送信元など基本的な設定を行います。

設定画面の下部にある「メール（2）を使用」をチェックすると、自動返信メールが設定できます。先に設定したメールがWebサイト管理者に届くメール、メール（2）がフォーム入力者に返信されるメールです。そのままの状態ではフォームに入力された内容がそのまま返信されるため、お礼の文言などを追加するとよいでしょう。

メッセージ設定を行う

コンタクトフォームでは、正常に送信された時や、エラーで送信できなかった時にメッセージが表示されます。メッセージ文面は以下で設定します。コンタクトフォーム編集画面の［メッセージ］タブをクリック（①）します。

必要に応じてメッセージ文言を修正します（②）。メッセージが正常に送信された際には、「ありがとうございます。メッセージは送信されました。」という文言が表示されます。そのままでも問題ありませんが、そっけない印象を与える可能性もあるため、丁寧な表現に変更したほうが相手によい印象を与えやすくなります。

必要な修正を行ったら、最後に［保存］ボタンを押して完了です！

フォームを公開する

設定が完了したら、Webページにフォームを設定します。フォーム名を選択する方法と、ショートコードを貼り付ける方法の2種類があります。

［方法1］フォームを実装する固定ページの編集画面を開きます（①）。

固定ページ上で［＋（プラス）］ボタンをクリック（②）し、Contact Form 7を選択（③）します。

作成済みのフォーム名リストから、実装したいフォームを選択（④）します。ページを公開すると作成したフォームが表示されます。

［方法2］コンタクトフォーム編集画面のタイトル欄直下に表示されているショートコードをコピーします。

次に、準備しておいたフォームを実装する固定ページの本文に貼り付けます。ブロックにショートコードを貼り付けると、［方法1］の④とおなじ作成済みのフォーム名リストが表示されるため実装したいフォーム名を選択します。ページを公開すると作成したフォームが表示されます。

サンクスページの設定

Contact Form 7を利用するならば、フォーム送信後に表示する完了画面（サンクスページ）を設定しておきましょう。
あらかじめ設定しておかないと、Contact Form 7では自動でサンクスページに移行しません。

サンクスページを設定するには、まずフォーム送信後に表示したいサンクスページを、固定ページで作成します。こちらには、「お問い合わせいただき、ありがとうございました」や「フォームは正常に送信されました」といったメッセージが表示されるようにしておきましょう。

その後、フォーム用の固定ページの編集画面でテキストエディターへ切り替えたら、以下のコードをテキストの上部に追加します。

※「サンクスページURL」の部分は、設定したいサンクスページのURLに書き換えてください

この設定を行うことで、ユーザーが送信ボタンをクリックした際に、サンクスページへの遷移が行われます。

確認画面はデフォルトでは作成できない

多くのフォームでは、送信前に内容を確認できる「確認画面」が表示されます。

WordPressの場合、デフォルトで確認画面を作成することができないため、何もしなければ送信ボタンをクリックした瞬間、そのまま内容が送られてしまいます。

しかし、プラグインをインストールすれば、送信ボタンをクリックした後、すぐ送信完了にならず、確認画面を挟むことが可能です。

フォームの確認画面を追加するプラグインとしては、「Contact Form 7 Multi-Step Forms」がオススメです。

この記事の後半でもご紹介しているのでご一読ください。

「Contact Form 7 Multi-Step Forms」｜確認画面の追加

【図解】Contact Form 7のフォームのカスタマイズを簡単解説！

基本のフォームは最小限の項目のみなので、必要に応じて項目を追加する必要があります。しかし項目数が増えると入力する側にとっては負担になり、途中で入力を止めてしまう可能性があります。

ドロップダウンやラジオボタンといった選択項目、クリックで日付入力ができる日付設定機能などを使って入力をサポートすることで、最後まで入力してもらいやすくなります。また完了メッセージの表示位置を調整するなどレイアウトを調整することで情報を見つけてもらいやすくなります。

ここからは、簡単にできて、効果が高いカスタマイズ項目について紹介します。知っておくと便利なカスタマイズ内容として、次の項目を取り上げます。

• 日付設定
• ラジオボタン
• チェックボックス
• ドロップダウンメニュー
• 承諾確認のチェックボックス
• ファイル添付
• 完了メッセージ表示位置のカスタマイズ
• Class・IDの追加方法

日付設定

予約時に日付を選択してもらう場合などに、カレンダー形式で日付を設定できると便利です。コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［日付］タブをクリックします。

［タグを追加］ボタンをクリックすると日付タグが挿入されます。

フォームで入力する際にカレンダー形式でクリック入力できるようになります。ただブラウザ環境によって一部デザインが異なります。

ラジオボタン

ラジオボタンは、複数の選択肢からひとつだけを選んでもらうときに用いる選択項目です。コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［ラジオボタン］タブをクリックします。

オプション欄には、選択肢を改行しながら入力します。［タグを挿入］ボタンをクリックすると、ラジオボタンのタグが追加されます。

Contact Form 7公式サイト：チェックボックス、ラジオボタン、ドロップダウンメニュー設定方法

チェックボックス

チェックボックスは、「□」をクリックしてチェックマークをつけたり消したりすることで、選択状態を切り替える機能です。

複数の選択肢を選べるアンケートなどで利用されます。

チェックボックスを追加するには、コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［チェックボックス］タブをクリックします。

すると、以下の画像のようにチェックボックスの詳細を設定するポップアップが表示されます。

それぞれの項目を埋めると自動的にチェックボックス用のタグが生成されるので、「タグを挿入」をクリックしてコンタクトフォームの編集画面に追加します。

Contact Form 7公式サイト：チェックボックス、ラジオボタン、ドロップダウンメニュー設定方法

ドロップダウンメニュー

ドロップダウンメニューは、複数の選択肢から1つの回答を答えてもらう時に使う機能です。
下向きの矢印をクリックすると、他の回答が表示される仕組みになっています。

ドロップダウンメニューを追加するには、コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［ドロップダウンメニュー］タブをクリックします。

すると、以下の画像のようにドロップダウンメニューの詳細を設定するポップアップが表示されます。

それぞれの項目を埋めると自動的にドロップダウンメニュー用のタグが生成されるので、「タグを挿入」をクリックしてコンタクトフォームの編集画面に追加します。

Contact Form 7公式サイト：チェックボックス、ラジオボタン、ドロップダウンメニュー設定方法

承諾確認のチェックボックス

規約やプライバシーポリシーについて、承諾を確認する目的で使われる機能が承諾確認のチェックボックスです。

承諾確認を追加するには、コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［承諾確認］タブをクリックします。

すると、以下の画像のように承諾確認チェックボックスの詳細を設定するポップアップが表示されます。

それぞれの項目を埋めると自動的に承諾確認チェックボックス用のタグが生成されるので、「タグを挿入」をクリックしてコンタクトフォームの編集画面に追加します。

ファイル添付

採用応募時に履歴書や証明写真を提出してもらうなどの目的で、ファイルを添付する機能が必要になることがあります。

そんなファイル添付の機能を追加するには、コンタクトフォームの編集画面で項目を追加したい場所にカーソルを移動し、［ファイル］タブをクリックします。

すると、以下の画像のようにファイル添付機能の詳細を設定するポップアップが表示されます。

それぞれの項目を埋めると自動的にファイル添付機能用のタグが生成されるので、「タグを挿入」をクリックしてコンタクトフォームの編集画面に追加します。

完了メッセージ表示位置のカスタマイズ

フォームを送信すると「ありがとうございます」という完了メッセージが表示されます。通常はフォーム下部に表示されますが、目立つように位置を変えることができます。

コンタクトフォームの編集画面で、応答メッセージを表示したい位置に［response］タグを追加します。

テストで［送信］ボタンをクリックしてみると、メッセージ位置が変更していることがわかります。

【中級者向け】Class・IDの追加方法

Contact Form 7に対して、より自由度の高いカスタマイズをしたい時には、ClassとIDを追加することができます。

具体的には、まず各フォームタグを生成する時に、Class名またはID名を入力します。

その後は「外観」→「カスタマイズ」→「追加CSS」に移動し、設定したClass名やID名のCSSを追記すると、プレビューなどで見た時に、変更が反映されていることが確認できるでしょう。

Contact Form 7をより便利にするプラグイン

Contact Form7では、フォーム作成をより便利にするプラグインが多数提供されているのが魅力のひとつです。追加すると便利なプラグインをふたつ紹介します。

「Contact Form 7 Multi-Step Forms」｜確認画面の追加

先ほどご紹介した、フォームの確認画面を追加できるプラグインです。

Contact Form 7で作成したフォームは、通常、［送信］ボタンをクリックすると確認画面を表示せずに、そのまま送信されてしまいます。フォームの内容やサービスによっては、確認画面を挟む方がユーザーにとって親切な場合もあるでしょう。

そういった確認画面を追加したい場合には、この「Contact Form 7 Multi-Step Forms」プラグインがオススメです。

詳しい使用方法は、以下の記事を参考にしてみてください。

Contact Form 7で確認画面をプラグインで簡単に作成する方法

なお、「Contact Form 7 add confirm」というプラグインも確認画面を追加するもので、以前は人気があったのですが、2023年2月現在で最終更新が5年前となっているので、開発が終了したようです。
最新バージョンのContact Form 7では不具合が出るので、使用しないようにしましょう。

関連：「Contact Form 7 Multi-Step Forms」公式サイト

Conditional Fields for Contact Form 7｜条件分岐を追加

Conditional Fields for Contact Form 7は、フォームをカスタマイズして条件分岐を追加できるプラグインです。

例えばお問い合わせフォームに、「資料の送付を希望しますか？」という質問事項を作成したとします。
Conditional Fields for Contact Form 7を利用すると、この時に「はい」と回答したユーザーにのみ、資料を送付するための住所の記入欄を表示させるなどの使い方が可能になります。

インストールをする際は、WordPressの管理画面から「プラグイン」→「新規追加」を開き、「Conditional Fields for Contact Form 7」を検索してください。

Conditional Fields for Contact Form 7を検索できたら、インストールして有効化します。

すると、コンタクトフォームの編集画面に「Conditional fields」のタブと、「Conditional fields Group」のボタンが追加されます。

追加された「Conditional fields Group」ボタンを使い、任意のフィールドをグループ付けすることで、条件分岐が可能です。

具体的には、「Conditional fields Group」ボタンで生成できる[group juusho][/group]タグの中に、条件によって表示・非表示を変えたいフィールドを、タイトルごとドラッグします。

この後、コンタクトフォームを保存すると条件分岐が反映されるようになります。

さらに条件を追加したい場合には「Conditional fields」タブが使えます。
該当のタブ内にある「+ add new conditional rule」のボタンをクリックすることで、ルールを追加していくことが可能です。

「Akismet」｜スパム対策

フォームを設置すると、スパムメールが送信される場合があります。プラグイン「Akismet」を追加すると、スパムメールを排除してくれます。

関連：「Akismet」公式サイト

reCAPTCHAの設定｜スパム対策

Akismetと同様、スパム対策に利用できるプラグインです。
スパムメールからWebサイトを保護してくれるので、ぜひ導入しておきたいプラグインの1つと言えるでしょう。

reCAPTCHAを導入する場合は、WordPressの管理画面から「お問い合わせ」→「インテグレーション」を選び、「reCAPTCHA」欄の「インテグレーションのセットアップ」をクリックします。

その後、以下の手順で取得できるサイトキーとシークレットキーを、それぞれ入力し、「変更を保存」してください。

reCAPTCHAの設定については、以下の記事でもっと詳細な手順も含めて解説しています。
こちらもぜひご参考ください。

【図解】Contact Form 7のreCAPTCHAの導入・設定方法（スパム対策）

まとめ

Webサイト訪問者の意見や情報を得るために、フォームは欠かせない要素です。WordPressのプラグイン「Contact Form 7」を使えば、Webサイトで必要なフォームを簡単に作成できます。さらにカスタマイズすることで、見栄えよく、便利にすることができます。

使いやすいフォームを作成して、ユーザーからの問い合わせを獲得しましょう。

フォームの実装が難しい場合はWordPressのプロにご相談ください

もし、ご自身・自社での開発が難しい場合には、ぜひWordPressの専門家にご相談ください。

wp.geekを運営する私たちはWordPress専門のプロフェッショナル集団として、1,000を超えるWordPressサイトの制作・リニューアルやシステム開発・カスタマイズを行なってきました。
フォームに限らず、WordPressに関することなら、なんでもご相談いただけます。

ご相談・お見積もりは無料ですので、もし、何かお力になれることがあれば、いつでもご相談ください！

私たちへのご相談はこちらのリンクから！