Gravity form title and description are present in the header section of the form. To style the them we can use either Styles and Layouts for Gravity Forms plugin or do it directly by coding in CSS file. I will be explaining both the approaches in this article. By the end of this tutorial you will be able to
- Align form title and description
- Change font colour
- Change font size
- Set margin
- Set padding
How to Style Form Title using Styles and Layouts plugin
- The first step is to download and activate the latest version of Styles and Layouts plugin from WordPress plugin repository.Once the plugin is activated go to post/page where you have put your form.
- Now look for the customize option present at admin bar. This bar is only visible if you are logged into WordPress admin.
- A new customizer sidebar will open on the left side with multiple panels like Menus, Widgets, Header Image. Look for Styles & Layouts Gravity Forms panel. It is usually present at the bottom.
- Once you are inside this panel you will just see the option to Select Form. Click on this option and select the form you want to style.
- After selecting the form the settings will be automatically saved .
- Again navigate to Styles & Layouts Gravity Forms panel. Now there will be multiple form sections which you can customize.
- Click on Form Title & Description to see all the settings available for this section.
Here you can set
- Font alignment for title and Description to left, center or right
- Pick color for title and description using color picker. You can also provide color values in hex codes.
- Set font size in pixels, em or percentage.
- Set margin and padding in pixels, em or percentage.
All the styling that you will do using this plugin will be previewed immediately. Once you are done with the changes click on Save and Publish button to make the changes permanent in database.
How to Style Form Title and Description using CSS
Open style.css file of your theme and add the following lines of code in it
For styling of title:
For styling of description:
Code explanation:
body #gform_wrapper_1 .gform_heading => Since Gravity Form title and description are present in the header section of the form. This code is used to get to the header section of a form whose ID is 1.
.gform_title => This code is used to add the attributes to Gravity Forms title class.
.gform_description => This is used to add attributes to Gravity Forms description class.
Attributes used:
color => It is used to give color to font. It can have hex, RGB or color names as values.
font-size => It specifies the size of font. It can have values in pixels, percentage or em.
text-align => This specifies the position of title and description inside form header. It can have left, center, right and justify as values.
margin => This will add space around title and its nearest HTML element.
padding => This will add padding for form title and description.
Here is the video tutorial for Styling Form Title and Description
Drop me a comment if you face any issues while designing Gravity Forms and I will help you out.
0 Comments