Overview

Field labels are the titles of the fields that you add to your Gravity Form. They can be designed by adding attributes to the ‘gfield_label’ CSS class. Using the Gravity Booster plugin, you can do this without altering any code. By the end of this tutorial, you will be able to

• Change the font size of labels in pixels, percentages, or em.
• Set the font color of labels using the color picker, hex codes, or RGB values.
• Set padding for labels in pixels, percentages, or em.
• Add Font Awesome icons before labels

How to Style Gravity Forms Field Labels

Styling field labels of the form greatly impacts the form conversion. If the field labels are well designed and match the branding colors of the website then the form will feel part of the page. The labels should be properly aligned, well-spaced, and different from the input field text. Also, there should be proper contrast between the background color of the form and field labels so, they are easily readable.

Gravity Form field labels can be easily styled with the free Gravity Booster plugin and custom CSS. In this tutorial, we will walk you through both methods.

Style Gravity Forms Field Labels with Gravity Booster

Gravity Booster is a free plugin that lets you style not only field labels but also other aspects of forms like sub-labels, input fields, textarea, sections, submit button, etc.

• Install and activate the Gravity Booster plugin on your website.
• Navigate to Forms -> Booster and then to the Styler ->  Field Labels section.

Here you will get the following design controls

• Hide Labels: If you enable this setting, your field labels will be hidden. If you use this then make sure you are using placeholders and style them as well.
• Font style: With the controls under this setting you can make the labels bold, italic, uppercase, and underlined.
• Font Size: The font size for labels can be set to different values for mobile, tablets, and desktops. The supported units are px, em, rem, percentage, vw, and vh.
• Line Height: If your labels break into multiple lines then with this control you can change the spacing between them. Similar to font size you can set it to different values for different screen resolutions.
• Font Color: The font color is a color picker and changes the color of the Gravity Forms field labels.
• Asterisk Color: If you have required fields in your form then Gravity Forms automatically adds a red color asterisk at the end of the field label. You can change the color of this using the color picker.
• Padding: Setting the padding will add space in and around the label. You can set different values for different sides.

Once you have made the changes, click the Save button to make the changes live.

The good part of Gravity Booster is that you don’t need to do any custom CSS as well and all the changes are previewed live. This way you continue to adjust the setting until you get the desired look.

Style Gravity Forms Field Labels using Custom CSS

The CSS code that should be added to your theme CSS file to make the desired changes is as follows

Code explanation:

• body #gform_wrapper_1: This code targets the container with form ID ‘1’ present inside the body of the page HTML. Change the ID to the form which you want to target.
• .gform_body .gform_fields .gfield .gfield_label: This code will get an element with gfield_label  class present inside gfield which is itself located under gform_body class.  So, this is the code to find out the position of field labels inside the page HTML code.

Attributes used:

• color: This attribute is used to give font color to form field labels.
• font size: This will set the font size for field labels.
• padding: This will add padding for field labels.
• You are free to use any other CSS attributes that you want to add like background color, font family, etc.

Add Fontawesome Icons in Gravity Forms Field Labels

Adding Fontawesome labels in your Gravity Forms field labels will make them look aesthetically pleasing and modern. With over 700+ icons to choose from you will get the icon complementing each of your form field labels.

Steps to Add Fontawesome Icons in Field Labels

• Install and activate Field Icons for the Gravity Forms add-on.
• Navigate to Forms -> Booster and then Field Icons -> Label Icons.
• Here click on any label from the form preview and it will open the control to add an icon for that field.
• The icon will be immediately previewed in front of the label and after you like the new design then click on the Save button to save it in the database and show it to users in frontend.

Steps to Style Fontwesome Icons in Field Labels

You have already learned the steps to style field labels using the free Gravity Booster plugin. Now you will know how to style the Fontawesome Icons in field labels so, that they present a cohesive design. In the Field Icons -> Label Icons you will get the following design controls

• Icon Size: This determines the size of the icons. You can change the value of the icon size using the range slider or add the value manually.
• Icon Left Spacing: This will add space to the left of the icon.
• Icon Right Spacing: This will add space to the right of the icon.
• Icon Color: With this control, you change the color of the icon.

Once you are happy with the design changes then click on the Save button to make the changes live.