Contact Form 7の使い方とサンクスページの設置方法

WordPressにはコンタクトフォームを設置できるプラグインが数多くありますが、その中でも代表的なのが『Contact Form 7』です。

ここでは、Contact Form 7の基本的な使い方と、Contact Form 7にサンクスページ(送信完了ページ)を設置する方法をお伝えしたいと思います。

Contact Form 7とは？

Contact Form 7はコンタクトフォーム系プラグインの中でも代表的なプラグインで、日本のみならず世界中で利用されています。

管理画面からフォームの各項目の設定・編集を行うことができ、たとえば資料請求フォームとお問い合わせフォームなど、複数のフォームの内容をそれぞれにカスタマイズして管理することができます。

アップデートも頻繁にされており、公式サイトでのサポートも充実していますので、Web制作の知識がない人でもフォームを簡単に設置することができます。

また、WordPressプラグイン『Akismet』やGoogleが提供している『reCAPTCHA』と連携することで、スパムをフィルタリングすることができます。

Contact Form 7のインストール

Contact Form 7をインストールするには、WordPressダッシュボードの「プラグイン」→「新規追加」から、またはContact Form 7プラグインページからダウンロード＆インストールしてください。

インストールできたら有効化しておきましょう。

Contact Form 7の使い方

Contact Form 7の使い方はとても簡単です。

ここでは、WordPressで作成したページにコンタクトフォームを設置する方法と、Contact Form 7管理画面での各項目の編集方法についてご紹介していきます。

フォームの設置方法

WordPressダッシュボードにて「お問い合せ」→「新規追加」をクリックします。

コンタクトフォームの名前(「お問い合せ」や「資料請求」など)を入力します。

フォームに項目を追加するには、フォーム編集画面で追加したい項目のボタンをクリックします。

ダイアログボックスが表示されますので、各項目を入力して「タグを挿入」ボタンをクリックします。

フォームに新しい項目が追加されます。

フォームの編集が完了したら、タイトル下に表示されているショートコードをコピーします。

コンタクトフォームを設置したいページを開き、先ほどコピーしたショートコードを貼り付けます。

ページ編集画面の「公開」ボタン(または「更新」ボタン)をクリックすれば、設置完了です。

Contact Form 7の設定

Contact Form 7管理画面の各タブの設定方法を見ていきましょう。

フォームの編集

「フォーム」タブにて、フォームを編集することができます。

Contact Form 7では、以下の15の項目を簡単に設置できるようになっています。

• テキスト
• メールアドレス
• URL
• 電話番号
• 数値
• 日付
• テキストエリア
• ドロップダウンメニュー
• チェックボックス
• ラジオボタン
• 承認確認
• クイズ
• reCAPTCHA
• ファイル
• 送信ボタン

テキスト

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

Akismet

Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

メールアドレス

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

Akismet

Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

URL

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

Akismet

Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

電話番号

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

数値

項目タイプ

スピンボックスかスライダーを選択できます。必須項目の場合はチェックを入れてください。

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

範囲

数値を指定できる範囲の上限と下限を入力します。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

日付

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

範囲

日付を指定できる範囲の上限と下限を入力します。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

テキストエリア

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

デフォルト値

デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

ドロップダウンメニュー

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

オプション

ドロップダウンメニューの選択項目を入力。選択項目は一つずつ改行して入力します。たとえば、都道府県の場合は、

• 北海道
• 青森
• 岩手
• 宮城
• 秋田
• 山形
• 福島
• 東京

という感じで入力していきます。複数選択を可能にしたい場合は「複数選択を可能にする」にチェック、先頭に空白の項目を挿入したい場合は「空の項目を先頭に挿入する」にチェックを入れる。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

チェックボックス

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

オプション

チェックボックスの選択項目を入力。選択項目は一つずつ改行して入力します。たとえば、都道府県の場合は、

• 北海道
• 青森
• 岩手
• 宮城
• 秋田
• 山形
• 福島
• 東京

という感じで入力していきます。

「 東京 □ 」という形でチェックボックスをラベルの後ろに表示したい場合は「ラベルを前に、チェックボックスを後に配置する」にチェック、テキストをクリックするとボックスにチェックが入るようにしたい場合は「個々の項目をlabel要素で囲む」にチェック、複数選択できないようにするには「チェックボックスを排他化する」にチェックを入れる。

ID属性

input要素を囲うspan要素にID属性を付与したい場合に入力します。

クラス属性

input要素を囲うspan要素にクラス属性を付与したい場合に入力します。

ラジオボタン

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

オプション

チェックボックスの選択項目を入力。選択項目は一つずつ改行して入力します。たとえば、都道府県の場合は、

• 北海道
• 青森
• 岩手
• 宮城
• 秋田
• 山形
• 福島
• 東京

という感じで入力していきます。

