Text field is one of the most common field that is present in almost every form. You may be using it to get name, title, last school attended or any other information. It is a versatile field. These fields can be designed with Styler for WpForms plugin or with custom CSS code. In this article I will present both the methods and you can use whichever works best for. You can also check our tutorial for designing field labels.

Style WpForms Text Fields

• Install and activate Styler for WpForms. You can do that by downloading it from WordPress plugin repository or by directly searching for this plugin from your WordPress dashboard.
• Now open customizer on the page in which you have added the form. If customize option is not visible to you then you can check the tutorial for alternate methods to open customizer.
• Go to Styler for WpForms -> Select Form and then choose the form which you are designing.
• Once the page reloads the open Text Fields section.

• Using the text fields settings you can style the fields of your form. It contains the following  properties:
• • Maximum width:  Using this option you can specify the width for the text fields.
  • Font Size : Font size option enables you to give the size to the text.
  • Font Color: You can also give the color to the text by choosing the font color property.
  • Border size :  This option is used to determine the size of the border . You can define any border value in px,% or ems.
  • Border type: This property defines the type of the border .There are different types of border  which can be used  like double,dashed, solid dotted etc.
  • Border Color: It is used to determines the color of the border .
  • Border Radius:  This option is used to give the specific  radius to the border of the text fields. The value can be given in px,% or ems.
  • Background Color:  This option specifies the background color of the text fields. You can use the select color option to apply the background color.
  • Margin: The  margin determines the space around the text fields . you can use the margin-top,margin-right,margin-bottom and margin-left properties  .
  • Padding:  The padding option is used to provide the space between  the text  inside the text fields. You can also use the top-padding, right-padding, bottom-padding and left-padding properties .
• Once you have finalized the changes then click on the Publish button at top and the changes will become live.

Here is a video tutorial showing you all the styling steps

Style WpForms Text Fields with CSS

For styling text fields with CSS you should know the id of the form for which you want to make. Replace the FORMID in the below code with your form id.

The above code will not only target normal text fields but all the properties will also apply for email, telephone, url/website, number and password fields.

Code Explanation: 
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=text],
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=email],
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=tel],
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=url],
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=password]
body #wpforms-FORMID .wpforms-form .wpforms-field input[type=number]

This code will target all the different type of text fields in WpForms. We have given color of #ddd, border of 1px , border radius of 2px and white background color. It will get applied to all the above input types.

Need help in designing other parts of form then check the complete WpForms design tutorials. Feel free to leave a comment in case you face any issues with the above tutorial.