DOM イベント

This page is also available in English.

Contact Form 7 は数種類のカスタム DOM イベントを提供します。これらのイベントを JavaScript コード内で使用することにより、特定の状況で関数を実行することが可能になります。

ここでは Contact Form 7 が提供する DOM イベント、どのような状況でそれらのイベントが発生するか、また、コードでの使い方について説明します。DOM のイベントモデルに関する一般的な説明は省きますので、よくわからない場合は外部の資料を参照してください:

Contact Form 7 のカスタム DOM イベント

  • wpcf7invalid — Ajax のフォーム送信が完了したが、正しくない入力があったためにメール送信は行われなかった場合に発生する。
  • wpcf7spam — Ajax のフォーム送信が完了したが、スパム行為の疑いがあったためにメール送信は行われなかった場合に発生する。
  • wpcf7mailsent — Ajax のフォーム送信が完了し、またメールの送信も行われた場合に発生する。
  • wpcf7mailfailed — Ajax のフォーム送信が完了したが、メールの送信には失敗した場合に発生する。
  • wpcf7submit — 他の条件に関係なく、Ajax のフォーム送信が完了した場合に発生する。

イベントハンドラーの実装

以下のコードはイベントハンドラーを登録する簡単な例です。この例では、関数は wpcf7submit イベントの通知を待ち、イベント発生時にはアラートを表示します。

var wpcf7Elm = document.querySelector( '.wpcf7' );

wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
	alert( "Fire!" );
}, false );

この例に見られるように、イベントハンドラー関数の登録には addEventListener() を使います。イベントターゲット (例中では wpcf7Elm) は form 要素ではなくその親にあたり wpcf7 クラスを持つ div 要素であることに注意してください。

wpcf7* イベントはいずれも DOM ツリーをドキュメントルートに向かってバブリングするので、特にイベントターゲットを指定する必要がない場合には document プロパティをイベントターゲットにすることで簡略化できます:

document.addEventListener( 'wpcf7submit', function( event ) {
	alert( "Fire!" );
}, false );

対象のコンタクトフォームへのユーザー入力データはイベントオブジェクトの detail.inputs プロパティとしてイベントハンドラーに渡されます。detail.inputs のデータ構造はオブジェクトの配列であり、また個々のオブジェクトは name と value のプロパティを持ちます。

次の例では “your-name” 入力項目へのユーザー入力値にアクセスしています:

document.addEventListener( 'wpcf7submit', function( event ) {
	var inputs = event.detail.inputs;

	for ( var i = 0; i < inputs.length; i++ ) {
		if ( 'your-name' == inputs[i].name ) {
			alert( inputs[i].value );
			break;
		}
	}
}, false );

このほかにもイベントハンドラーで利用できるイベントオブジェクトのプロパティがあります。

利用可能なイベントオブジェクトのプロパティ
プロパティ 説明
detail.contactFormId コンタクトフォームの ID。
detail.pluginVersion Contact Form 7 プラグインのバージョン。
detail.contactFormLocale コンタクトフォームのロケールコード。
detail.unitTag コンタクトフォームのユニットタグ。
detail.containerPostId コンタクトフォームが置かれている投稿の ID。

例えば、特定のコンタクトフォーム (ID=123) のみに対して何かしたい場合は、次のコードのように detail.contactFormId プロパティを使うとよいでしょう:

document.addEventListener( 'wpcf7submit', function( event ) {
	if ( '123' == event.detail.contactFormId ) {
		alert( "The contact form ID is 123." );
		// do something productive
	}
}, false );

関連項目

DOM イベントが機能しません。

WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。