段落テキストフォームフィールドの下に総単語数を表示したいですか?デフォルトでは、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フィールドでスマートタグを処理する方法。
参考アクション
よくあるご質問
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があることを確認してください。