How to Style Text Fields of Gravity Forms

March 16, 2016 - By 

Text input fields are used in Gravity forms to capture single line of text. You can use them to ask for full name, profession, education qualifications etc. Even some advanced fields like Name, Address, phone number are also type of text input fields. In this tutorial I will teach you how to you can do the following styling:

  • Set Background color
  • Set border width, type, color and radius
  • Set Font color and font size
  • Set maximum width
  • Set margin and padding

Tutorial to Style Text Fields using Free Plugin

  • Download and install free Gravity form designer plugin. This plugin will solve all your designing needs for Gravity Forms. Once it is activated, open customizer by navigating to the page in which form is embedded in front-end and then click on Styles & Layouts Gravity Forms options.
  • Select the form for which you want to style text fields. You will be automatically alerted for page refresh . Click on OK button and again navigate to Styles & Layouts Gravity Forms section.

Here you will get a separate section for Text Fields. Inside this section you will get the following options

Text input styling

  1. Maximum width: This will set the maximum width for text input fields. Its value can be set in pixels, percentage, centimeter or any browser supported unit.
  2. Font Size: This field is used to set font size of input for text fields.
  3. Font Color: This will set the color of font for text inputs. You can use the color picker to select the color or enter hex codes.
  4. Border Size: This field is used to set the border around text fields. If you don’t want any border the set its value to 0px.
  5. Border Type: It will set the type of border like solid, dotted, dashed.
  6. Border Color: Similar to font color but it works for borders.
  7. Border Radius: This add curvature to border corner. If you want to make your text input fields round then use a bigger value like 10px inside this field.
  8. Background Color: Background color will add a background inside text inputs.
  9. Margin: This setting is used to add space between adjacent element. It can be used to increase or decrease gap between two inputs.
  10. Padding: This setting acts adds the space in text inputs from its container.

After you make the desired changes click on Save & Publish button. All your settings are now saved and they will be shown to your website visitors.

Here is video tutorial about how to use this plugin

Steps to Style Text Fields using CSS Coding

Use this method if you have some experience of coding otherwise you can use the free plugin method. For changing the styling attributes you need to add the following CSS code

Code Explanation:

This CSS code will target all the text input fields present inside the form. Whatever attributes you will add inside this will work on text inputs. In the above code I have added border, font-size, color, border-style, margin and padding attributes.

You can also add any other attributes . If you need more info or have any questions then leave a comment below and I will help you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1 other subscriber