on_sent_ok は廃止されます

追加設定 “on_sent_ok” はフォーム送信が完了しメールの送信にも成功した時に実行される JavaScript コードを割り当てるために使用されるものです。ウェブアナリティクスサービスでフォーム送信をトラッキングしたり、フォーム送信後に異なるページにリダイレクトさせる用途でよく使われます。

“on_sent_ok” とその兄弟設定 “on_submit” は非推奨となっており、2017年末までに廃止される予定です。これらの設定を使うことが即危険だということではないですが、万が一このプラグインやあるいはあなたのサイトの他の部分に脆弱性があった場合にリスクを増大させる可能性があります。より安全な代替方法に置き換えるべきです。

続報: on_sent_ok と on_submit は Contact Form 7 5.0 で正式に削除されました。

推奨される on_sent_ok の代替方法は DOM イベントの利用です。DOM イベントを使ってコーディングすることは on_sent_ok の使用と比較して大きな利点があります。Contact Form 7 のカスタム DOM イベントの詳細については解説ページを参照してください。

この投稿の後半では、on_sent_ok 設定を置き換える手順について例を用いながら説明していきます。

on_sent_ok を DOM イベントに置き換える

「その他の設定」タブに以下の設定行があると仮定しましょう:

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

この設定は、フォーム送信が完了しメールの送信にも成功した時に Google Analytics のトラッカーである ga() 関数を実行するよう Contact Form 7 に伝えるものです。

これを DOM イベントを使った代替コードに置き換えるには、まず、現在使われているテーマのディレクトリ内にある “functions.php” という名前のファイルを見つけます。次に、functions.php ファイルの末尾に次のコードを追加します:

add_action( 'wp_footer', 'mycustom_wp_footer' );

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

最後に、「その他の設定」タブから “on_sent_ok” の行を削除し、コンタクトフォームの保存を行います。

これで完了です。

特定のコンタクトフォームを対象にするには

コンタクトフォームが複数あってそのうちの特定のコンタクトフォームのみに対して関数を実行させたい場合には、次のコードのようにコンタクトフォームの ID を確認しましょう:

add_action( 'wp_footer', 'mycustom_wp_footer' );

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

このケースでは、ga() 関数の実行はコンタクトフォームの ID (event.detail.contactFormId) が “123” の場合に限って行われます。

コンタクトフォームの ID が何か知るには、contact-form-7 ショートコードの “id” 属性を探します。例えば、ショートコードが次のようであれば:

[contact-form-7 id="1234" title="Contact form 1"]

このコンタクトフォームの ID は “1234” です。

Contact Form 7