DAINASHI YESTERDAY

2016.08.19

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

contactform7_00

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プラグインページからダウンロード&インストールしてください。

contactform7_02

Contact Form 7プラグインページ
contactform7_01

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

Contact Form 7の使い方

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

フォームの設置方法

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

contactform7_03

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

contactform7_04

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

contactform7_31

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

contactform7_33

contactform7_34

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

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

contactform7_35

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

contactform7_27

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

contactform7_30

Contact Form 7の設定

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

フォームの編集

contactform7_05

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

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

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

contactform7_06

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
Akismet
Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
メールアドレス

contactform7_07

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
Akismet
Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
URL

contactform7_08

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
Akismet
Akismetを使ってスパムをフィルタリングする場合はチェックを入れます。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
電話番号

contactform7_09

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
数値

contactform7_10

項目タイプ
スピンボックスかスライダーを選択できます。必須項目の場合はチェックを入れてください。
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
範囲
数値を指定できる範囲の上限と下限を入力します。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
日付

contactform7_11

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
範囲
日付を指定できる範囲の上限と下限を入力します。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
テキストエリア

contactform7_12

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
デフォルト値
デフォルトで表示したいテキストを入力。プレースホルダー(入力欄にあらかじめ表示しておくテキスト)として使用する場合は「このテキストを項目のプレースホルダーとして使用する」にチェック
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
ドロップダウンメニュー

contactform7_13

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
オプション

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

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

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

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

contactform7_14

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
オプション

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

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

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

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

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

contactform7_15

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

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

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

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

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

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

contactform7_16

名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
オプション
承諾確認のチェックボックスをデフォルトでチェックが入った状態にしたい場合は「このチェックボックスをデフォルトでチェックされた状態にする」にチェック、承諾確認チェックボックスのチェックを外さないと送信できないようにしたい場合は「これの挙動を反対にする」にチェックを入れる。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
クイズ

contactform7_17

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

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

  • 日本の首都は?|東京

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

  • 日本の首都は?|東京
  • カナダの首都は?|オタワ
  • スリランカの首都は?|スリジャヤワルダナプラコッテ
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
reCAPTCHA

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

contactform7_26-1

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

contactform7_18

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

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

Label
reCAPTCHAを設置するページの名前
Domains
reCAPTCHAを設置するドメイン

recaptcha_01

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

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

contactform7_22

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

contactform7_23

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

contactform7_24

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

contactform7_21

テーマ
「明るい」「暗い」の2パターンから選択できます。
サイズ
「ノーマル」「コンパクト」の2パターンから選択できます。
ID属性
reCAPTCHAが挿入されるdiv要素にID属性を付与したい場合に入力します。
クラス属性
reCAPTCHAが挿入されるdiv要素にクラス属性を付与したい場合に入力します。
ファイル

contactform7_19

項目タイプ
必須項目の場合はチェックを入れる
名前
フォーム編集画面に挿入するタグの名前として使用されます。通常は自動で挿入されるものをそのまま使えば問題ないです。
ファイルサイズの上限 (バイト)
添付可能なファイルサイズの上限を指定します。たとえば2MBを上限としたい場合は「2mb」または「2097152」と記入します。
受け入れ可能なファイル形式
添付可能なファイルの形式を指定する。たとえばJPGファイルなら「jpg」と記入する。複数のファイル形式を受け入れ可能にしたい場合は「gif|png|jpg|jpeg」のようにパイプ(|)でつなげる。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。
送信ボタン

contactform7_20

ラベル
ボタンに表示したいテキストを入力します。
ID属性
input要素にID属性を付与したい場合に入力します。
クラス属性
input要素にクラス属性を付与したい場合に入力します。

メールの設定

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

mail1-1-2

メール

mail1-2

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

ここは送信者のメールアドレスが入る箇所です。そのため、メールタグ()を入力すればいいと思いがちなのですが、そうすると構文エラーになったりスパムとして扱われる可能性が高くなります。また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)

mail2-1-2

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

mail2-2

送信先

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

例:[your-email]

送信元

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

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

題名

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

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

追加ヘッダー

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

例:Reply-To: xxxxxxxxxxxx@gmail.com

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

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

[file-104]

エラーメッセージの編集

message-1-2

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

message-2

その他の設定

contactform7_28-1

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

参考ページ:その他の設定 | Contact Form 7 [日本語]

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

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

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

contactform7_28-3

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

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

まとめ

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

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

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

投稿者: