[wp]ContactForm7でフリガナの自動入力とバリデーションを実装する例

カスタマイズが必要だったりする。

こんな感じ
バリデーションの動作について
解説とか
まとめ

こんな感じ

こんなのがあったとして

<label> お名前 (必須)</label>
[text* your-name] 
<label> フリガナ (必須)</label>
[text* your-name-furi-katakana] 
<label> ふりがな (必須)</label>
[text* your-name-furi-hiragana]

バリデーションはこう

add_filter('wpcf7_validate_text', 'wpcf7_validation_text_furigana', 10, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validation_text_furigana', 10, 2);
function wpcf7_validation_text_furigana($result, $tag) {
    $name = $tag->name;
    $value = isset($_POST[$name]) ? trim($_POST[$name]) : '';
    error_log("【CF7 デバッグ】フィールド: $name, 入力値: $value");

    // 'furi-katakana' を含むフィールドにはカタカナのみ許可
    if (strpos($name, 'furi-katakana') !== false) {
        if (!preg_match('/^[ァ-ヶー]+$/u', $value)) { // カタカナ・長音のみ許可
            error_log("【CF7 デバッグ】 $name のカタカナバリデーションエラー: $value");
            $result->invalidate($tag, 'カタカナのみ入力してください。');
        }
    }
    // 'furi-hiragana' を含むフィールドにはひらがなのみ許可
    if (strpos($name, 'furi-hiragana') !== false) {
        if (!preg_match('/^[ぁ-んー\s]+$/u', $value)) { // ひらがな・長音・スペースのみ許可
            error_log("【CF7 デバッグ】 $name のひらがなバリデーションエラー: $value");
            $result->invalidate($tag, 'ひらがなのみ入力してください。');
        }
    }
    return $result;
}

自動入力はこう

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery.autokana@1.0.0/jquery.autoKana.min.js"></script>
<script>
$(function(){
    //カタカナの場合
    $.fn.autoKana('input[name="your-name"] ', 'input[name="your-name-furi-katakana"]', {katakana:true});
    //ひらがなの場合
    $.fn.autoKana('input[name="your-name"] ', 'input[name="your-name-furi-hiragana"]', {katakana:false});
})
</script>

バリデーションの動作について

そもそも記入が無ければ「必須項目に入力してください。」となる（通常の動作）。
指定外の文字が使われていると「カタカナのみ入力してください。」となる（カスタマイズによるもの）。

アラート文の内容を入れ替えてるだけなので、表示される場所はCF7の機能に準拠する。

解説とか

ContactForm7のこれ。

<label> お名前 (必須)</label>
[text* your-name] 
<label> フリガナ (必須)</label>
[text* your-name-furi-katakana] 
<label> ふりがな (必須)</label>
[text* your-name-furi-hiragana]

各フリガナのname末尾の「furi-katakana」「furi-hiragana」はfunctions.phpの条件分岐で使用するので、任意ではあるものの、無関係のnameに干渉しない自分なりのルールをきちんと定めておく。

functions.phpのこの部分。

add_filter('wpcf7_validate_text', 'wpcf7_validation_text_furigana', 10, 2);
add_filter('wpcf7_validate_text*', 'wpcf7_validation_text_furigana', 10, 2);

これは「通常のフィールドと必須フィールド両方に適用する」意味で２つ書かれているので誤りじゃない。

上記の例では「furi-katakana」を対象にしてるけど、判別は普通の条件分岐だからこんな書き方もできる。

    // 'furi'または'kana' を含むフィールド
    if (strpos($name, 'furi') !== false || strpos($name, 'kana') !== false) {

まとめ

CF7にフリガナに対応する機能がないから、バリデーションは仕込んでおくに越したことはないと思う。

自動入力は一般的でない読みの場合に消してから書かないといけなくて手間が増えるので、自分がそっち側なので、必須とは思わない。
せめて名字と名前を分けて使用したい。