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

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

「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめてみました。

※以下で紹介している方法は、WordPress Ver3.5.1 と Contact Form 7 Ver3.4.1 で確認等行ったものです。

※フォーム使用時の説明として記述している[ ]のタグは、実際に使用するときは全角でなく半角で記述します。

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

  1. Contact Form 7について
  2. 使い方
  3. フォームをテンプレートで使用する
  4. Cc、Bccを使用する
  5. メッセージの表示場所を変更する
  6. HTML5対応を無効にする
  7. メール送信後にリダイレクトさせる
  8. メール送信後に表示を切り替える
  9. 自動返信の機能をつける
  10. ラジオボタンやセレクトボックスの値を送信時に変更する
  11. ページ毎にフォームを設置している場合などに便利なタグ
  12. 確認用メールアドレスの入力欄を追加する
  13. 郵便番号入力で自動的に住所出力される
  14. 画像認証を設置できるプラグイン「Really Simple CAPTCHA」
  15. 送信データをDB保存&管理画面で確認&CSVなどでダウンロードできる多機能プラグイン「Contact Form DB」

1. Contact Form 7について

Contact Form 7

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

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

目次へ

2. 使い方

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

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

Contact Form 7 - WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。

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

目次へ

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

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"]' ); ?>

※上記で記述している[ ]のタグは、実際に使用するときは全角でなく半角で記述します。

目次へ

4. Cc、Bccを使用する

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

目次へ

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

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

メッセージの表示位置を変更したい場合は、編集ページのフォーム内に[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>
メッセージの表示場所を変更する

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

目次へ

6. HTML5対応を無効にする

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

  • email
  • tel
  • url
  • number
  • range
  • date

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

functions.php

add_filter( 'wpcf7_support_html5', '__return_false' );

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

目次へ

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

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

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

赤文字の部分に送信後にリダイレクトしてほしいURLを記述してください。
上記を記述して確認すると、メール送信後に指定したURLへリダイレクトされるのを確認できます。

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

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

目次へ

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

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

<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;
}

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

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

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

目次へ

9. 自動返信の機能をつける

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

目次へ

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

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

// ラジオボタン
<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. ページ毎にフォームを設置している場合などに便利なタグ

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

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

  • [_remote_ip] : 送信者のIPアドレス
  • [_user_agent] : 送信者のユーザーエージェント情報
  • [_url] : コンタクトフォームのURL
  • [_date] : 送信された日付
  • [_time] : 送信された時刻
  • [_post_id] : フォームを含んだ投稿のID
  • [_post_name] : フォームを含んだ投稿の名前(スラッグ)
  • [_post_title] : フォームを含んだ投稿のタイトル
  • [_post_url] : フォームを含んだ投稿のパーマリンク
  • [_post_author] : フォームを含んだ投稿の作成者の名前
  • [_post_author_email] : フォームを含んだ投稿の作成者のメールアドレス

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

目次へ

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

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

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]

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

目次へ

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

確認用メールアドレスと同様によく見かける、郵便番号を入力すると自動的に住所出力がされる機能を実装する方法です。
この機能を実装するために「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桁のようにして入力欄をわけたりすることもできます。
ファイルをダウンロードするページにもこういった設定例が幾つか載っているので、そちらを参考にしてみてください。

目次へ

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

Really Simple CAPTCHA

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

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

画像認証

画像はこのブログの Contact ページでフォームの実装にはContact Form 7を使用しているのですが、このような画像認証の入力欄が表示されるようになります。
Akismetと合わせて実装しておけば、余程のことがない限りスパムはこなくなるかと思います。

目次へ

15. 送信データを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種類の中から選ぶことができます。

目次へ

以上、長くなりましたがContact Form 7の備忘録でした。
公式サイト見ればわかる内容も多いんですが、ど忘れした時に検索の手間省きたいとか極力ページ移動なくしたいとか思っていろいろ詰め込んだらかなり長くなってしまいました…。

国内だけでなく海外でも人気なプラグインですし、以前から便利なプラグインだということは十分わかっていましたが、今回こうやってまとめてみると手軽なだけでなく柔軟性にも非常に優れているプラグインだなと改めて実感しました。

Back to Top

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

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

/ WordPress

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。