ご存じのように、デフォルト設定の Contact Form 7 はフォーム送信後にそのフォームの URL と同じ URL にリダイレクトします。ところが、非常にまれなケースですが、これを変更して送信後に異なる URL に対してリダイレクトさせるようにする必要が生じるかもしれません。ここでは、そのような動作を実現するための Contact Form 7 の設定方法について説明します。

ところで、いわゆる「サンキューページ」にリダイレクトさせるにはどうしたらいいかという質問がよくユーザーから送られてきます。彼らは Google Analytics でフォーム送信をトラッキングするために「サンキューページ」へのリダイレクトが必要なのだと思い込んでいて、そのためにそのような質問をしていることがほとんどです。そんなのは全然必要ありません。時代遅れの無意味な慣習といっていいと思います。実際、リダイレクトなどしなくても Google Analytics でフォーム送信をトラッキングできるのですから。

そうじゃない? 他の理由があって異なる URL にリダイレクトさせたいのですか? そうですか。それは失礼しました。それではその方法をお見せします。

一番簡単な方法は on_sent_ok の JavaScript アクションフックを使うことです。このフックを使うと、フォームが正常に送信されたときに実行させたい JavaScript のコードを指定することができます。コンタクトフォームの管理ページの下の方にその他の設定の項目があるので、そこに次のコードを挿入してください:

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

説明するまでもないと思いますが、http://example.com/ のところはリダイレクトさせたい URL に置き換える必要があります。

以上です。簡単でしょ? 試して動くかどうかチェックしてみてください。

もしこれが動かないなら、Ajax が正常に機能しているか確認してください。JavaScript のフックを使用していますから動作には JavaScript が必要です。JavaScript が使えない環境でリダイレクトが必要な場合はまた別なハックが必要になるでしょう。

定数を定義するのに最も適した場所は wp-config.php ファイルです。define('XXX', 'xxx'); のような定数を定義している行がすでに多数あるのに気づくでしょう。それらの行の後にさらに行を追加することができます。なお、最後の行より後ろに追加すると機能しませんので、それより前に追加してください。

例 (wp-config.php):

define ('WPLANG', '');

define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

/* That's all, stop editing! Happy blogging. */

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

以下、各種定数について説明します。

参照:

• 必要な場合だけ JavaScript とスタイルシートをロードさせるには
• 管理パネルへのアクセスを制限するには
• パイプを使って送信先を選択可能に
• CAPTCHA
• ファイルのアップロードとメール添付

[_post_*] タグはコンタクトフォームが投稿またはページの本文中に設置されている場合にのみ値を持つので注意してください。サイドバーウィジェットの中に設置されたコンタクトフォームでは利用できません。

これらの特別なメールタグの形式は Contact Form 7 2.2 で変更されました。古い形式 ([wpcf7.*]) も引き続きサポートされるのでそのままで機能します。

Contact Form 7 を他の言語で使う

Contact Form 7 の管理パネルの言語を変更するには WPLANG 定数に値を指定します。wp-config.php ファイルに WPLANG 定数を定義している行があるので、それを編集します。例えば、日本語 (ロケールコードは ‘ja‘) に変更するなら以下のように定義します:

define ('WPLANG', 'ja');

これで管理パネルに日本語の説明が表示されるようになります。ただし、これは既存のコンタクトフォームが日本語で機能するようになるという意味ではないので注意してください。

他の言語でコンタクトフォームを作成する

同梱されている翻訳を使って、他の言語のコンタクトフォームをとても簡単に作成することができます。新規作成 のリンクをクリックしたら、あとはドロップダウンメニューから言語を選択するだけです。

例えば、もしあなたが英語と日本語のお問い合わせページを備えた多言語ブログを運営しているなら、コンタクトフォームを2つ作成して、英語のコンタクトフォームを英語のお問い合わせページに、日本語のコンタクトフォームを日本語のお問い合わせページに、それぞれ設置するとよいでしょう。

新しい翻訳をお持ちですか?

