WordPressカスタマイズ事例

Contact Form 7で、メールアドレスの確認用入力と一致チェック機能をつける

問い合わせフォームで最も大事な入力項目はメールアドレスですね。
メールアドレスの誤入力を未然に防ぐために、フォームにメールアドレス入力欄を2つ設けて、一致した場合にOKとするやり方があります。
これをContact Form 7でやってみるとこうなります。

テーマのfunction.phpに以下を記述。

add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_extend', 11, 2 );
function wpcf7_validate_email_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)){ //確認用メルアド入力フォーム名を ○○○_confirm としています。
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
if (method_exists($result, 'invalidate')) {
$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
} else {
$result['valid'] = false;
$result['reason'][$name] = '確認用のメールアドレスが一致していません';
}
}
}
}
return $result;
}

で、Contact Form 7側の登録ページで

<tr>
<th>メールアドレス <span class="required">必須</span></th>
<td>[email* your-email]</td>
</tr>
<tr>
<th>メールアドレス確認 <span class="required">必須</span></th>
<td>[email* your-email_confirm placeholder "確認のためもう一度入力してください"]</td>
</tr>

こんな感じ。
htmlは上を参考にご自由に作成してください。
ポイントは項目タグ名に your-email_confirm を使うことです。


関連するWordPressカスタマイズ事例