AI要約
はじめに
WPFormsのフォームフィールド入力を大文字にしたいですか？CSSとtext-transformを使用して入力値をフォーマットすることは簡単にできますが、入力されたとおりに正確に保存されます。短いJavaScriptスニペットを使用すると、リアルタイムでこれらの値が大文字で表示され、保存されることを保証できます。
このチュートリアルでは、これを達成する方法の各ステップを順を追って説明します。
フォームの作成
まず、フォームを作成する必要があります。このチュートリアルの目的のために、フォームに段落テキストフィールドと一行テキストフィールドを追加しました。
フォームの作成についてサポートが必要な場合は、こちらのドキュメントを確認してください。
CSSクラス名の追加
次に、これらの各フォームフィールドにCSSクラスを使用して、別のステップで追加するtext-transform CSSルールを使用するようにCSSをトリガーします。必要なCSSクラスを追加するには、フォームビルダーで一行テキストフィールドをクリックし、次に詳細設定をクリックして開きます。
CSSクラスの下にcapitalizeを追加し、段落テキストフィールドについても同様の手順を繰り返します。
実装オプション
CSSのみを使用する（オプション）
このカスタムCSSにより、フォームフィールドは大文字で表示されますが、入力は入力されたとおりに正確に表示されます。
カスタムCSSの追加方法と場所についてサポートが必要な場合は、こちらのチュートリアルを確認してください。
このCSSをコピーしてサイトに貼り付けるだけです。
.capitalize {
text-transform: capitalize;
}
JavaScriptのみを使用する（推奨）
フォームが完了するにつれてフォームフィールドの入力値をその場で大文字にし、入力情報が大文字で保存されるようにするために、テキストが入力されるとすぐにフィールドを大文字にする小さなスクリプトを追加します。
サイトにJavaScriptを追加する方法については、こちらのチュートリアルをご覧ください。
/*
* Capitalize form field text
*
* @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/
*/
function wpf_dev_capitalize() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery( '.wpforms-field.capitalize input' ).keyup(function() {
jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + jQuery(this).val().substr(1).toLowerCase());
});
jQuery( '.wpforms-field.capitalize textarea' ).keyup(function() {
jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + jQuery(this).val().substr(1).toLowerCase());
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_capitalize', 30 );
このスニペットは、デフォルトのwpforms-field CSSクラスだけでなく、capitalize CSSクラスも持つフォームフィールドを探します。ユーザーが入力すると、テキストは自動的に大文字になり、フォームが送信されると、エントリはそのフィールドを大文字で保存します。
よくある質問
最初の文字だけでなく、すべてのテキストを大文字にしたい場合はどうなりますか？
テキストを完全に大文字（例：「hello」を「HELLO」と表示）にしたい場合は、text-transform: capitalizeの代わりにtext-transform: uppercaseを使用してください。テキスト変換のCSSプロパティの詳細については、text-transformに関するMozillaのドキュメントを参照してください。
これで完了です！フォームフィールドへのURL入力をユーザーに禁止しますか？フォームフィールド内のURLをブロックする方法の記事をご覧ください。
関連
アクション参照: wpforms_wp_footer_end