「 東京 ○ 」という形でボタンをラベルの後ろに表示したい場合は「ラベルを前に、チェックボックスを後に配置する」にチェック、テキストをクリックするとボタンを選択できるようにしたい場合は「個々の項目をlabel要素で囲む」にチェックを入れる。

ID属性

input要素を囲うspan要素にID属性を付与したい場合に入力します。

クラス属性

input要素を囲うspan要素にクラス属性を付与したい場合に入力します。

承認確認

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

オプション

承諾確認のチェックボックスをデフォルトでチェックが入った状態にしたい場合は「このチェックボックスをデフォルトでチェックされた状態にする」にチェック、承諾確認チェックボックスのチェックを外さないと送信できないようにしたい場合は「これの挙動を反対にする」にチェックを入れる。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

クイズ

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

クイズと回答

クイズと回答をパイプ(|)で仕切り、以下のような形で入力します。

• 日本の首都は？|東京

複数のクイズを設定すると、毎回そのうちのひとつがランダムで表示されます。

• 日本の首都は？|東京
• カナダの首都は？|オタワ
• スリランカの首都は？|スリジャヤワルダナプラコッテ

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

reCAPTCHA

reCAPTCHAとはGoogleが提供している、ウェブサイトの制限エリアにアクセスを試みるボットを遮断するための機能です。

reCAPTCHAを使用するには、APIキーの設定が必要になります。

APIキーはreCAPTCHA管理ページにて取得できます。

reCAPTCHA管理ページにて下記2点を入力して「Register」ボタンをクリックします。

Label

reCAPTCHAを設置するページの名前(サイト名とかでいいです)

Choose the type of reCAPTCHA

「reCAPTCHA V2」を選択

Domains

reCAPTCHAを設置するサイトのドメイン

次のページで「サイトキー」と「シークレットキー」が表示されますので、コピーしておきます。

WordPressダッシュボードに戻り、「お問い合わせ」→「インテグレーション」と進みます。

「他のサービスとのインテグレーション」ページで「キーを設定する」ボタンをクリックします。

「サイトキー」と「シークレットキー」を入力して「保存」をクリックします。

これでAPIキーの設定ができ、reCAPTCHAを使用できるようになりました。

テーマ

「明るい」「暗い」の2パターンから選択できます。

サイズ

「ノーマル」「コンパクト」の2パターンから選択できます。

ID属性

reCAPTCHAが挿入されるdiv要素にID属性を付与したい場合に入力します。

クラス属性

reCAPTCHAが挿入されるdiv要素にクラス属性を付与したい場合に入力します。

ファイル

項目タイプ

必須項目の場合はチェックを入れる

名前

フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。

ファイルサイズの上限 (バイト)

添付可能なファイルサイズの上限を指定します。たとえば2MBを上限としたい場合は「2mb」または「2097152」と記入します。

受け入れ可能なファイル形式

添付可能なファイルの形式を指定する。たとえばJPGファイルなら「jpg」と記入する。複数のファイル形式を受け入れ可能にしたい場合は「gif|png|jpg|jpeg」のようにパイプ(|)でつなげる。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

送信ボタン

ラベル

ボタンに表示したいテキストを入力します。

ID属性

input要素にID属性を付与したい場合に入力します。

クラス属性

input要素にクラス属性を付与したい場合に入力します。

メールの設定

Contact Form 7管理画面にて「メール」タブをクリックして、メールの設定を行います。

メール

送信先

フォームから送信したメールの送信先メールアドレスを入力します。通常はあなたのメールアドレスでいいでしょう。

送信元

ここは送信者のメールアドレスが入る箇所です。そのため、メールタグ()を入力すればいいと思いがちなのですが、そうすると構文エラーになったりスパムとして扱われる可能性が高くなります。またContact Form 7の公式サイトによると、ここには「サイトと同じドメインに属するアドレスが用いられるべき」とのことです。

そのため、ここにはあなたのサイトのドメインを利用して「wordpress@[あなたのドメイン]」というメールアドレスを作成しておき、それを入力しておきましょう。

例：[your-name]

題名

ここにはフォームから送信されるメールのタイトルを入力します。なお必須項目にしていない場合、メールタグ([your-subject]など)のみだと構文エラーになります。これは必須でないためにタイトルが空欄になる可能性があるために起こるエラーです。そのため、

【お問い合せ】[your-subject]

のような形で、タイトルが空欄にならないようにしておきましょう。

追加ヘッダー

ここには、送信者のメールアドレスを「Reply-To:」の形で入力します。通常、メールに返信する際には元のメールのFromフィールドに指定されたアドレスに返信メールを送信します。

しかしContact Form 7では送信メールがスパムと扱われないために、送信元アドレスにサイトと同じドメインに属するアドレス(つまり送信者のアドレスではないもの)が指定されています。

そのため、「Reply-To:」に送信者のメールアドレスを指定することで、返信メールが送信者に届くようにします。

例：Reply-To: [your-email]

メッセージ本文

