How to Style Gravity Forms without CSS Coding

Gravity Forms is among the top form builder plugins for WordPress. It comes with lots of features and if you have a requirement for an advanced form with features like conditional logic, multi-page layouts, complex fields and integration with 3rd party services then it is the best choice. However if you need to change the design and layout of the form then you have to rely on CSS coding. If you don't know CSS coding then you have to either hire a freelancer to style the form or learn CSS coding yourself.

Styles and Layouts for Gravity Forms is a free WordPress plugin using which you can modify the design of the forms without any CSS coding. It comes with more than 100 settings to change colors, borders, width, fonts and a lot of other properties. All these settings are available for every aspect of form like title, description, form wrapper, radio buttons, checkbox inputs, paragraph text area, single text fields, labels, sections and submit button.

In this article I will show you how you can use this plugin and make your forms look beautiful with ease.

• Download Styles and Layouts for Gravity Forms from WordPress plugin repository. You can also download it directly from WordPress admin dashboard. Navigate to Plugins -> Add New and then search for Styles and Layouts to install it.
• Once you have downloaded and activated this plugin then open the fronted of post/page in which you have added the form.
• Click on the Customizer option present in admin bar to open WordPress customizer sidebar. Make sure that you are logged in with admin privileges else the admin bar won't be visible to you.

• Now navigate to Styles & Layouts Gravity Forms panel and you will see section to Select the form.

• All others sections are hidden at this moment because it is necessary to select the form first. Once you have selected the form which you want to design then page will automatically refresh.

• Now again go to Styles & Layouts Gravity Forms panel but this time you will notice that there are multiple sections available to design the form. Click on any section like Form Wrapper to change its design.

• Form Wrapper section contains options to change the font family, background colour, form width, margin, padding, border width, border color, border style and border radius. You can use color picker and hex codes to change colour and for font size, border radius etc you can give values in pixels, percentage or em.

• Design each and every aspect of the form and then click on the Save and Publish button to make the changes permanent.

Should you use CSS or Plugin method to Design Forms

If you know CSS and still confused whether you should manually design the form or should you use the plugin to do it for you then check the pro's of each method below.

Pro's of CSS method

• You can target every aspect of the form
• You can use any CSS property to design the form

Pro's of Plugin method

• Beginner friendly
• Live preview of all changes
• Design settings work even if you change your theme
• Options to customize the design of most parts of form
• No fear of breaking website code
• Use tools like color picker instead of giving hex codes yourself

I personally use Plugin method even-though I am very good with CSS coding because it is lot easier and you don't have to edit theme files if you need to change anything. If you still want to try CSS method then I will recommend that you should checkout official CSS coding examples from Gravity Forms website.

Let us know which method you prefer to design your form. If you have any questions then leave a comment and I will solve your query.

Author Bio:

Aman is a WordPress programmer and creates plugins using WordPress hooks as well as filters. He is also author of many premium plugins like Salesforce Formidable Pro addon.  You can check his complete portfolio at http://webholics.in