プラグイン 2023.03.22

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

この記事を書いた人

土井 純也

WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO

1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。

【 展開しているサービス一覧 】
■WordPress開発サービス「wp.make
■WordPress保守/運用サービス「wp.support
■WordPressハッキング/緊急復旧対応サービス「wp.rescue
■WordPressバージョンアップ代行サービス「wp.versionup

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をインストールすると追加されるメニュー項目です。

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

「contact form 7」フォーム作成手順1

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

「contact form 7」フォーム作成手順2

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

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

「contact form 7」フォーム作成手順3

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

「contact form 7」フォーム作成手順4

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

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

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

次に、フォームが送信された際に自動で返信されるメールの題名や本文を設定します。コンタクトフォーム編集画面の[メール]タブをクリックします。
「contact form 7」自動返信メール設定手順1

送信先、送信元など基本的な設定を行います。
「contact form 7」自動返信メール設定手順2

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

メッセージ設定を行う

コンタクトフォームでは、正常に送信された時や、エラーで送信できなかった時にメッセージが表示されます。メッセージ文面は以下で設定します。コンタクトフォーム編集画面の[メッセージ]タブをクリック(①)します。
「contact form 7」メッセージ設定手順1

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

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

フォームを公開する

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

[方法1]フォームを実装する固定ページの編集画面を開きます(①)。
「contact form 7」フォーム公開手順1

固定ページ上で[+(プラス)]ボタンをクリック(②)し、Contact Form 7を選択(③)します。
「contact form 7」フォーム公開手順2

作成済みのフォーム名リストから、実装したいフォームを選択(④)します。ページを公開すると作成したフォームが表示されます。
「contact form 7」フォーム公開手順3

[方法2]コンタクトフォーム編集画面のタイトル欄直下に表示されているショートコードをコピーします。
「contact form 7」フォーム公開手順3

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

サンクスページの設定

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

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

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

<script>
document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘サンクスページURL’;
}, false );
</script>

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

「contact form 7」サンクスページURL設定手順

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

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

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

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

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

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

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

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

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

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

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

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

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

日付設定

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

[タグを追加]ボタンをクリックすると日付タグが挿入されます。
「contact form 7」日付設定手順2

フォームで入力する際にカレンダー形式でクリック入力できるようになります。ただブラウザ環境によって一部デザインが異なります。
「contact form 7」日付設定手順3

ラジオボタン

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

「contact form 7」ラジオボタン設定手順1

オプション欄には、選択肢を改行しながら入力します。[タグを挿入]ボタンをクリックすると、ラジオボタンのタグが追加されます。
「contact form 7」ラジオボタン設定手順2

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

チェックボックス

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

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

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

「contact form 7」チェックボックス

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

「contact form チェックボックスの詳細

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

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

ドロップダウンメニュー

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

「contact form ドロップダウンメニュー

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

「contact form ドロップダウンメニュー

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

「contact form ドロップダウンメニュー

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

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

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

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

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

「contact form 承諾確認のチェックボックス

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

「contact form 承諾確認チェックボックスの詳細

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

ファイル添付

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

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

「contact form ファイル添付

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

「contact form ファイル添付機能の詳細

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

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

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

コンタクトフォームの編集画面で、応答メッセージを表示したい位置に[response]タグを追加します。
「contact form 7」完了メッセージ表示位置の設定手順1

テストで[送信]ボタンをクリックしてみると、メッセージ位置が変更していることがわかります。
「contact form 7」完了メッセージ表示位置の設定手順2

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

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

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

「contact form 7」【中級者向け】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」のボタンが追加されます。

「contact form 7」条件付きフィールド

追加された「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 v3を例に解説していきます。

①GoogleのreCAPTCHAサービスページから、連携用のキーを取得します。
reCAPTCHAサービスページ

②連携用のキーを取得した後、「v3 Admin Console」をクリックすると、サイト登録画面が表示されます。
※Googleにログインしていない場合は、Googleアカウントでログインしてください。

③必要項目を入力し、「reCAPTCHA v3」を選んで進めると、サイトキーとシークレットキーが発行されます。

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

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

まとめ

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

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

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

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

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

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

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

WordPress開発・カスタマイズなら『wp.make』 無料の資料DLはこちら

wp.make資料

全案件WordPressのみ!
株式会社e2eの『wp.make』WordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的!

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…


こんな事態になる前に、ぜひ一度、ご相談ください!
WordPressサイトを作るなら、一番WordPressに詳しいところへ!

『wp.make』資料をダウンロードする