もし新しい言語の翻訳の作成や既存の翻訳のアップデートなどされましたら、gettext の PO、MO ファイルを私まで送ってください。Contact Form 7 に同梱できます。最新の POT ファイルはこちらからダウンロード可能です。

こういったコンタクトフォームは、Contact Form 7 の基本的な機能を使っても実現することは可能でした。まずドロップダウンメニューかラジオボタンを設置して(つまり次のようなフォームタグをフォームのテンプレート内に挿入するわけですが):

[select your-recipient "ceo@example.com"
                    "sales@example.com"
                    "support@example.com"]

次にこれに対応するメールタグ [your-recipient] を 宛先: の項目に入力します。こうすることでメールは送信者が選んだアドレスに送信されることになります。

ところが、これには問題がありまして、この方法を用いた場合、選択するメールアドレスがインターネットに公開されることになり、簡単にスパムのターゲットにされてしまうという好ましくない事態を招いてしまいます。

というような事情で、データは公開したくないがそのデータを選択対象としては使いたいというニーズを安全に満たす必要が出てきたわけですが、パイプ (‘|’) のサポートはまさにこの目的のためにあるのです。

先述のドロップダウンメニューのタグを次のように変更しましょう:

[select your-recipient "CEO|ceo@example.com"
                    "Sales|sales@example.com"
                    "Support|support@example.com"]

オプションの値の中でパイプ文字 (‘|’) が使われている場合、外部に公開されるのはパイプより前の部分だけになり、一方メールの中で使われるのはパイプより後の部分になります。

パイプをこの機能で使うことができるのはドロップダウンメニュー、ラジオボタン、チェックボックスの場合に限られます。もしこの機能が好きにはなれなくて無効にしたい場合は、WPCF7_USE_PIPE 定数を false として定義すればそうなります。

この応答メッセージはデフォルトではフォームの最下部に表示されます。この場所を、応答メッセージのためのプレースホルダー [response] を設置することで変更が可能です。この [response] タグをフォーム内の好きな位置に置いてください。複数設置することもできます。これで応答メッセージはフォーム送信後にこのプレースホルダーの位置に表示されるようになります。

デモ

注意: これはデモです。このフォームが実際にメールを送信することはありません。

上のフォームのソース:

[response]

Your Name (required)
[text* your-name]

Subject
[text your-subject]

Your Message
[textarea your-message]

[response]

[submit "Send"]

_trackPageview()

正常にセットアップされていれば、Contact Form 7 のコンタクトフォームは Ajax アプリケーションとしてふるまい、フォーム送信はひとつの Ajax イベントになります。Google Analytics の _trackPageview() JavaScript 関数は実際のページビューやページリダイレクトの発生を伴わない Ajax イベントをトラッキングすることが可能です。

例として次のような場合を考えてみましょう。ページトラッカーオブジェクトの名前が pageTracker だとして、そしてフォーム送信を仮想 URL /mysite/thank-you.html への仮想ページビューとしてトラッキングしたいとします。これを実現するために、次の JavaScript コードを送信イベント発生時に実行する必要があるでしょう。

pageTracker._trackPageview('/mysite/thank-you.html');

ここで /mysite/thank-you.html が実在の URL である必要はないことに注意してください。この値は何でもよく、これが Analytics のレポートにページのファイル名として表示されます。

on_sent_ok アクションフックを使う

_trackPageview() を実行させるのに JavaScript のファイルを編集する必要はありません。Contact Form 7 では on_sent_ok という JavaScript アクションフックを用意していて、これを使って、フォーム送信が正常終了した後で実行したい JavaScript のコードを指定することができるのです。

on_sent_ok のフックで _trackPageview() を実行するのは非常に簡単です。コンタクトフォームの管理ページの一番下に「その他の設定」の項目があるので、そこに以下の行を挿入するだけで OK です。

on_sent_ok: "pageTracker._trackPageview('/mysite/thank-you.html');"

適切にコードを引用符で囲んでください。また、コードは1行に収まっている必要があります。

