今日はお問い合わせフォームにメールアドレスの確認用入力欄を設置する方法と、プレースホルダーテキストの表示方法についてのご案内です。 お使いになる方は必ず「あとがき」までお読みください。

メールアドレスの確認用入力欄を設置する

子テーマの【functions.php】に以下のコードを追加する

[highlight_php]/* contact form 7 メールアドレス確認用 */ function wpcf7_text_validation_filter_extend( $result, $tag ) { global $my_email_confirm; $tag = new WPCF7_Shortcode( $tag ); $name = $tag->name; $value = isset( $_POST[$name] ) ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) ): ''; if ($name == "your-email"){ $my_email_confirm=$value; } if ($name == "your-email-confirm" && $my_email_confirm != $value){ $result->invalidate( $tag,"確認用のメールアドレスが一致していません"); } return $result; } add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 ); add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );[/highlight_php]

Contact Form 7のテンプレート欄に以下の項目を追加する

[highlight_markup] [email* your-email-confirm][/highlight_markup] 入力する方としては面倒なフォームですが、肝心のメールアドレスが誤って入力されていると、せっかくお返事を差し上げても無駄になってしまいます。 使う使わないは別として、最初からプラグインに装備されていると良かったのですが。。。

プレースホルダーテキストを表示する

入力欄の背景にグレーの薄い文字で書いてあるのが「プレースホルダーテキスト」です。 下のように使います。 [highlight_markup][email* your-email-confirm placeholder "上と同じメールアドレスを再度入力してください"][/highlight_markup]

お問い合わせフォームのテンプレート実例

表形式のお問い合わせ

[highlight_markup]<span class="red">*</span>は必須です</p> <table class="table"> <tbody> <tr> <th>お名前 <span class="red">*</span></th> <td> [text* your-name] </td> </tr> <tr> <th>e-mail <span class="red">*</span></th> <td> [email* your-email] </td> </tr> <tr> <th style="line-height:110%;">e-mail <span class="red">*</span><br>確認用</th> <td> [email* your-email-confirm placeholder "上と同じメールアドレスを再度入力してください"] </td> </tr> <tr> <th>ＵＲＬ</th> <td> [url url placeholder "必須ではありません"] </td> </tr> <tr> <th>件　名 <span class="red">*</span></th> <td> [text* your-subject] </td> </tr> <tr> <th>内　容 <span class="red">*</span></th> <td> [textarea* your-message] </td> </tr> </tbody> </table> [recaptcha class:recp] [submit "送信"][/highlight_markup]

テーブル用のCSS

[highlight_css]/* お問い合わせフォーム（表） */ input[type="text"], input[type="email"], input[type="url"] { height: 32px; } input[type="text"], input[type="email"], input[type="url"], textarea { width: 100%; padding: 4px 6px; border-radius: 4px; border: 1px solid #ddd; resize: none; } .post td, .post th { padding: 8px 10px; border: 1px solid #ddd; } .table th { padding: 10px; font-weight: normal; background: #eee; text-align: left; white-space: nowrap; } th > .red{ font-size:0.8em; color:red; vertical-align:super; } .recp{ margin-bottom:25px; }[/highlight_css]

あとがき