contact form7で文字の入力制御（ひらがなのみ・半角英数のみなど）する方法

今回紹介するのは、こんなときに便利なカスタマイズです。

• お問い合わせフォームで、文字の入力制御をしたい
• お名前のふりがなの入力で、ひらがなのみ入力できるようにしたい
• 電話番号の入力で、数字のみ入力できるようにしたい

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)) {

実際の表示

こんな感じでエラーメッセージも変更されています。