フォームフィールドの下に総単語数を表示する方法

段落テキストフォームフィールドの下に総単語数を表示したいですか？デフォルトでは、1行テキストまたは段落テキストフォームフィールドで 長さの制限を使用すると、簡単にこれらのフィールドの文字または単語を制限することができます。

しかし、このチュートリアルの目的では、単語や文字を制限するのではなく、合計数を表示したいのです。そこで、このチュートリアルでは、これを実現するための各ステップを説明します。

フォームの作成

まず、新しいフォームを作成してフィールドを追加します。このチュートリアルでは、刻印アイテムのリクエストを受け付けるフォームを作成するので、刻印メッセージ用の段落テキストフォームフィールドもフォームに追加します。後のステップで使用するので、フィールドIDを控えておく必要があります。

フォームにパラグラフ・フォーム・フィールドを追加する

新しいフォームの作成にヘルプが必要な場合は、こちらのドキュメントをご覧ください。

次に、フォームにHTMLフォームフィールドを追加します。これは、訪問者が段落テキストフィールドに入力すると、ワード数が動的に入力されます。このフィールドIDもメモしておく必要があります。

総単語数の表示

フォームを作成したら、次はこのスニペットをサイトに追加して、すべてをまとめましょう。

あなたのサイトにスニペットを追加する方法についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Add a word count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_words_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery( '#wpforms-1480-field_6' ).keyup(updateCount);
    jQuery( '#wpforms-1480-field_6' ).keydown(updateCount);

    function updateCount() {
        var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length + " words total" : 0;
        // Update the word count inside the HTML form field (field ID 8)
        jQuery( '#wpforms-1480-field_8' ).text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_words_only', 30 );

上記のコード例では、3つの項目を更新する必要があります。この例では、フォームIDは1480、段落テキスト・フィールドIDは_6、HTMLフィールドIDは_8ですが、これらの3つの項目は、あなたのフォームのフォームIDとフィールドIDに合わせて更新してください。

フォームとフィールドのIDの見つけ方については、こちらのチュートリアルをご覧ください。

フォームが作成され、コード・スニペットが配置されると、フィールドに入力するたびに、フィールドの下にライブの単語数が更新されることがわかります。

これで完了です！これで、フォームフィールドの下に表示する単語数を追加できました。 HTMLフォームフィールド内でスマートタグを処理したいですか？以下のチュートリアルをご覧ください。
HTMLフィールドでスマートタグを処理する方法。

参考アクション

wpforms_wp_footer_end

よくあるご質問

Q: 単語の代わりに文字を数えることはできますか？

A:もちろんです！文字数だけをカウントするには、代わりに次のコード・スニペットを使用してください。

/**
 * Add a character count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_characters_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery('#wpforms-1480-field_6').keyup(updateCount);
    jQuery('#wpforms-1480-field_6').keydown(updateCount);

    function updateCount() {
        var cs = jQuery(this).val().length + " Characters";
        // Update the word count inside the HTML form field (field ID 9)
        jQuery('#wpforms-1480-field_9').text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_characters_only', 30 );

Q: これは他のフォームフィールドにも使えますか？

A:はい！このコード・スニペットでは、ユーザーが回答を入力できるフォーム・フィールドであれば何でも動作します。ただ、どのフィールドをカウントすべきかがコードにわかるように、キーアップと キーダウンの際にフィールドIDがあることを確認してください。