Gravity Forms themes explained: Modernize your forms effortlessly

I walk you through how to use themes in Gravity Forms to customize the look and feel of your forms. Themes make it easy to modify form styles and achieve a professional look without the need for custom code!

I’ll cover the themes available, how to set a default theme, and ways to override default form styles across your entire website. Ready to give your forms a fresh, modern vibe? 

Let’s dive in.

What are themes in Gravity Forms?

Not to be confused with WordPress themes, Gravity Forms themes change the look and feel of your forms. You can apply a theme globally across all of your forms, or individually to specific forms.

Themes were released in Gravity Forms version 2.7 with the introduction of the Orbital theme. Orbital adds basic styles to forms, ensuring they look good on any website. It’s also highly customizable, allowing for styles to be tweaked in the WordPress block editor.

Available Gravity Forms themes

There are currently two form themes available:

• Orbital – A modern theme that includes a range of customizable styles. Orbital looks great with any WordPress theme.
• Gravity Forms 2.5 theme – A minimalist theme that aims to adopt styling from your WordPress theme. This theme may require additional custom styling to look its best on your site.

If you want modern-looking forms, I’d suggest using the Orbital theme. You can then tweak the styles to your liking using the WordPress editor or a custom code snippet (more on that later).

Selecting a form theme 

So now that you know what themes are and which themes are available, you’re probably wondering how to actually apply them to your forms. There are different ways to apply form themes depending on how you choose to embed your form.

If you choose to embed your form using the Gravity Forms block, you can select a theme from the “Form Theme” dropdown in the block settings.

If you’re using the Gravity Forms shortcode to embed your form, you can define the theme using the “theme” parameter. Here’s an example:

[gravityform id="8" title="true" theme="orbital"]

Now let’s take a look at how to set a global theme for all new forms.

Setting a global theme for all forms

If you want to specify a default theme for all new forms, you can do so in the Gravity Forms settings. Simply hover over “Forms”, click “Settings”, and then scroll down to the “Default Form Theme” option.

If you select Orbital as your new default theme, all new forms that you create will use this theme by default.

Using Orbital to style individual forms

While Orbital looks clean and modern out-of-the-box, there may be times when you want to customize things further. You can do this using the Gravity Forms block.

When you embed a form in the block editor and select “Orbital” as your theme, you will see several styling options appear enabling you to change the look and feel of your form.

Here are the styles that you can modify in the block settings:

• Input styles – Change the size, border radius and colors of field inputs.
• Label styles – Change the font size and colors or field labels.
• Description styles – Change the font size and color of field descriptions.
• Button styles – Change the background and text colors of the submit button.

The style modifications you make here will only be applied to that single form. However, you can copy these styles for use elsewhere by clicking on the three dots and selecting “Copy Form Styles”. This will copy the styles to your clipboard as a JSON string.

You can then apply these styles to another Gravity Forms block by clicking on the three dots and selecting “Paste Form Styles”. You can also paste the JSON string into a code snippet for overriding default styles on your website!

💡 Pro tip: To learn more about changing the look and feel of your forms, read our ultimate guide to styling Gravity Forms.

Overriding the Gravity Forms default styles

To override the Gravity Forms default styles used across your site, you can use the gform_default_styles filter.

The filter requires a $styles parameter which can either be an array or JSON encoded string. Here’s an example of using the filter together with styles copied from a Gravity Forms block:

add_filter( 'gform_default_styles', function( $styles ) {

    return '{"theme":"","inputBorderRadius":"20","inputBorderColor":"#0693e3","inputBackgroundColor":"#fff","inputColor":"#112337","inputPrimaryColor":"#204ce5","labelFontSize":"20","labelColor":"#112337","descriptionColor":"#585e6a","buttonPrimaryBackgroundColor":"#7700e6","buttonPrimaryColor":"#fff"}';

} );

To learn more about this filter and setting default form styles, check out this helpful doc. 

Commonly asked questions:

Modernize your forms with Gravity Forms themes

Themes in Gravity Forms make it easier than ever to give your forms a polished look that blends seamlessly with your website. 

With flexible options to apply themes globally or customize individual forms, you have complete control over your form styling. Take a moment to explore these features and see how themes can help you create engaging, professional-looking forms for your site.

Helpful tips right in your inbox.

Subscribe to our weekly newsletter for tips, special offers, and more!

Enter your email.(Required)

Subscribe

Δ

Helpful tips right in your inbox.

Subscribe to our weekly newsletter for tips, special offers, and more!

Enter your email.(Required)

Subscribe

Δ