Select Page

There are tons of form builder plugins in WordPress but in terms of security, flexibility, spam protection, reliability, and scalability no one can beat Gravity Forms. It is the best WordPress plugin to construct web forms using drag and drop builder. It is far more useful than building forms. It is the oldest form builder plugin with user-friendly and straightforward settings. To extend functionality further Gravity Forms have many add-ons.

Gravity forms don’t have any feature for styling forms to match with the website theme and a dull form without any styles can ruin the whole experience of websites. Forms are the most important part of a website, only with them, users can interact with you. To create a best UI/UX design the styling of forms should match with the user’s expectations.

Now the question is how to style Gravity forms? This article has the answer to this question.

Styling of Gravity forms can be done in two ways. Either by using 3rd party WordPress styler plugin recommended by “Gravity forms” or using CSS code to design every element of form. In the following sections, we are going to describe you both ways of styling using different sections.

Style Gravity forms using 3rd party recommended the plugin.

Styles and layouts for Gravity forms” is a free 3rd party WordPress plugin recommended by Gravity Forms. It comes with 100+ design options to style every aspect of Gravity Forms. It has built on the WordPress Customizer. Every change you have made on the form has a live preview. it has settings to change styles on responsive devices. To check your form on different devices you only need to click on icons at top of each responsive setting.
This plugin has got tons of features we can’t explain them in this article because this article is about Gravity Forms. To read more about “Styles and Layouts for Gravity Forms” click here. To download the Plugin from WordPress repository check here. Let’s move on to the usage of the plugin for styling Gravity forms.

How to style Gravity forms using “Styles and Layouts for Gravity Forms”.

  • Open the WordPress dashboard of your website then Go to the “Plugins” tab on the left side menu and click at the “Add New” option

    Click on the Add new option under plugins option

    Click on the Add new option under plugins option

  • Search for “Styles and Layouts for Gravity Forms” then Install/Activate the first result.
  • Open page on Front-end where you have added the Gravity form you want to design.
  • Open customizer using the “Customize” button in top WordPress toolbar. Click here to know more about opening the customizer.
  • Click on “Styles and Layouts” panel in customizer.
  • Click on Select form and select the form using dropdown which you have added on the page. After selection customizer will reload automatically.
  • Now all settings which are for styling different part of Gravity Forms will start showing in Customizer.

    Different settings for styling gravity form

    Different settings for styling gravity form

  • To use shortcut icons for styling hover over the fields and click on small circular icons. They will lead to you in the customizer section related to styling for the field.

Video tutorial to show usage of  “Styles and Layouts for Gravity forms”

As now you know how you can style Gravity forms using 3rd party plugin we should move to the next section which is style Gravity Forms using CSS.

How to style Gravity Forms using CSS.

Styling Gravity Forms using CSS is a difficult task. If you are not familiar with CSS then the first method using 3rd part plugin is best for you. This method is only suggested for experienced developers because with CSS you have to style every element using different classes. If you need different styles for each form then you have to use form id with every selector. In this case, the CSS gets very confused and complex.

If you need any help regarding the styling of Gravity forms to contact us or leave your comments in the below section we will reach to you as quickly as possible.