on_sent_ok タグは今後廃止に → プラグインで対応できる!

はい、ごめんください。
Contact Form 7 の on_sent_ok で送信後に異なる URL にリダイレクトすることがままある 0.01% のユーザーのひとり、コスギです。

フォームからメールを送信後、画面が切り替わって色々詰め込めちゃうのって良いですよね。Contact Form 7 に確認画面を設けるプラグイン(Contact Form 7 add confirm)も併用すれば、超日本人らしい仕様のできあがりです。ジャパネスクロマンですね。

そんな仕様をon_sent_ok で簡単に実装できていたのですが、今後廃止するよというお知らせが明確に公開されました。前から記載はあったので、お知らせを出さざるを得ない状況はお察し。

参考:on_sent_ok は廃止されます | Contact Form 7 [日本語]

Contact Form 7 が300万件以上使われているなら、0.01%の300人の半分くらいは制作会社に泣きつくことになるのかなあと、functions.php をいじるのがコワイという人も100人くらいいそうだなあと思ったので、その100人くらいの方のために書きました。

と言っても今の私は Google アナリティクスへのイベント送信のために使っています(/・ω・)/

on_sent_ok に書かれているコードを確認しよう

特定のURLに移動させたい場合

今までは、

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

のように、Contact Form 7の設定に入れておけばよかったのですが、on_sent_ok の廃止に伴い、このままでは稼働しなくなります。

そこで、</body>の直前に

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	location = 'http://example.com/';
}, false );
</script>

というコードを入れることになります。http://example.com/の部分が、移動させたいURLですね。

Google アナリティクスのイベントをトラッキングしたい場合

問い合わせなどがあったことを、Google アナリティクスの目標設定にしておく場合、イベントトラッキングが必要です。

今までは、

on_sent_ok: "ga( 'send', 'event', 'Contact Form', 'submit' );"

のように、Contact Form 7の設定に入れておけばよかったのですが、on_sent_ok の廃止に伴い、このままでは稼働しなくなります。

そこで、</body>の直前に

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>

というコードを入れることになります。ga( 'send', 'event', 'Contact Form', 'submit' );の部分が、移動させたいURLですね。

まずは、どの部分を引き継げば良いのかを押さえておきましょう。

プラグインを使えば怖くない!

</body>の直前って、どうしたら……プログラムいじるのコワイ……!」とお思いの方もいるかもしれません(この記事はそもそもそのような方に向けて書いたものです)。

そこで、</body>の直前にコードを入れられるプラグインが AddFunc Head & Footer Code です。

参考:AddFunc Head & Footer Code — WordPress プラグイン

公式プラグインなので、他のプラグインと同様にインストールして使ってください。他に Add to All もありますが、更新頻度とインストール数で上記をメインに選んだだけなので、お好きなものをお選びください。

AddFunc Head & Footer Code は、ヘッダ部分とフッタ部分にコードを挿入できるプラグインです。全ページ一括で設定することも、特定の固定ページでのみ設定することもできます。フォームが1つではない場合に重宝します。

とはいえ、Contact Form 7 は問い合わせフォームのIDを設定してやれば複数フォームに対応できるので、各ページにコードを入れるか、一括で入れたコード内でフォームを判断させるか、管理しやすい方を選んでください。

以下、AddFunc Head & Footer Code を使って、お問い合わせページにのみコードを入れる方法をご紹介します。

コードを入れてみよう

お問い合わせページ http://example.com/contact/お問い合わせサンクスページ http://example.com/thanks/があるという前提で進めます。

AddFunc Head & Footer Code をインストールして有効化すると

プラグインを有効化して固定ページの編集画面を見ると、画面下部に「Head & Footer Code」というボックスができています。

今回は、2つめの入力欄(Footer)を使用します。入力欄の高さが狭いなと思ったら、右下の斜線部分をドラッグすると、縦に伸びてくれますよ。

特定のURLに遷移させる場合

入力欄(Footer)に、以下のコードをコピペしましょう。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	location = 'http://example.com/thanks/';
}, false );
</script>

「Replace Site-wide Footer Code」は、「サイト全体のフッターコードを書き換える」という意味なので、チェックしないでおきましょう

タグの閉じ忘れなどに気をつけて編集内容を保存(更新)したら、実際に問い合わせテストを行ない、http://example.com/thanks/ に遷移すれば実装完了です。

もちろん http://example.com/thanks/ の部分は任意の遷移先に変更しておき、目的のページに遷移するかの確認も行ってくださいね。

Google アナリティクスのイベントをトラッキングしたい場合

入力欄(Footer)に、以下のコードをコピペしましょう。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>

URL同様「Replace Site-wide Footer Code」は、「サイト全体のフッターコードを書き換える」という意味なので、チェックしないでおきましょう

タグの閉じ忘れなどに気をつけて編集内容を保存(更新)したら、実際に問い合わせテストを行なってください。Google アナリティクスの目標設定方法は省きますが、シークレットモードでテストし、リアルタイムでイベントを確認してみると良いでしょう。

なお、上記の Google アナリティクスのコードはそのまま使えます。以下のページも参考にどうぞ。

参考:イベント トラッキング  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

まとめ

on_sent_ok が使いたいからアップデートはしない、なんてことは愚の骨頂なので、上記の方法で対応しましょう。

もちろん、functions.php で wp_footer にフックする方法もあります。テーマをカスタマイズしてプラグインは少なくしたいという方は、こちらの方法がオススメ。特定のフォームのみに対応する方法も記載されているので、複数フォームを扱っている方もご覧ください。

参考:on_sent_ok は廃止されます | Contact Form 7 [日本語]

こんな感じで、フォームのID(以下では123)を設定するだけですね。

<?php
add_action( 'wp_footer', function () {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	if ( '123' == event.detail.contactFormId ) {
		ga( 'send', 'event', 'Contact Form', 'submit' );
	}
</script>
<?php
}, false );
?>

来年になって慌てないよう、今から準備しておきたいですね。

それでは、ごめんください。

1978年、新潟県南魚沼市生まれ、長岡市在住。夫と子ども2人をこよなく愛す。

教員養成課程を修了して教員免許を取得するも、民間企業に就職して12年近くウェブ制作に関わる。デザインから開発まで、制作業務をトータルでこなすオールラウンダー。

2013年4月には新潟県で初のウェブ解析士マスターになり、同年6月に起業、コスギスとして活動。心理学に基づいたコンテンツ分析と、SNSなども含めた幅広いウェブマーケティング、そしてWordPressでのサイト構築を得意とする。

ウェブ活用の人材を育てる「ウェブ解析士認定講座」や関連セミナーを新潟県内で唯一定期開催。WACAアワードにて 2016年 Best of Best を受賞。2017年 ペライチ公式 新潟県代表サポーター。

初心者向けのWordPressの勉強会(WordBench新潟・長岡藩)や、ホームページ勉強会を主催。セミナー講師としても活動中。