はい、ごめんください。
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 ); ?>
来年になって慌てないよう、今から準備しておきたいですね。
それでは、ごめんください。