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オプション使用時)の不具合に対応
  • バリデーションエラー時のチップのフェイドアウト対応。

お勧めコンテンツ

get_post_format_string(2011年9月11日 登録)

string get_post_format_string( [ string $slug ] )
投稿フォーマット名を取得する。

wp_json_encode(2014年12月23日 登録)

mixed wp_json_encode( mixed $data [ , int $options = 0 [ , int $depth = 512 ] ] )
データをJSON形式にエンコードする。

term_description(2012年1月16日 登録)

string term_description( [ int $term = 0 [ , string $taxonomy = 'post_tag' ] ] )
タクソノミー(ターム)の説明文を取得する。

wp_send_json_success(2012年12月12日 登録)

void wp_send_json_success( [ mixed $data = null ] )
Ajaxリクエストの成功レスポンスとしてJSON情報を返す。

maybe_hash_hex_color(2012年6月14日 登録)

string maybe_hash_hex_color( $color )
'#'のついていない16進数のカラー値の先頭に'#'をつける。

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