今回紹介するのは、こんなときに便利なカスタマイズです。
- お問い合わせフォームで、文字の入力制御をしたい
- お名前のふりがなの入力で、ひらがなのみ入力できるようにしたい
- 電話番号の入力で、数字のみ入力できるようにしたい
目次
contact form7でお問合せフォームを作成
contact form7をインストール後、お問合せフォームを作成します。
今回作成したコードはこちらです。cssは省きます。
<table> <tr> <th> <label for="form2">お名前 ふりがな</label> <span class="required">必須</span> </th> <td> <div> 姓[text* yourlastname-kana id:form2] </div> <div> 名[text* yourfirstname-kana id:form2] </div> </td> </tr> <tr> <th> <label for="form3">お名前</label> <span class="required">必須</span> </th> <td> <div> 姓[text* yourlastname id:form3] </div> <div> 名[text* yourfirstname id:form3] </div> </td> </tr> <tr> <th class="relative"> <label for="form4">お電話番号(ハイフンなし)</label> <span class="any">任意</span> </th> <td> [text phone id:form4 size:11 minlength:10 maxlength:11] </td> </tr> </table> [confirm "確認画面へ"][back "入力画面に戻る"][submit "送信"]
functions.phpで入力制御の処理をする
functions.phpに記述します。
// 文字制御 add_filter('wpcf7_validate_text', 'wpcf7_validate_kana', 11, 2); add_filter('wpcf7_validate_text*', 'wpcf7_validate_kana', 11, 2); function wpcf7_validate_kana($result,$tag){ $tag = new WPCF7_Shortcode($tag); $name = $tag->name; $value = isset($_POST[$name]) ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " "))) : ""; // 'firstname-kana' または 'lastname-kana' の場合 if ( $name === "yourlastname-kana" || $name === "yourfirstname-kana" ) { // ひらがな以外だった場合 if (!preg_match("/^[ぁ-ゞー]+$/u",$value)) { $result->invalidate($tag, "全角ひらがなで入力してください。"); } } // 'phone' の場合 if ( $name === "phone" ) { // 半角数字以外だった場合 if(!preg_match("/^[0-9]+$/u", $value)) { $result->invalidate($tag, "半角数字で入力してください。"); } } return $result; }
カタカナで制御したい場合は、8行目をこちらに変更します。
if(!preg_match("/^[ァ-ヾ]+$/u", $value)) {
半角英数で制御したい場合は、15行目をこちらに変更します。
if(!preg_match("/^[a-zA-Z0-9]+$/u", $value)) {
コメント