Making Gravity Forms Inputs Play Nice with Block Themes

If you’ve ever added a Gravity Form to a beautifully designed block theme, you’ve probably noticed something frustrating: the form looks like it’s from a completely different website. The buttons don’t match your theme’s button styles, the inputs have their own ideas about sizing, and trying to make everything consistent feels like fighting against the plugin rather than working with it.

I built a solution that solves this without breaking Gravity Forms’ powerful features.

The Problem

Gravity Forms is incredibly powerful for building complex forms, but its approach to styling creates friction with block themes:

Gravity Forms pushes you toward their Orbital theme customizer – a per-form visual builder where you adjust colors, spacing, and styles for each individual form. For agencies or developers managing multiple sites with block themes, this is a pain:

Every form needs individual styling configuration
Styles don’t automatically match your theme’s design system
You’re maintaining form styles separately from your theme
No consistency between forms unless you manually replicate settings
Form buttons don’t use your theme’s block button system

And the alternatives aren’t much better. Most styling solutions either:

Override so much CSS they break when Gravity Forms updates
Require maintaining separate styles for every theme variation
Don’t actually integrate – they just force custom styles on top

A Better Approach

I created a three-part system that gives you complete flexibility in how you integrate Gravity Forms with block themes:

Part 1: Real Block Buttons

Instead of just styling Gravity Forms buttons with CSS, this PHP snippet actually replaces them with real WordPress block buttons. It intercepts the button HTML and runs it through do_blocks(), so you get actual wp:button blocks that automatically inherit your theme’s button styles.

No more maintaining separate button CSS for forms. Your theme’s button design system just works.

Part 2: Scalable Input Styling

TThe SCSS package styles all form inputs using:

CSS custom properties for easy customization
Em-based measurements so everything scales proportionally
Mask-based checkbox/radio for crisp rendering at any size
Minimal overrides that don’t fight with Gravity Forms

Change the font-size on a form, and everything grows together: inputs, labels, spacing, checkboxes – all of it.

Part 3: Visual Editor Controls (New!)

The Gutenberg block wrapper provides:

9 visual color controls directly in the block editor sidebar
Automatic RGBA conversion for reliable CSS rendering
Dynamic select arrows that match your input text color
Real-time preview in the editor
Full block supports for typography, spacing, borders, and more

Pick colors visually, see changes instantly, and let the block handle all the technical details.

What Gets Styled

This system focuses specifically on form input elements:

Text inputs (email, url, password, number, date, etc.)
Textareas
Select dropdowns (with custom SVG arrows)
Checkboxes (with mask-based checkmarks)
Radio buttons (with mask-based dots)
File uploads
Progress bars
Buttons
Labels
Descriptions

What Stays Untouched

Everything else works exactly as Gravity Forms designed it:

Grid system and layouts
Field positioning
Multi-column layouts
Conditional logic
Section breaks
Page breaks
HTML blocks
All structural features

Your forms keep all their power and flexibility. This just makes them look better.

The Scalability Feature

Here’s my favorite part: because everything uses em units, you can resize entire forms by changing one property.

css

/* Want a compact newsletter signup? */
:root .sidebar .gform_wrapper.gravity-theme {
  font-size: 1rem;
}

/* Need a prominent hero form? */
:root .hero-section .gform_wrapper.gravity-theme {
  font-size: 1.5rem;
}

Everything scales proportionally: input padding, border widths, checkbox sizes, button dimensions, label spacing – all of it. No media queries needed, no per-element adjustments.

This is how responsive design should work.

How It Works

The Button Replacement

The PHP class hooks into Gravity Forms’ button filters and uses WordPress’s HTML processor to safely parse and transform the markup:

php

// Gravity Forms renders this:
<input type="submit" class="button gform-button" value="Submit">

// Gets transformed into:
<!-- wp:button -->
<div class="wp-block-button">
    <button class="wp-block-button__link wp-element-button">Submit</button>
</div>
<!-- /wp:button -->

IIt’s a real block button, rendered through Gutenberg’s block system. Your theme.json configurations, block styles, and variations all apply automatically.

The Styling System

The SCSS uses CSS custom properties that work out of the box:

scss

