Gravity Forms is undoubtedly among the top form plugins in WordPress. It isn’t free like most of its competitors like Contact Forms 7 or Formidable Forms but still, it is more popular among users. It has a lot of features that come inbuilt which are missing in its competitors. However, it isn’t easy to design Gravity forms unless you are using Styles & Layouts for Gravity Forms.

Here are Some of the Features of Gravity Forms

• Drag and Drop Form Builder: Back-end of Gravity Forms features a drag and drop builder. You just have to click the fields or drag them to form the container to add them. The interface is intuitive and there is little to no learning curve associated with the plugin.
• Multipage Forms: It is easy to create multi-page forms using Gravity Forms. Most people these days prefer to create multi-page forms but still, this feature is missing in most of the WordPress forms plugins like Contact Form 7.
• Conditional Logic: If you are looking to create intelligent forms that only show some fields depending upon the data user enters in other form fields then Gravity forms can do that for you. With its powerful conditional logic, you can show/hide form fields according to data entered by the user.
• Limit Entries: It is possible to set how many times a form can be submitted. This is critical if you need only a specific/limited number of entries for a particular task/event.
• Compatibility: This plugin is compatible with most of the WordPress themes and a lot of them have embedded it in their theme. So, most of the users get Gravity forms pre-installed when they purchase a new WordPress theme.
• Developer Friendly: It is developed in such a way so that developers can easily extend its functionality. With an extensible range of hooks and filters built into its code, it can be easily extended. There is a multitude of plugins developed for Gravity Forms.

How to Change Styling of Gravity Forms

Although Gravity Forms is best in most of the aspects the only place where it lacks is its styling section. There is no direct way to give colors, paddings, etc to your form. Either you have to add CSS to your theme’s style.css file or use a plugin.

In this tutorial, I will explain both the methods, and it’s completely up to you which one you want to use. Both of them do the same thing but one is for those who are more inclined towards coding and the other one is more novice-friendly.

Change Styling by adding CSS to Style.css

To use this method you should be aware of a little bit of CSS. Every theme comes with a style.css file which is located inside your theme folder on the server. You can edit this file by connecting to the server using FTP software like Filezilla, Fireftp or login in to your WordPress dashboard and navigate to Themes -> Editor -> Style.css

• Once you have opened your Style.css file then do the following steps.
• To change the Form wrapper styling add the following code inside your style.css file

body .gform_wrapper_FORMID {

CSS_PROPERTY : CSS_VALUE ;

}

Replace ‘FORMID’ with the actual form id of the Gravity form which you want to target. If you want to apply the style to all forms then remove ‘_FORMID’ from the above code.

Replace ‘CSS_PROPERTY’ with the property you want to add. For example to give font family you will use font-family.

Replace ‘CSS_VALUE’ with the value of the property. For example to give a font size of 22 pixels you will use 22px.

Example:

body .gform_wrapper_1 {

background-color : red ;

}

The above code will give red background to a form with id 1.

Similarly to target form header you will use

body .gform_wrapper_FORMID .gform_heading{

CSS_PROPERTY : CSS_VALUE ;

}

The complete list of all the CSS targets can be found here.

Change Styling of Gravity Forms using Plugin

If you find editing the CSS file of your theme a little overwhelming then you can use a free Gravity Forms Styling plugin from the WordPress plugin repository. This plugin uses the WordPress customizer API that lets you preview all the changes in realtime.

• Download and activate Styles and Layouts Plugin for Gravity forms plugin from here or search the plugin directly from your WordPress Dashboard by searching for it.

• Goto to the front-end of your website and click on the customize button in the admin bar (Make sure you are logged into the WordPress dashboard otherwise admin bar won’t be visible).

• Now click on the Styles and Layouts Gravity forms section and select the gravity form you want to target. Your page will now automatically refresh. If the page doesn’t refresh due to any reason then you should reload and again select the form.

• After page refresh, you need to again go to the Styles and Layouts Gravity forms section but this time you will see all the designing options like Submit button, Title, and description, etc. Open each section and change the color, borders, font sizes, margins, paddings, etc as you desire. Whenever you will change any setting then it will be immediately previewed in the form giving you a true WYSIWYG experience.

Design Gravity Forms

• After adding all the styles click on the Save button and your styling will be saved.
• Close the customizer and your changes will now be visible to all the visitors of your website.

Check out this video to see how Styles and Layouts for Gravity Forms works:

Comparison of Both Styling Methods

Both methods have their own advantages and disadvantages. On one side editing, CSS files require some coding and most people like to avoid it but if you know how to edit the CSS then you can target each and every aspect of Gravity form.

If you decide to use the free Styles and Layouts Plugin for Gravity forms plugin then you can easily change the styling covering more than 100+ settings but you will miss some settings like the ability to set shadows for form wrapper and some more.

If you face any issues while using the above tutorial then leave a comment and I will get back to you with a solution as soon as possible.