Styling Text Fields in Your Forms

フォームフィールドのテキストの外観をカスタマイズしますか？フォントサイズや色からテキストの変換まで、簡単なCSSでフォームのテキストフィールドを簡単に強化できます。

このガイドでは、メール、一行テキスト、段落テキストなどのテキストベースのフィールドのスタイル設定方法を説明します。

このガイドでは、フォームユーザーが制御するように設計されているリッチテキストエディタフィールドは対象外です。

フォームの設定

まず、フォームを作成し、フィールドを追加する必要があります。このチュートリアルでは、名前、メール、一行テキスト、および段落テキストフィールドを追加します。

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

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

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

特定のフォームまたはフィールドをターゲットにする場合は、-999を実際のフォーム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;
}

利用可能なtext-transformの値：

これで、テキストベースのフォームフィールドのスタイリングをカスタマイズするために必要なすべてが揃いました。

WPFormsには多くのCSSチュートリアルがあります。完全なリストを確認して、他のCSSチュートリアルをチェックしませんか。これらは定期的に更新されるため、頻繁に確認してください。ただし、より具体的なCSSのハウツー情報をお探しの場合は、WPForms VIP Circleに参加して、そこで質問してください！

CSSに関するチュートリアルの追加リクエストがある場合は、Facebook WPForms VIPコミュニティで遠慮なくお知らせください！