body {
    --form--labels: currentColor;
    --form--labels--required: currentColor;
    
    --form--input--text: #343434;
    --form--input--background: #ffffff;
    --form--input--focus--color: #007cba;

    --form--input--border--color: #aaaaaa;
    --form--input--border--style: solid;
    --form--input--border--width: 0.075em;
    --form--input--border--radius: 0px;
    
    --form--input--padding-x: 0.35em;
    --form--input--padding-y: 0.5em;
    --form--input--lineheight: inherit;
    
    --form--select--arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7.41'> <path d='M10.02,6,8.61,7.41,13.19,12,8.61,16.59,10.02,18l6-6Z' transform='translate(18 -8.61) rotate(90)' fill='rgb(52, 52, 52)'/></svg>");
    --form--select--arrow--width: .95em;

    --form--checkbox-radio--text: #ffffff;
    --form--checkbox-radio--background: #007cba;

    --form--progressbar--background: #cdcdcd;
    --form--progressbar--foreground: #007cba;
    --form--progressbar--foreground--text: #ffffff;
}

Override any variable in your own CSS to customize. The styles are minimal and specific, so they don’t conflict with Gravity Forms’ layout system.

The Gutenberg Block

The block provides visual controls and handles all the technical complexity:

Converts theme colors to RGBA automatically
Generates dynamic select arrows that match input colors
Sets CSS custom properties on the wrapper element
Enforces Gravity Forms 2.5 Theme (because Orbital injects too much CSS)
Previews styled forms directly in the editor

Pick colors from your theme palette or set custom values. The block converts everything to RGBA and outputs CSS variables for the styling system to use.

Here is how to edit default for the block in theme.json

{
  "styles": {
    "blocks": {
      "groundworx/gutenberg-gravity-forms": {
        "typography": {
          "fontSize": "1.125rem"
        },
        "spacing": {
          "padding": {
            "top": "2rem",
            "bottom": "2rem"
          }
        },
        "css": "--form--input--border--radius: 0.5em; --form--input--border--width: 2px; --form--input--padding-x: 0.75em; --form--input--padding-y: 0.75em;"
      }
    }
  }
}

Installation Options

Option 1: Just the Styles

Perfect if you want full control and don’t need visual editing.

Add the SCSS files to your theme
Compile and enqueue the styles
Set Gravity Forms to use “Gravity Forms 2.5 Theme”

Customize by editing the CSS custom properties in _forms.scss or override them per-form:

scss

:root .gform_wrapper.gravity-theme.contact-form {
    --form--input--text: #ff0000;
    --form--input--background: #f5f5f5;
}

Quick SetupOption 2: Styles + Button Replacement

Get theme-integrated buttons plus styled inputs.

Add the PHP snippet to functions.php
Add the SCSS files to your theme
Compile and enqueue
Configure button styles (optional)

php

GravityForms_Block_Buttons::init([
    'primary_style' => 'is-style-fill',
    'secondary_style' => 'is-style-outline'
]);

Option 3: Complete Visual Integration (Recommended)

Get everything: visual controls, styled inputs, and block buttons.

Copy the block source files to your theme
Build the block: npm run build
Register in functions.php: require_once get_template_directory() . '/build/blocks/gutenberg-gravity-forms/block.php';
Add the SCSS files and compile
Optionally add the button replacement PHP

Use the block for forms you want visual control over. The styling system ensures consistency across all forms.

Why This Matters

Most form styling solutions treat forms as something separate from your theme. They override everything and hope it works.

This approach integrates forms into your theme’s design system. Whether you use the visual block controls or edit CSS directly, you’re working with the same system – CSS custom properties that the styling mixins consume.

The result? Forms that look like they were designed for your theme, not bolted onto it.

Get the Code

This is part of the Groundworx Snippets collection – professional WordPress code for developers.

The repository includes:

Button Replacement PHP – Convert form buttons to real block buttons
Form Styling SCSS – Complete styling system with CSS custom properties
Gutenberg Block – Visual color controls and editor integration
Complete Documentation – Setup guides, customization examples, troubleshooting

Use them together for complete integration, or use any piece independently.e either one independently.

The complete solution is now available as a WordPress plugin!

Download Groundworx Gravity Forms Plugin – Includes the Gutenberg block, button replacement, and form styling all in one package.

Technical Requirements

WordPress 6.4+ (for WP_HTML_Processor and block features)
Gravity Forms 2.5+
PHP 7.4+
SCSS compiler (for styles)
Node.js & npm (for building the block)
Block theme or theme with block support

Need Help?

This is the kind of WordPress development we do at Groundworx. If you need custom integration, theme development, or help implementing these solutions, let’s talk.

Built by Johanne Courtright at Groundworx – WordPress development for developers who value quality and maintainability.