フォームのテキストフィールドをスタイリングする

フォームフィールドに表示されるテキストをカスタマイズしたいですか?フォントサイズや色からテキストの変形まで、シンプルな CSS で簡単にフォームのテキストフィールドを拡張できます。

このガイドでは、電子メール、単一行テキスト、段落テキストなど、さまざまなテキストベースのフィールドにスタイルを設定する方法を紹介します。

リッチ・テキスト・エディター・フィールドはフォーム・ユーザーによってコントロールされるように設計されているので、このガイドでは取り上げません。

フォームの設定

まず、フォームを作成し、フィールドを追加する必要があります。このチュートリアルでは、Name、Email、Single Line Text、Paragraph Textフィールドを追加します。

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

これらのCSSスタイルをパスワードフィールドに適用しないでください。これを行うと、パスワードの強度機能が妨害され、フォームの送信が妨げられる可能性があります。

テキストフィールドをスタイルするさまざまな方法を見てみましょう。あなたのサイトにCSSを追加する方法については、カスタムCSSの追加に関するチュートリアルをご覧ください。

特定のフォームやフィールドをターゲットにする場合は、-999を実際のフォームIDやフィールドIDに置き換える必要があります。これらのIDを見つけるのに助けが必要な場合は、フォームIDとフィールドIDの見つけ方についてのガイドをご覧ください。

フォームフィールド内のテキストのサイズを変更する：

.wpforms-form input {
    font-size: 20px !important;
}

#wpforms-999-field_1-container input {
    font-size: 20px !important;
}

フォームフィールドのテキストの色を変更する：

.wpforms-form input {
    color: #000000 !important;
}

#wpforms-999-field_1-container input {
    color: #000000 !important;
}

テキストの大文字小文字を制御する：

.wpforms-form input {
    text-transform: capitalize !important;
}

#wpforms-999-field_1-container input {
    text-transform: capitalize !important;
}

利用可能なテキスト変換値：

テキスト・ベースのフォーム・フィールドのスタイルをカスタマイズするのに必要なのはこれだけです。

WPFormsにはたくさんのCSSチュートリアルがあります。他のCSSチュートリアルもご覧ください。定期的に更新していますので、ぜひチェックしてみてください。より具体的なCSSハウツー情報をお探しの方は、WPForms VIP Circleにご参加の上、お問い合わせください！

CSSのチュートリアルをもっと見たい！という具体的なご要望がありましたら、FacebookのWPForms VIP Communityまでお気軽にお寄せください！