Gravity forms header is the section which encompasses title and description. It is possible to add background color to header section. It is also possible to set background for form container. To add background color for header section we need to target ‘gform_heading’ class inside ‘gform_wrapper’ ID.
You can add the following code inside your CSS file
Code Explanation:
body #gform_wrapper_1 .gform_heading => This CSS code tells the browser that we want to add attributes to heading section of Gravity form with ID ‘1’ which is inside html body.
background-color: red => This will set the background color of header to red. You can also give color values in hex or RGB.
Using Styles and Layouts for Gravity Forms Plugin
Styles and Layouts for Gravity Forms is a Free WordPress Plugin that gives you options to customize the design of Gravity Forms. You can add background color to your forms easily with the help of inbuilt color picker. Also will see live preview of your background color selection on the form itself.
- After installing and activating this free WordPress plugin click on the customize option in front end admin bar. If have opened the customizer on the same page as your form then you will be able to live preview your changes.
- Under Styles & Layouts Gravity Forms panel go to Select form and then choose the form you want to design from drop down menu.
- After your form selection is saved you can navigate to Form Header section and change the color using color picker.
- Click on Save and Publish button to make the changes permanent.
If you make changes using plugin then they will work even if you change or update the themes however if you do it directly in your theme file then they will be lost and you have to do them again.
Here is the video tutorial for changing the background color
If something is still unclear you have any suggestion then drop me a comment below.
0 Comments