フォームで送信されるメールの本文です。メールタグを挿入することができます。「空のメールタグを含む行を出力から除外する」にチェックを入れると、フォームの未入力だった項目を含む行を削除した形でメールが送信されます。

ファイル添付

フォームにてファイルの添付が可能な場合、添付ファイルに対応するメールタグを記入しておくことで、送信されるメールにファイルが添付されます。

例：[file-104]

メール(2)

「メール(2)を使用」にチェックを入れて、メール(2)を利用して自動返信メールの設定を行います。

送信先

フォームで入力されたメールアドレスなど、元のメールの送信者(フォームからメールを送った人)にメールが届くようにしておきます。

例：[your-email]

送信元

あなたのメールアドレスを指定しておきましょう。ただ、サイトのドメインに属するアドレスでないと構文エラーになりますので、Gmailなどを指定しないようにしましょう。フォームを設置するサイトのドメインでメールアドレスを作成しておいて、それを入力しておくとよいでしょう。

例：あなたの名前(またはサイト名)

題名

自動返信メールのタイトルです。

例：お問い合わせありがとうございます。

追加ヘッダー

Gmailなど、サイトのドメインに属さないアドレスで「自動返信メールへの返信メール」を受け取りたい場合にはここで指定します。

例：Reply-To: xxxxxxxxxxxx@gmail.com

メッセージ本文

自動返信メールの本文です。メールタグを挿入することができます。「空のメールタグを含む行を出力から除外する」にチェックを入れると、フォームの未入力だった項目を含む行を削除した形でメールが送信されます。

ファイル添付

フォームから送信されたメールに添付ファイルがあった場合、ここにメールタグを入力しておくと自動返信メールにもファイルが添付されて送信されます。

[file-104]

エラーメッセージの編集

メッセージタブを開き、ユーザーの操作に伴って表示されるメッセージを編集します。

その他の設定

その他の設定タブでは、コンタクトフォームにデモモードなどのカスタム設定を追加できます。

参考

その他の設定 | Contact Form 7 [日本語]

サンクスページの設置方法

on_sent_okによるサンクスページの設置方法

Contact Form 7の「その他の設定」を利用して、フォームにサンクスページ(送信完了ページ)を設置することができます。

「その他の設定」タブを開き、コード記入欄に下記のようにサンクスページのURLを指定します。

JavaScript

on_sent_ok: "location = 'http://xxxxxxxxxx.com/thanks/';"

これで、フォームからのメール送信後に自動的にサンクスページ(ここで言う「http://xxxxxxxxxx.com/thanks/」というURLのページ)に飛ぶようになりました。

DOMイベントによるサンクスページの設置方法

まず、テーマ内のfooter.phpというテンプレートファイルに下記のような形でDOMイベントを利用するためのコードを追記します。

footer.php

<?php if( is_page('contact') ) { ?>
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxxxxxxxxx.com/thanks/';
  }, false );
</script>
<?php } ?>

「contact」となっているところはフォームが設置されている固定ページのスラッグです。

「location」のところに記述されているURLはサンクスページのものです(フルパスで記入してください)。

複数の固定ページにフォームを設置している場合は、下記のようになります。

footer.php

<?php if( is_page('contact') || is_page('inquiry') || is_page('privacy') ) { ?>
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxxxxxxxxx.com/thanks/';
  }, false );
</script>
<?php } ?>

上記は、それぞれ「contact」「inquiry」「privacy」というスラッグのついた3つの固定ページにフォームを設置している場合の記述例です。

もしそれぞれのフォームごとにサンクスページを分けたい場合には下記のようになります。

footer.php

<?php if( is_page('contact') ) { ?>
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxxxxxxxxx.com/contact-thanks/';
  }, false );
</script>
<?php } else if( is_page('inquiry') ) { ?>
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxxxxxxxxx.com/inquiry-thanks/';
  }, false );
</script>
<?php } else if( is_page('privacy') ) { ?>
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxxxxxxxxx.com/privacy-thanks/';
  }, false );
</script>
<?php } else { ?>
<?php } ?>

送信完了メッセージを非表示にする

最後に、Contact Form 7で送信完了したときに表示される「ありがとうございます。メッセージは送信されました。」というメッセージを非表示にしておきます。

これは必要ないと言えば必要ないのですが、フォームから送信完了してサンクスページに遷移する際に、一瞬だけこのメッセージが見えてしまうためです。

テーマのCSSに以下のように追記します。

CSS

.wpcf7-mail-sent-ok {
  display: none !important;
}

まとめ

以上が、Contact Form 7 の使い方とサンクスページの設置方法です。

ウェブサイトにコンタクトフォームを設置する機会は多いと思いますが、Contact Form 7 を利用すれば内容の違うフォームをいくつも簡単に作成できます。

しかも一つ作ってしまえば、あとは複製して使い回せますのでとても便利です。是非使ってみてください。

WordPressプラグイン『UpdraftPlus』でウェ...

Breadcrumb NavXTの設定と非推奨の機能をCSS...