How to Customize the Styling of Text-Based Form Fields

Introduction

Are you looking to customize the styling of text-based fields? From adjusting font sizes and colors to enforcing lowercase or capitalization, the customization possibilities are endless. With just a few CSS tweaks added to your website, you can effortlessly revamp the styling of these fields, and we’re here to guide you through the process.

A text-based form field encompasses any field that accepts typed text input. While we offer numerous tutorials on CSS customization for all form fields, this guide zeroes in on enhancing the styling of the Email, Single Line Text, and Paragraph Text fields.

Creating the form

First, you’ll need to create your form and add your fields. For this tutorial, we’re going to add the Name, Email, Single Line Text (for requested username), and a Paragraph Text field (for any additional comments).

If you need any help in creating your form, please review this tutorial.

Styling the text base form fields

You can select from any of the examples below to add the CSS to your site. If you need help with how and where to add CSS for your site, please check out this tutorial.

In some cases, you may want to limit your CSS to a specific field or a specific form. Our CSS examples will show you each of these, but you’ll need to remember to change your form and field IDs from our example CSS to what you use on your site. If you need help in knowing how to find your field and form IDs, please check out this tutorial.

Text size

If you’d like to change the text size, which is controlled by the CSS property font-size, this CSS will change the size of the text that appears when your visitors type into your field.

For any examples below that are form specific, you’ll need to replace the -999 with the form ID that matches your specific form. If you need help in where to find your form ID, please review this help documentation.

For all forms

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

For a specific field inside a specific form

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

Text color

To change the text color, which is controlled by the CSS property color, use this CSS.

For all forms

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

For a specific field inside a specific form

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

Text lowercase, uppercase, capitalization

If you’d like to change how the user types into the field to make it uppercase, lowercase, capitalization, etc, this is controlled by the CSS property text-transform.

Standard text-transform properties typically used are:

• lowercase forces any text inside the form field to be all lowercase
• uppercase forces any text inside the form field to be all uppercase
• capitalize forces any text inside the form field to be capitalize every word typed in

For all forms

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

For a specific field inside a specific form

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

And that’s all you need to customize the styling of text-based form fields.

WPForms has loads of CSS tutorials. Why not check out other CSS tutorials by seeing our complete list. We update these regularly so keep checking back in. But if you’re looking for more specific CSS how-to information, please join our WPForms VIP Circle and ask us there!

If you have specific requests to see more tutorials on CSS, feel free to ping us inside the Facebook WPForms VIP Community!