WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録

Contact Form 7について

フォームを作成する際、ほとんどの場合PHPなどのプログラミング知識が必要になってきます。
よほどの知識・技術がある人であれば容易に作ってしまうのかもしれませんが、ゼロからのフォーム作成は結構面倒ですし、知識がない人にとってはなかなか敷居が高いものだと思います。

「Contact Form 7」は、少しの操作で簡単にお問い合わせフォームを作成・設置できるプラグインで、WordPressを使用しているサイトであれば簡単に導入することができます。
また、簡単に導入できることだけでなく、スパムフィルタリングやファイルアップロードなどの機能もひと通り揃っていたり、デザインの変更も簡単にできるのも特徴です。

使い方

1. 管理画面のプラグインから「Contact Form 7」を検索してインストール、もしくは「Contact Form 7」からファイルをダウンロードして環境にアップロード。
2. 有効化するとメニューに「お問い合わせ」という項目が追加され、そこでフォームの作成や設定が行えます。
3. フォームを作成すると[contact-form-7 id="0000" title="Form Name"]のようなコードが表示されます。
   フォームには任意で名前を付けることができるので、複数使用したい場合などは名前を変更しておくことでわかりやすく管理することができます。 あとは表示させたいところにこのコードを記述するだけでフォームを設置することができます。

デフォルトでは「お名前 (必須)」「メールアドレス (必須)」「題名」「メッセージ本文」の4項目があらかじめ作成されており、簡易的なフォームであればそのまま使用することができます。
入力項目を追加するなどのちょっとしたことであれば特に難しくもなく直感的に操作できるとは思いますが、それぞれの項目の基本的な使い方や設定方法を具体的に知りたい場合は下記サイトで確認できます。

使用方法だけでなくTipsやFAQなどもあるので、カスタマイズしたい方や使っていてわからない部分があるという方も、一度目を通してみると目的の情報が解決方法が見つかるかもしれません。

フォームをテンプレートで使用する

Contact Form 7を使用する際は[contact-form-7 id="0000" title="Form Name"]というようなショートコードを記述しますが、テンプレートファイルに記述する場合はショートコードのままでは表示されません。
テンプレートファイルでフォームを使用したい場合、do_shortcode()を使用することで表示させることができます。

例えばidが「1」、フォーム名が「example form」の場合は、下記のように記述することでテンプレートファイルでもフォームが使用できます。

<?php echo do_shortcode( '[contact-form-7 id="1" title="example form"]' ); ?>

Cc、Bccを使用する

Cc、Bccを追加したい場合は編集ページのメールにある「追加ヘッダー」という項目を使用して追加することができます。
それぞれ指定したいメールアドレスを下記のような形で記述します。

Cc: xxx@example.com

Bcc: xxx@example.com

また、複数の宛先を指定したい場合は下記のように「,」で区切ることで設定できます。

Cc: xxx@example.com, xxx02@example.com, xxx03@example.com

Bcc: xxx@example.com, xxx02@example.com, xxx03@example.com

メッセージの表示場所を変更する

デフォルトでは、入力に不備がある場合に表示される「入力内容に不備があります。確認してもう一度送信してください。」や送信後に表示される「あなたのメッセージは送信されました。ありがとうございました。」などのメッセージが送信ボタンの下の方に表示されます。
これを任意の場所で表示させるようにする方法です。

メッセージの表示位置を変更したい場合は、編集ページのフォーム内に[response]というコードを記述します。
複数設置することもでき、フォームの上部と下部といったように2箇所で表示させたい場合はそれぞれの箇所に[response]を記述します。

例えば、デフォルトで設定されているフォームでメッセージが上部に表示されるようにしたい場合は、下記のように記述します。

[response]

<p>お名前 (必須)<br />[text* your-name] </p>
<p>メールアドレス (必須)<br />[email* your-email] </p>
<p>題名<br />[text your-subject] </p>
<p>メッセージ本文<br />[textarea your-message] </p>
<p>[submit "送信"]</p>

