Contact Form 7に確認フェーズを

Contact Form 7に確認フェーズを - jQueryで疑似確認ページ

説明

Contact Form 7はWordPressによるサイト製作でお世話になることが多いプラグインの1つ。ただ、クライアント様によっては、入力、確認、送信の3フェーズにしたいという要望があり、そんな時は別の方法を採用していたのですが、JavaScript(jQuery)を使ってページ遷移しなくてもいいなら確認フェーズは用意できるかなと思い、作り込んでみた。
きっかけはコメントフォーム

今回の対応を行う少し前、WordPress標準のコメント投稿フォームで同様のことを試した。さくさくコメントできる方がいいとも思うのだが、操作ミスなどによるコメント投稿を防ぎたかったのが主な目的で、比較的容易に対応することができていた。今回このことを思い立ったのは、この前提があったからだ。
概要の説明の前に、今回の対応の範囲などについて簡単に触れておく。検証環境は、WordPress 3.2.13.5日本語版、Contact Form 7バージョン3.0.13.3.2になり、jQuery 1.7.11.8.3を使用している。Contact Form 7はいくつかのフォーム用タグをサポートしているが、対応したのはテキスト項目、メールアドレス項目、テキストエリア、ドロップダウン・メニュー、チェックボックス、ラジオボタンとなる。それ以外のタグについては確認していないので、ご了承願いたい。

対応概要

まずはJavaScriptのソースコードを紹介する。

var SUBMIT_NAME = '送信';
var CONFIRM_NAME = '確認';
var MODIFY_NAME = '修正';
var SELECT_EMPTY_LABEL = '---';
var SELECT_EMPTY_VALUE = '---';
var MODIFY_BUTTON_ID = 'wpcf7-modify';
var ALERT_MESSAGE_CLASS = 'wpcf7-not-valid-tip';
var EMPTY_MESSAGE = '必須項目に記入もれがあります。';
var INVALIDE_EMAIL_MESSAGE = 'メールアドレスの形式が正しくないようです。';
var DISABLE_SELECT_COLOR = 'color:#000000';

( function($) {
$(document).ready( function () {
	$('select.wpcf7-validates-as-required').each( function () {
		if ( $(this).find( 'option:first' ).text() == SELECT_EMPTY_LABEL ) SELECT_EMPTY_VALUE = $(this).val();
	} );
	$('.wpcf7-form-control-wrap').mouseover( function () {
		$(this).find( '.wpcf7-not-valid-tip:visible' ).fadeOut();
	} );
	if ( $('.wpcf7-submit').val() == SUBMIT_NAME ) {
		$('.wpcf7-submit').val( CONFIRM_NAME );
		$('.wpcf7-form').submit( function () {
			if ( $('.wpcf7-submit').val() == CONFIRM_NAME ) {
				$(this).fadeOut('fast', function () {
					$('span.'+ALERT_MESSAGE_CLASS).remove();
					var validate = true;
					$('input.wpcf7-validates-as-required, textarea.wpcf7-validates-as-required').each( function () {
						if ( jQuery.trim( $(this).val() ) == '' ) {
							br = $(this).get(0).tagName.match( /textarea/i )? '<br />': '';
							$(this).after( '<span class="'+ALERT_MESSAGE_CLASS+'">'+br+EMPTY_MESSAGE+'</span>' );
							validate = false;
						}
					} );
					$('select.wpcf7-validates-as-required').each( function () {
						if ( $(this).children('option:selected').val() == SELECT_EMPTY_VALUE ) {
							$(this).after( '<span class="'+ALERT_MESSAGE_CLASS+'">'+EMPTY_MESSAGE+'</span>' );
							validate = false;
						}
					} );
					$('span.wpcf7-validates-as-required').each( function () { // for checkbox ( and radio? )
						if ( $(this).find('input:checked').length == 0 ) {
							$(this).after( '<span class="'+ALERT_MESSAGE_CLASS+'">'+EMPTY_MESSAGE+'</span>' );
							validate = false;
						}
					} );
					$('.wpcf7-validates-as-email ').each( function () {
						if ( jQuery.trim( $(this).val() ) != '' && !$(this).val().match( /^[A-Za-z0-9]+[\w\.-]+@[A-Za-z0-9]+[\w\.-]+\.\w{2,}$/ ) ) {
							$(this).after( '<span class="'+ALERT_MESSAGE_CLASS+'">'+INVALIDE_EMAIL_MESSAGE+'</span>' );
							validate = false;
						}
					} );
					if ( validate ) {
						$('.wpcf7-form input[type="text"], .wpcf7-form textarea').attr( 'readonly', 'readonly' );
						$('.wpcf7-form select').attr( 'disabled', 'disabled' ).attr( 'style', DISABLE_SELECT_COLOR );
						$('.wpcf7-radio input[type="radio"], .wpcf7-checkbox input[type="checkbox"]').each( function () {
							if ( !$(this).attr("checked") ) {
								$(this).next('span').hide();
								$(this).prev('span').hide();
							}
							$(this).hide();
						} );
						$('.wpcf7-submit').val( SUBMIT_NAME ).before( '<input type="button" name="'+MODIFY_BUTTON_ID+'" id="'+MODIFY_BUTTON_ID+'" value="'+MODIFY_NAME+'" />' );
						$('#'+MODIFY_BUTTON_ID).click( function () {
							$(this).remove();
							$('.wpcf7-form').fadeOut('fast', function () {
								$('.wpcf7-form input[type="text"], .wpcf7-form textarea').removeAttr( 'readonly' );
								$('.wpcf7-form select').removeAttr( 'disabled' ).removeAttr( 'style' );
								$('.wpcf7-radio input[type="radio"], .wpcf7-checkbox input[type="checkbox"]').each( function () {
									$(this).show();
									$(this).next().show();
									$(this).prev().show();
								} );
								$('.wpcf7-submit').val( CONFIRM_NAME );
								$(this).fadeIn('slow');
							} );
						} );
					}
					$(this).fadeIn('slow');
				} );
				return false;
			} else {
				$('.wpcf7-form select').removeAttr( 'disabled' ).removeAttr( 'style' );
			}
			return true;
		} );
	}
} );
} )( jQuery );