これで、すべて正しく設定できていればですが、誰かがあなたのコンタクトフォームから送信したときに、Google Analytics がそれを /mysite/thank-you.html へのアクセスとしてトラッキングするようになります。

これが正常に行われていることを確認するには、送信があった 24-48 時間後に Top Content レポートをチェックしてみてください。割り当てられたページ名 (/mysite/thank-you.html) がレポートに見られるはずです。

どうですか? あなたのサイトにあるコンタクトフォームと同じように動きましたか? 動き方が違うのに驚いた方もいるかもしれません。「私のフォームのエラーメッセージはこんな風にいい感じのポップアップで表示されないぞ。」「私のは送信のときにいつもページをリロードするけど、このフォームはそうじゃない。」そんな風に思いませんでしたか?

もしあなたのフォームがこのデモフォームのように動かないなら、Contact Form 7 の JavaScript があなたのサイトで機能していない可能性があります。いくつか考えられる原因を説明しましょう。

• JavaScript のファイルがロードされていない

  これは近頃もっともよく見られる原因です。これは、JavaScript をキューに入れるのに必要な関数呼び出しが抜けている、間違ったテンプレートを使っているせいで発生します。必要な関数とは wp_head() と wp_footer() で、大抵の正常なテーマではこれらはそれぞれ header.php と footer.php に見られるはずです。

• 他の JavaScript とのコンフリクト

  多くのプラグインやテーマでは独自の JavaScript の呼び出しが行われます。それらがまれに間違って作成されていることがあり、結果的に他のプラグインとコンフリクトします。こうしたケースでは多くの場合、Firefox のアドオン Firebug を使って、コンフリクトが発生したときの JavaScript のエラーを検出することができます。

• HTML の構造が正しくない

  他の JavaScript もだいたいそうですが、Contact Form 7 の JavaScript は HTML の構造の上をたどりまた書き換えを行います。ですから、元の HTML の構造が正しくなければ、うまく機能できないのです。HTML バリデーターを使えばあなたの HTML が正しいかそうでないかをチェックできます。多種ありますが、ここでは XHTML-CSS Validator をお薦めしておきます。

ステップ 1: すべてのページで JavaScript と CSS スタイルシートをロードしないようにする

定数 WPCF7_LOAD_JS の値が false の場合(デフォルト値は true)、Contact Form 7 は JavaScript のロードを行いません。次のように wp-config.php のなかでこの定数に値を設定するとよいでしょう:

define ('WPCF7_LOAD_JS', false);

同様に、CSS スタイルシートのロードは WPCF7_LOAD_CSS で制御できます。定数 WPCF7_LOAD_CSS の値が false の場合(デフォルト値は true)、Contact Form 7 は CSS スタイルシートのロードを行いません。次のように wp-config.php のなかでこの定数に値を設定するとよいでしょう:

define('WPCF7_LOAD_CSS', false);

これで JavaScript と CSS スタイルシートのロードを抑止することができました。が、残念なことに、これによってコンタクトフォームを含んでいるページでのロードまで一緒に殺してしまいました。次のステップでは JavaScript と CSS スタイルシートのロードを必要とするページにおいて明示的にファイルのロードを指定します。

ステップ 2: コンタクトフォームを含んだページで JavaScript と CSS スタイルシートをロードする

例として、「お問い合わせ」という名前のページがあって、そのページが唯一コンタクトフォームを含んでいるというケースについて考えてみましょう。それから、「お問い合わせ」ページ専用に ‘contact.php’ というテンプレートファイルがテーマのフォルダに用意されているとしましょう。この「お問い合わせ」ページに限っては Contact Form 7 の JavaScript の CSS スタイルシートのロードを行う必要があるというわけです。

これをするためには、’contact.php’ テンプレートファイルを編集して、次の内容を挿入します:

<?php
	if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
		wpcf7_enqueue_scripts();
		wpcf7_enqueue_styles();
	}
?>

wpcf7_enqueue_scripts() と wpcf7_enqueue_styles() の呼び出しは wp_head() より前に行われる必要があることに注意してください。