設定後に確認をすると、画像のようにフォーム上部にメッセージが表示されるようになります。

HTML5対応を無効にする

Contact Form 7のVer 3.4以上からHTML5の入力タイプをサポートするようになり、以下のタグが使用されるようになりました。

よく使われているものでいうと、今までメールアドレスの入力はinput="text"が使用されていたのですが、Ver 3.4からメールアドレスの入力はtype="email"を使用するように変更されています。
HTML5を使用しているサイトもどんどん増えているし個人的には良い事だと思うのですが、中には「勝手にHTML5を使用されては困る」という場合もあるかもしれません。
そんなときはfunctions.phpに下記を追加することでこれらの機能を無効化することができます。

add_filter( 'wpcf7_support_html5', '__return_false' );

上記を記述すると、先程メールアドレスの入力でtype="email"になっていたのがinput="text"に変更されていたりと、HTML5が無効化されたことが確認できます。

メール送信後にリダイレクトさせる

フォームの内容が送信されるとトップページにリダイレクトされたりだとか、「お問い合わせありがとうございました」などと書かれたサンクスページへリダイレクトされたりするフォームをよく見かけると思いますが、Contact Form 7はメールを送信したらメッセージが表示されるのみで画面推移はありません。
メールが送信されたら別のページへ画面推移するようにしたい場合は、編集ページ下部にある「その他の設定」部分に下記を記述します。

on_sent_ok: "location = 'http://example.com/';"

サンプルコード内でhttp://example.com/としている箇所へ送信後にリダイレクトしてほしいURLを記述してください。
上記を記述して確認すると、メール送信後に指定したURLへリダイレクトされるのを確認できます。

Google Analyticsを使用するためにリダイレクトを取り入れようとしている場合

上記方法でメール送信後に指定したページヘリダイレクトされるようになりますが、理由がGoogle Analyticsの測定の為だけである場合はわざわざリダイレクトさせなくても測定することができ、下記でその方法が紹介されています。

メール送信後に表示を切り替える

先ほどはメール送信後に別ページへ推移させる方法でしたが、こちらは同ページで送信前後の表示を切り替える方法です。
今回はサンプルとしてデフォルトのフォームをそのまま使用し、まずフォームの編集画面で下記のハイライト部分をそれぞれ追記します。

<div class="form-inner"><p>お名前 (必須)<br />[text* your-name] </p>
<p>メールアドレス (必須)<br />[email* your-email] </p>
<p>題名<br />[text your-subject] </p>
<p>メッセージ本文<br />[textarea your-message] </p>
<p>[submit "送信"]</p>
</div>
<div class="comp">ここに送信後に表示させたいものを入れる。</div>

具体的にはフォームの先頭から送信ボタンまでをまずひとつのdivで括り、それとは別に送信後に表示させたいものを括るdivも記述します。
次にCSSに下記のようなスタイルを記述します。

.wpcf7-form .comp,
.wpcf7-form.sent .form-inner {
  display: none;
}
.wpcf7-form.sent .comp {
  display: block;
}

まず、送信後に表示させたいものを括っている.compを非表示にしておきます。
次に、送信が完了すると.wpcf7-formに.sentというclassが付加されるのを利用して.form-innerを非表示するように指定し、逆に非表示にしていた.compを表示させます。
これでメール送信後にフォームが消えて、.comp内に記述した内容が表示されるようになります。

上記方法でフォームを非表示にすることはできますが、正常に送信されたときのメッセージ（デフォルトでは「あなたのメッセージは送信されました。ありがとうございました。」という文字列）がそのまま出てきます。
もし、このメッセージも必要ないということであれば、CSSに下記も追記することで非表示にできます。

/* メッセージがいらない場合に記述 */
.wpcf7-form.sent .wpcf7-mail-sent-ok {
  display: none !important;
}

自動返信の機能をつける