処理概要は次のようになっている。

1.初期時に「送信」ボタンを「確認」ボタンに書き換える。
2.「確認」ボタンが押された際、パラメータのバリデーションを行い、不備があればエラーメッセージを表示する。
3.2で不備がなければ、各テキスト項目とテキストエリアにはreadonly属性を、ドロップダウンメニューにはdisabled属性を、チェックボックスとラジオボタンは選択されていないinputタグ前後のラベル部分と、すべてのinputタグを非表示に。さらに「確認」ボタンを「送信」ボタンに書き換え、その前に「修正」ボタンを追加する。
4.「修正」ボタンが押された際は、3で行った処理を元に戻す。
5.「送信」ボタンが押された際は、ドロップダウンメニューにはdisabled属性を取り、正式なサブミットとする。

なおフェーズが切り替わる際は、jQueryのfadeOut/fadeInを使っている。これは、フェーズが切り替わったことを利用者に意識してもらうためである。

ご利用にあたって

実際のJavaScriptのソースコードは「こちら(jquery.wpcf7.confirm.js v0.12)」からアーカイブファイルをダウンロードし、アーカイブファイルから解凍したjquery.wpcf7.confirm.jsをサイトの適当なディレクトリにコピー。自テーマのheader.phpなどに追記する。
なおjquery.wpcf7.confirm.jsの冒頭のconstvar部分は、変更が予想される文字定数である。こちらは、利用されるフォームに応じて適宜書き変えること。まずチェックするとことは使用するフォームの送信ボタン名で、これは「SUBMIT_NAME」にて'送信'と定義している。送信ボタン名が異なる場合は必ず修正する。「SUBMIT_NAME」の内容とフォームの送信ボタン名が異なっているとこのスクリプトは機能しない。その他、エラーメッセージのspanタグにはwpcf7-not-valid-tipクラスを使用しているので、サイトのデザインに合わせてcssの内容を定義するか、このクラス名を変更する。また確認フェーズにおいてドロップダウン・メニューをdisabledにしているが、その際の文字色を「DISABLED_SELECT_COLOR」にて黒にしているので、必要に応じて書き変える。

最後に、こちらで紹介したスクリプトについては、前半で述べた環境を確認の上、自己責任にて使用してください。不具合についてはできるだけ速やかに対応することを心がけるが、時間がかかったり、対応できない場合があることをあらかじめご了承ください。

更新履歴

最新版0.12の修正内容は次の通りです。

  • jQuery.noConflict時に対応。
  • 「ドロップダウンメニュー」の「先頭に空の項目を挿入しますか?」がチェックされていた場合(include_blankオプション使用時)の不具合に対応
  • バリデーションエラー時のチップのフェイドアウト対応。

お勧めコンテンツ

the_generator(2011年2月7日 登録)

void the_generator( string $type )
generatorタグを表示する。

has_term(2012年1月17日 登録)

bool has_term( [ mixed $term = '' [ , string $taxonomy = '' [ , mixed $post = null ] ] ] )
投稿記事にタクソノミーが付属しているか調べる。

remove_meta_box(2011年8月25日 登録)

void remove_meta_box( string $id, string $page, string $context )
投稿ページのメタボックスを削除(非表示)する。

comments_template(2009年11月25日 登録)

void comments_template( string $file = '/comments.php' , bool $separate_comments = false )
投稿ページ(post)または単一ページ(page)のコメント情報を取得し、コメント表示・投稿用のテンプレートファイルを読み込んで表示する。

wp_image_matches_ratio(2016年8月17日 登録)

bool wp_image_matches_ratio( int $source_width, int $source_height, int $target_width, int $target_height )
2つの幅と高さが同じアスペクト比か調べる。

最終更新日時 : 2012-12-16 11:49