Styling Gravity Forms

Gravity Forms allows anyone to create highly advanced, powerful forms in just a few minutes. But there are times when you might want to change the look and feel of your form. Thankfully, there are many resources available to help you do that.

The Gravity Forms Documentation

The Gravity Forms documentation might be all you need to style your form to your liking. The documentation is thorough and contains examples to get you started. Here's a small sampling of what's available in the documentation:

• Form themes and styling options - Gravity Forms themes (introduced in version 2.7) provide a new, easy way to change the look and feel of your forms from within the WordPress block editor. 
• CSS Visual Guide - This will help you understand how forms are structured and how the CSS relates to the structure. 
• CSS Ready Classes - Gravity Forms Ready Classes allow you to create different layouts for the fields in your form. 
• Submit Button CSS Selectors - How to article on changing the appearance of your submit button. Helpful for A/B testing and conversion rate optimization. 
• Changing Font Sizes - Gravity Forms uses your theme's style, but you might want to change the font size on your form page.

Plugins and Add-Ons

Using a plugin to style your form can save you a lot of time, especially if you don't want to dig into any CSS code yourself.

• Styler for Gravity Forms - Once you install and activate this plugin, you'll see styling options in the WordPress Customizer when viewing a page with an embedded form.
• Styles & Layouts for Gravity Forms - Another free plugin that uses the WordPress Customizer to style your forms. It also offers several premium add-ons for additional styling options.
• Gravity Forms Styles Pro - A premium add-on that gives you control of your form elements and lets you build complex layouts with clicks instead of code.
• CSS Hero - A premium plugin that provides a visual editor for your form. You can try a live demo before buying to see if it suits your needs.

Styling Gravity Forms with Page Builders

Page builders have become increasingly popular as they allow non-designers to create great-looking websites reasonably easily. Here are a few add-ons that will enable you to to style Gravity Forms with your existing page builder plugin.

• PowerPack Beaver Addons - A suite of add-ons for Beaver Builder includes a module for styling Gravity Forms. You can see some example forms here.
• Essential Addons - If Elementor is your page builder of choice, this collection of elements includes an element for styling Gravity Forms.

Themes and CSS Frameworks

While Gravity Forms is compatible with most themes and CSS frameworks, it may take a little nudging to get your form looking just the way you want it to.

• How to Style Gravity Forms to Look Like Divi - Divi is one of the most popular WordPress themes. This tutorial from Elegant Themes will show you how to integrate Gravity Forms seamlessly.
• Gravity Divi Module - A custom module that makes styling Gravity Forms more intuitive when coupled with the Divi theme.
• Gravity Forms in Style - A premium WordPress plugin that allows you to apply Twitter Bootstrap styles to all Gravity Forms elements.