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 ７の設定に入れておけばよかったのですが、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 ７の設定に入れておけばよかったのですが、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 は、ヘッダ部分とフッタ部分にコードを挿入できるプラグインです。全ページ一括で設定することも、特定の固定ページでのみ設定することもできます。フォームが１つではない場合に重宝します。

とはいえ、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 );
?>

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

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