How to Style Field Labels of Gravity Forms
Field labels are the titles of the fields which you add in your Gravity Form. They can be designed by adding attributes to ‘gfield_label’ CSS class. You can also do this without altering any code by using Styles and Layouts for Gravity Forms plugin. By the end of this tutorial you will be able to
- Change font size of labels in pixels, percentage or em.
- Set font color of labels using color picker, hex codes or rgb values.
- Set padding for labels in pixels, percentage or em.
Steps to Change Styling of Field Labels using CSS
The CSS code which should be added into your theme css file to make the desired changes is as follows
- body #gform_wrapper_1 => This code targets the container with form ID ‘1’ present inside the body of page HTML. Change the ID to the form which you want to target.
- .gform_body .gform_fields .gfield .gfield_label => This code will get element with gfield_label class present inside gfield which is itself located under gform_body class. So, basically this is the code to find out position of field labels inside the page HTML code.
- 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. If you are not comfortable in changing the code of your website then you can use Styles and Layouts plugin.
Steps to Design Field Labels using Styles and Layouts for Gravity Forms
This is a free plugin built on WordPress customizer API to help you quickly design your forms without any coding. You can create a separate theme for each of your forms so that they all look different yet beautiful. Follow the below steps to style the field labels section.
- The first requirement is to have this plugin activated in your WordPress installation. You can search for this from your WordPress admin or download it directly from here.
- Now open cusotmizer on the post/page where your form is present. You must be logged into WordPress admin to see the customize option.
- Navigate to Styles & Layouts Gravity Forms panel and select the form.
- Once your form selection is saved and page is refreshed then you get the option of Field Labels under Styles & Layouts Gravity Forms panel.
- Here you can set font size, font color and padding. As soon as you will change any of the settings you will see the instant preview of how it would look on your website.
Here is the video tutorial for styling Gravity Forms field labels
If you face any issues while editing the CSS or need any help about the plugin then leave a comment and I will get back to you ASAP.