wordpress Contactform7をカスタマイズ
wordpressの問い合わせフォームを作るのに便利なContactform7
他にも問合せフォームを作るプラグインはあるけれど、やっぱり私はこれに頼らざるえない。
だが他の問合せフォームで見るような２点の機能が無い。それは・・
■ 確認用にメールアドレスを２回入力させ、尚且つチェックする機能
■ 郵便番号を入力すると自動で住所が入力される機能
というわけで 上記の２点をContactform７に対応させてみました。
確認用にメールアドレスを２回入力させ、尚且つチェックする機能
こちらはとても簡単に実装出来ます。Contactform7は透かし文字も入れられるので、下の画像のようにテキストエリアに文字を入れられます。
1:まずfunction.phpに下記の記述を追加します。
[php]
/* custom contactform7 */
add_filter( ‘wpcf7_validate_email’, ‘wpcf7_text_validation_filter_extend’, 11, 2 );
add_filter( ‘wpcf7_validate_email*’, ‘wpcf7_text_validation_filter_extend’, 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
$type = $tag[‘type’];
$name = $tag[‘name’];
$_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
if ( ‘email’ == $type || ‘email*’ == $type ) {
if (preg_match(‘/(.*)_confirm$/’, $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
$result[‘valid’] = false;
$result[‘reason’][$name] = ‘メールアドレスが一致しません’;
}
}
}
return $result;
}
[/php]
２：次にフォームの設定では下記のように
[php]
[email* your-email]
[email* your-email_confirm][/php]
※透かし文字を入れる場合は
[php][email* your-email]
[email* your-email_confirm watermark"確認のため再度ご入力ください"][/php]
これでOK
郵便番号を入力すると自動で住所が入力される機能
これはAjaxZip2というjqueryプラグインを使用します。
実装出来たときは、かなりの感動をおぼえますｗ
１：まずは上記サイトからajaxzip2をダウンロードし、FTPでアップします。私はjs関連はテーマフォルダの中にjsというフォルダーを作ってその中に入れるようにしているので、URLはその記述で説明します。
アップするファイルはajaxzip2.jsとdateフォルダです。
テーマフォルダの中にjsフォルダを作り、その中に入れると下記のようなURLとなります
アップロードする場所が違う場合はURLを変えてください。
２：ヘッダー(<body>の前）かフッター(</body>の前）に下記のscriptを入れます。
[php]<script type="text/javascript" src="<?php bloginfo(‘template_url’) ?>/js/ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function(){
AjaxZip2.JSONDATA = "<?php bloginfo(‘template_url’) ?>/js/ajaxzip2/data";
jQuery(‘#zip’).keyup(function(event){
AjaxZip2.zip2addr(this,’pref’,’addr’);
})
})
//]]>
</script>[/php]
３：フォームの設定をする
[php]
郵便番号：［text zip id:zip］
都道府県 ［text pref id:pref］
住所 ［text addr id:addr］
[ を半角にしてください。上記では全角にしています。
[/php]
※透かし文字を入れると何故か動作しなかったので入れませんでした。 これでフォームに郵便番号を入力すると都道府県と住所に自動入力されます。
郵便番号はハイフンありでも無しでも大丈夫でした。 存在しない郵便番号を入れると何も反応しません。 これで完了です。
参考サイト
Ajaxzip2
Contact Form 7で確認用メールアドレスの入力フォームを加える方法
may the force be with you.
