Introduction

Text input fields are used in Gravity forms to capture a single line of text. You can use these to get information like full name, profession, education qualifications, etc. Even some advanced fields like Name, Address, and phone number are also combinations of text input fields.

In this tutorial, I will teach you how to you can do the following styling for text input fields:

• Set width
• Set the height of the input box
• Set font style to bold, italic, uppercase, and underline
• Set border width, type, color, and radius
• Set background color
• Set font color and font size
• Set margin and padding
• Apply Material design
• Apply Bootstrap design
• Add Icons inside input fields

Basic Input Fields Styling with Gravity Booster

Gravity Booster is a free plugin for Gravity Forms that offers a no-code solution for designing various parts of the form. It can do most of the design settings like borders, font size, background color, margins, and paddings for input fields.

Step to Design Input Fields Using Gravity Booster

• Install and activate the Gravity Booster plugin by navigating to your WordPress dashboard and then clicking on Plugins -> Add New. Search for Gravity Booster and then install it.
• Now go to the Forms menu and edit the form for which you want to style input fields.
• From the form editor click on the Styler option. This will take you to the Gravity Booster Styler interface.
• On the right side, you can see all the different parts of the form which can be designed and on the left, you can see the live preview of the form.
• From the live preview click on any input field and that will automatically open the styling setting for text input fields. Most of the settings also provide separate controls for settings values for different media devices like desktops, tablets, and mobiles. You can do the following settings from here.

Design Settings for Text fields in Gravity Booster

• Width: This will set the width for text input fields. Its value can be set in px, rem, em, %, vw, or vh units.
• Height: This sets the height for input fields.
• Font Style: With this setting, you can make the font for input fields to be bold, italic, uppercase, and underlined.
• Font Size: This set is used to set the font size of input for text fields.
• Font Color: This will set the color of the font for text inputs. You can use the color picker to select the color or enter hex, ,RGB or HSL codes.
• Border: This field is used to set the border around text fields. If you don’t want any border then set its value to 0px. From here itself you can also set border color as well as border type.
• Border Radius: This adds curvature to the border corners. If you want to make your text input fields round then use a bigger value like 10px inside this field.
• Background Color: Background color will add a background inside text inputs.
• Margin: This setting is used to add space between adjacent elements. It can be used to increase or decrease the gap between two inputs.
• Padding: This setting adds the space in text inputs from its container. So, whenever someone types then it will have space between the text and the input border. You can also set padding for any or all sides.

After making the desired changes click on the Save button. All your settings are now saved and they will be shown to your website visitors as well.

Advanced Input Fields Styling with Gravity Booster Addons

If you want to further elevate the styling of your Gravity Forms input fields then you can take advantage of Gravity Booster addons. These add-ons will provide you with a quick way to do a consistent and coherent styling of all your form fields with only a few clicks.

Styling Gravity Forms Input Fields using Material Design Addon

Material design is a premium Gravity Booster add-on based on Google’s material design philosophy. It can make the input fields interactive with smooth animations for hover and click effects.

• Once you installed and activated the material design addon then go to the Forms menu and edit the form for which you want to style input fields.
• From the form editor click on the Styler option. This will take you to the Gravity Booster Styler interface.
• Now go to Material Design option and you see the following styling options

Design Settings of Material Design for Gravity Forms

• Enable Material Design: This will enable material design for your form and will immediately change the appearance of text input fields.
• Theme Color: The material design uses this color to highlight actions like clicking inside of the input field, the color of labels, etc. Use a color picker or add colors using hex, RGB, or HSL codes to set your material design theme.
• Style: Here you can switch between Filled and Outlined style options. Both of these have distinct styling and you can see how they look in the preview of your form.
• Font Family: There is an option to select from 100’s of font families. 
• Font Style: This setting lets you set the text inside inputs to be bold, uppercase, or underlined.

After making the changes don’t forget to Save them.

You can check the implementation of Material design on Gravity Forms text input fields using the below links

• Material design filled demo
• Material design outline demo

You can also check the detailed guide for styling your Gravity Forms with Material Design.

Styling Gravity Forms Input Fields using Bootstrap Addon

Bootstrap is amongst the most popular CSS styling frameworks. Gravity Booster has a premium Bootstrap addon for Gravity Forms. The addon is fairly easy to use with options that will make your form’s text input fields stand out.

• Go to the Forms menu from your WordPress dashboard after installing and activating the Bootstrap addon.
• Now click on the edit button to open the form editor and then navigate to the Styler option.
• Here click on the Bootstrap option. This will show you all the available Bootstrap controls to customize the appearance of text input fields.
  • Enable Bootstrap Design: This will implement the Bootstrap design on your current form.
  • Theme Color: Bootstrap design gives a glowing border color when you click inside the input field. By changing the theme color you can set the color which will be used for the glowing border color.

After making the changes to the above settings then click on the Save button to make them live on your website.

Here is the implementation of Bootstrap design on Gravity Forms
Bootstrap Design Demo

You can also check the detailed guide for Bootstrap Design for Gravity Forms.

Styling Gravity Form Input Fields using Field Icons Addon

Field Icons for Gravity Forms allow you to add font awesome or image icons inside input fields. It is also a no code solution so, you don’t need any technical knowledge to use it. 

With the Field Icons addon you can not only set icons but also completely customize their appearance by setting icon color, icon size, icon spacing, and a lot more. It has support for more than 900 icons and you also have the flexibility of using your own images as icons.

You can check the demo for field icons on Gravity Forms using the below links

• Fontawesome Icons Demo
• Image Icons Demo

We also have a detailed guide for using Field Icons.

Styling Text Input Fields Using CSS Coding

Use this method if you have some experience of coding otherwise, you can use the free Gravity Booster plugin method. To change the styling attributes you need to add the following CSS code

Note: Make sure you replace FORMID with the actual form ID

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.