How to Customize the Styling of Text Based Form Fields

Introduction

Would you like to customize the styling of text-based form fields? We get asked this question a lot on changing the size of the text, to the color, and even how to force lowercase or capitalization. With a few CSS lines added to your site, you can easily change the styling on these fields and we’re going to show you how.

A text-based form field is any form field that would accept text being typed in. We have many tutorials on how to customize the form using CSS that would cover all the form fields that you can read more about in this documentation.

This tutorial is focusing more on the Email, Single Line Text, Paragraph Text.

The Rich Text Editor field is not included in this tutorial as this is meant to be 100% controlled and formatted by the user submitting the form.

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.

It’s not recommended that you use this CSS on any Password field. If you want to force the Password Strength, using this CSS will deactivate that and cause the form to not submit.

Adding the CSS

You can select from any of the examples below to add the CSS to your site. If you need help with how to add CSS to 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 that appears when users type in your form, you’ll use this CSS.

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;
}
[/css]

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 in the text 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;
}
[/css]

For a specific field inside a specific form
#wpforms-999-field_1-container input {
    text-transform: capitalize !important;
}

this css will help change the styling of text based form

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.

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