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

段落テキストフォームフィールドの下に合計単語数を表示しますか？デフォルトでは、一行テキストまたは段落テキストフォームフィールドで文字数制限を使用すると、これらのフィールドの文字数または単語数を簡単に制限できます。この設定についてさらに詳しく知りたい場合は、こちらのドキュメントをご覧ください。

ただし、このチュートリアルの目的では、単語数や文字数を制限するのではなく、合計数を表示したいと思います。そのため、このチュートリアルでは、これを達成する方法をステップごとに説明します。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加する必要があります。このチュートリアルでは、アイテムの刻印リクエストを受け付けるフォームを作成するため、刻印メッセージ用の段落テキストフォームフィールドもフォームに追加します。後でこのフィールド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: はい！ユーザーが応答を入力できるフォームフィールドであれば、このコードスニペットで機能します。コードがどのフィールドをカウントすべきかを知るために、keyupおよびkeydownにフィールドIDが含まれていることを確認してください。