よく見かける自分が送った情報が送信確認として送られてくる自動返信の機能を実装する方法です。
自動返信の設定方法は非常に簡単で、フォーム編集にある「メール（2）」を使用します。
「メール（2）を使う」というチェックボックスにチェックを入れると「メール」と同じようにいろいろと項目が出てくるので、宛先の部分を[your-email]と設定すれば自動返信として送信者にメールが届くようになります。

ラジオボタンやセレクトボックスの値を送信時に変更する

具体的にどんなとき使うか思いつきませんが、一応覚えておきたいと思ったのでメモ。

// ラジオボタン
<p>[radio radio-xxx "radio01" "radio02" "radio03"]</p>

// チェックボックス
<p>[checkbox checkbox-xxx "check01" "check02" "check03"]</p>

ラジオボタンやセレクトボックスを設置しようとすると上記のような記述になり、実際にフォームを使用しても、もちろん選択されたradio01やcheck01という値が指定した宛先へ送信されるかと思います。
これを下記のように変更することで、送信時に別の値にして送信されるようにします。

// ラジオボタン
<p>[radio radio-xxx "radio01|radio-a" "radio02|radio-b" "radio03|radio-c"]</p>

// チェックボックス
<p>[checkbox checkbox-xxx "check01|check-a" "check02|check-b" "check03|check-c"]</p>

|で区切って変更したい値をそれぞれ記述していき、こうすることで|より前に指定したものが表画面で表示されるもので、|より後に指定したものが実際に送信される挙動になります。

送信ボタンが押されたタイミングで変わっているのかなど具体的にどのタイミングで値が切り替わっているかは正直わからないのですが、表示上はもちろんソース上でもこの値をユーザーは見れないので、例えば何かの理由で見られたくないような値を設定したいときも気にすることなく指定できます。

ページ毎にフォームを設置している場合などに便利なタグ

例えば、商品情報を多数掲載且つ各商品ページにはフォームがそれぞれに設置してあり、その商品に関してフォームを使用してすぐに問い合わせができるようにしているサイトがあったとします。
多数あるページの中で、このお問い合わせはどの商品ページから送られたのかなどの情報を知りたいときに便利なタグです。

タグは全部で11種類あり、それぞれ下記のような情報を扱うことができます。

先ほどの例でいうと、[_post_title]でタイトル、[_post_url]でURLをそれぞれ取得できるので、あとは管理者宛のメールテンプレートに情報が届くように設定をすれば、そのお問い合わせがどのページから送られたかというのを確認することができます。

確認用メールアドレスの入力欄を追加する

入力ミスを防ぐためによく使用される、二度メールアドレスを入力させる機能を実装する方法です。
まず下記をfunctions.phpに記述します。

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );

function wpcf7_text_validation_filter_extend( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        $result['valid'] = false;
        $result['reason'][$name] = 'メールアドレスが一致しません';
      }
    }
  }
  return $result;
}

次にフォームの編集画面で確認用メールアドレスを設置したい箇所に下記を記述します。

[email* your-email_confirm]

それぞれ記述して確認をすると、確認用メールアドレスの入力欄が追加されており、メールアドレスが一致しない場合はエラーメッセージが表示されるようになります。

郵便番号入力で自動的に住所出力される

確認用メールアドレスと同様によく見かける、郵便番号を入力すると自動的に住所出力がされる機能を実装する方法です。
この機能を実装するために「ajaxzip3」というJSライブラリを使用する必要があるので、「ajaxzip3」から必要なファイルをダウンロード、もしくはGoogle Codeを使用して読み込ませます。
ちなみに、httpの場合とhttpsの場合では使用するファイルが違うので、導入する環境に合わせたものを使用してください。
今回はhttpでGoogle Codeを使用する場合の方法で紹介していきます。

まず下記をhead内に記述します。

<script type="text/javascript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('#zip').keyup(function(event){
      AjaxZip3.zip2addr(this, '', 'state', 'address');
    })
  })
</script>

ファイルの読み込み先やセレクタ指定部分は、自身の環境などに合わせて変更するようにして下さい。 　 今回は郵便番号をzip、都道府県をstate、市区町村をaddressとして指定しています。 次にフォーム編集で先ほどのJSで記述したidに合わせて入力欄を作成します。

<p>郵便番号<br />[text zip id:zip]</p>
<p>都道府県<br />[text state id:state]</p>
<p>市区町村<br />[text address id:address]</p>

ここまで記述して確認すると、郵便番号を入力したタイミングで都道府県と市区町村が自動的に出力されるようになっているのを確認できます。
今回は都道府県と市区町村を別々に出力するようにしていますが、都道府県と市区町村を同じ入力欄に出力されるようにしたり、郵便番号を3桁-4桁のようにして入力欄をわけたりすることもできます。
ファイルをダウンロードするページにもこういった設定例が幾つか載っているので、そちらを参考にしてみてください。

画像認証を設置できるプラグイン「Really Simple CAPTCHA」

Contact Form 7はそのままでも十分便利なプラグインですが、さらに便利にする拡張プラグインが幾つかあります。
その中のひとつが「Really Simple CAPTCHA」で、英数字をランダムで表示させた画像認証を実装することができ、Akismetと同様にスパム防止に役立つプラグインです。

使い方も非常に簡単で、まず管理画面のプラグインから「Really Simple CAPTCHA」を検索してインストール、もしくは「Really Simple CAPTCHA」からファイルをダウンロードして環境にアップロード後に有効化します。
あとはフォーム編集画面の「タグの作成」内にCAPTCHAという項目があるので選択し、他のものと同様に名前やIDなどを設定して配置するだけで実装ができます。

実装後はイメージのような形で設置され、Akismetと合わせて実装しておけば、余程のことがない限りスパムはこなくなるかと思います。

送信データをDB保存&管理画面で確認&CSVなどでダウンロードできる多機能プラグイン「Contact Form DB」

「Contact Form DB」は「Really Simple CAPTCHA」と同様にContact Form 7を更に便利にする拡張プラグインで、送信されたデータをデータベースに保存、管理画面で内容の確認、CSVなどの任意の形式でダウンロードなどが可能です。
ちなみに「Contact Form DB」はContact form 7専用のプラグインというわけではなく、「Fast Secure Contact Form」や「JetPack Contact Form」など他のフォーム実装プラグインでも使用できるようです。

こちらも使い方は簡単で、管理画面のプラグインから「Contact Form DB」を検索してインストール、もしくは「Contact Form DB」からファイルをダウンロードして環境にアップロード後に有効化するだけで使用できます。

このプラグインはただデータを集めるだけでなく、そのデータを表示させたりといったことも可能なので、例えばサイト上で行なっているアンケート結果などをリアルタイムで集計して表示なんてこともできるそうです。
また、オプションも幾つか用意されており、データベースに保存しないフィールドの指定をしたり、データの閲覧や編集可能な権限の設定といったこともできます。

イメージはプラグインのスクリーンショットを引用しているものですが、送信されたデータは管理画面で画像のような感じで確認することができます。
イメージで「AAAAAA」とか「BBBBBB」とかなっているところはデフォルトのフォームを使用している場合だと「your-name」とか「your-email」に変更されており、それぞれ送信されてきた情報が表示されます。

必要ないデータの削除も簡単で、左のチェックボックスにチェックを入れて「削除」のボタンを押すか、ページ右上に「このフォームの全ての記録を削除する」ボタンで削除できますが、逆に考えると簡単に消えてしまうということでもあるので扱いには注意してください。

保存されたデータをダウンロードしたいときは、上部にある「Excel Internet jQuery」という部分で出力方法を選択して、その横の「出力」ボタンを押すだけでダウンロードできます。
形式もいくつか用意されており、CSV、Excel CSV、Google スプレッドシート、HTMLなど9種類の中から選ぶことができます。