A Guide to Mastering Gravity Forms Styles in Divi for 2026

Gravity Forms is an absolute workhorse, but let's be honest—its default gravity forms styles can stick out like a sore thumb on a beautifully crafted Divi site. The good news is, you're not stuck with them. With a little bit of targeted CSS, you can make your forms look like they were born and raised right inside your Divi layout.

Why Default Gravity Forms Styles Don't Work for Divi Sites

You've poured hours into getting your Divi site just right. The color palette is perfect, the fonts reflect your brand, and every module is meticulously placed. Then you drop in a Gravity Form, and… thud. It just doesn't fit.

Suddenly, you have generic-looking fields and a clunky button that clash with the polished design you worked so hard to achieve. It’s a classic, frustrating problem for Divi users, and you’re not alone.

Gravity Forms is a standalone plugin, and it comes with its own stylesheet designed for broad compatibility, not to blend in with your specific Divi theme. The result is a visual disconnect that can make your entire site feel less professional.

The Problem of Clashing Aesthetics

This isn't just a minor design pet peeve. When a form looks out of place, it can subtly erode user trust. A sleek, minimalist site with a boxy, unstyled form feels jarring and less cohesive.

We've all seen the common pain points:

• Font and Color Mismatches: The form ignores your Divi theme settings, creating a jarring contrast in typography and colors.
• Awkward Spacing: The default margins and padding around form fields can throw off the careful rhythm and spacing of your Divi layout.
• Generic Input Fields: Standard text fields, dropdowns, and checkboxes lack the custom flair you've applied elsewhere on your site.
• Uninspired Buttons: The submit button rarely matches the style, size, or hover effects of your other Divi buttons.

The real issue is that Gravity Forms lives in its own "style bubble." To make it a true part of your Divi design, you need to pop that bubble with some targeted CSS.

By learning how to apply your own custom gravity forms styles, you take back the reins. You're no longer settling for a form that's just functional—you're transforming it into a seamless, professional part of your website. This guide will show you exactly how to do it, step-by-step.

Finding the Right CSS Selectors in Gravity Forms

So, you’ve dropped a Gravity Form onto your Divi page, and… it sticks out like a sore thumb. The default styles just don't match your carefully crafted design. Before you can write a single line of CSS to whip it into shape, you need to know exactly which elements to target. This is where your browser’s developer tools become your absolute best friend.

Trying to guess at CSS selectors is a fast track to frustration. Precision, on the other hand, leads to beautiful, custom forms that feel perfectly integrated with your Divi website. Think of it like getting an x-ray of your webpage—you see the underlying structure and the specific class names Gravity Forms assigns to every field, label, and button. Mastering this is the non-negotiable first step.

Using Your Browser to Inspect Form Elements

Every modern browser—whether it's Chrome, Firefox, Safari, or Edge—comes packed with powerful developer tools. Getting to them is simple: just right-click on any part of your form (like an input field or the submit button) and choose "Inspect" or "Inspect Element."

A new panel will pop up, showing you the page’s HTML on one side and all the CSS rules that apply to it on the other. As you move your mouse over different lines in the HTML panel, the browser will conveniently highlight the corresponding element on your live page. This direct visual feedback makes it incredibly easy to pinpoint the exact piece of the form you want to style. For Divi users aiming to apply custom gravity forms styles, this is the key to unlocking full control.

This view lets you see which styles are currently active and even test new ones live in the browser before ever adding them to your stylesheet. It takes all the guesswork out of the equation.

Key Selectors You Need to Know

While every form you build is a little different, the good news is that Gravity Forms uses a consistent and predictable naming system for its CSS classes. Once you learn the main selectors, you can style almost any form with confidence.

Here's a quick-reference table of the most common CSS selectors you'll be using. Think of this as your cheat sheet for quick styling wins.

Key Gravity Forms CSS Selectors for Quick Styling

Form Element	Common Selector	What It Styles
Main Form Wrapper	.gform_wrapper	The entire form, including the title, fields, and button.
Field Container	.gfield	The block containing one field (label, input, description).
Input Area	.ginput_container	The container directly around the input, select, or textarea.
Text Input	input[type="text"]	A standard single-line text field.
Submit Button	.gform_button	The primary submit button of the form.
Form Title	.gform_title	The main title of the form.

Getting a handle on these fundamental selectors provides a solid foundation for any customization you want to tackle. If you're ready to go deeper, you can always explore our extensive knowledge base on customizing Gravity Forms for more advanced tips and tricks.

Pro Tip: Gravity Forms also gives each form a unique ID, like #gform_wrapper_1. By using this ID in your CSS (for example, #gform_wrapper_1 .gform_button), you can apply styles to one specific form without accidentally changing others on your site. This is perfect for when you need a unique design for a special campaign or landing page.

Alright, now for the fun part. Once you've identified the right CSS selectors, you can start applying your brand's unique gravity forms styles. With Divi, you have a couple of solid options for where to place this custom code. For quick tweaks or site-wide changes, the Divi > Theme Options > Custom CSS area is incredibly convenient. For bigger, more complex projects, I always recommend using a child theme's stylesheet—it’s the gold standard for a reason.

We'll focus on practical, copy-and-paste examples you can grab and adapt for your own Divi site. These snippets tackle the most common styling requests I see, from changing field backgrounds and fonts to designing a submit button that actually gets clicks. I'll break down each CSS rule so you can feel empowered to transform any bland Gravity Form into a seamless part of your website's design.

Styling Input Fields for a Modern Look

Let's start with the most visible part of your form—the input fields. By default, they’re functional but pretty uninspired. A few lines of CSS can make them look clean, modern, and perfectly aligned with your brand.

To do this, we'll target the input, select, and textarea elements inside your form's main wrapper. Here’s a foundational snippet you can drop right into your Divi > Theme Options > Custom CSS panel.

/* — Modern Gravity Forms Field Styles — /
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield textarea {
background-color: #f9f9f9; / A light grey background /
border: 1px solid #ddd; / A subtle border /
border-radius: 5px; / Rounded corners /
padding: 12px 15px; / Comfortable spacing inside the field /
font-size: 16px; / Legible font size /
color: #333; / Dark text color /
width: 100%; / Make fields full-width */
}

This code immediately gives your fields a lighter background, a soft border with rounded corners, and increases the padding and font size for better readability. Pay attention to the width: 100% rule. This is crucial for making your fields stretch to fill their container, which is essential for good-looking responsive layouts.

Creating an Engaging Submit Button

The submit button is arguably the most important element on your form. It's the final call to action, and its design can absolutely make or break a user's decision to complete the form. A generic button gets ignored; a well-styled one gets clicked.

The goal here is to customize the .gform_button class to make it match the other buttons on your Divi site for a cohesive look.

A well-designed submit button isn't just about aesthetics; it’s a crucial usability cue. By using your brand’s primary action color and adding a clear hover effect, you signal to the user exactly what to do next, which can directly impact your form's conversion rate.

Here's how to style your submit button so it really pops, complete with a hover effect for that extra bit of user feedback.

• Make It Stand Out: Use a bold background color that aligns with your brand's primary call-to-action color.
• Improve Readability: Set the text color to something with high contrast, like white on a dark background.
• Add a Hover Effect: Change the background color or opacity on hover to provide clear visual feedback that the button is interactive.

/* — Custom Gravity Forms Submit Button — /
.gform_wrapper .gform_button {
background-color: #6200ea; / Your primary brand color /
color: #ffffff; / White text for contrast */
border: none;
border-radius: 5px;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}

.gform_wrapper .gform_button:hover {
background-color: #3700b3; /* A slightly darker shade on hover */
}

This CSS transforms that default button into something professional and enticing. If you're looking for even more advanced button tricks, check out our guide on how to make the Divi contact form submit button full width, as many of the same principles apply here. By combining these fundamental gravity forms styles, you’re well on your way to creating forms that look like they were built for your Divi theme from day one.

Advanced Styling for a Flawless User Experience

Getting the basic fields and buttons to match your Divi site is a great start, but the real magic happens in the details. Advanced gravity forms styles are what elevate a form from merely functional to a polished, professional experience. This is where we tackle the trickier bits, like custom checkboxes and radio buttons, and make sure our forms look perfect on any device.

These small touches aren't just for show—they build user trust. When every part of your form feels intentional and works flawlessly, you’re creating an intuitive journey that encourages people to actually hit "submit."

Modernizing Checkboxes and Radio Buttons

Let's be honest, default checkboxes and radio buttons look dated and are notoriously stubborn to style directly across different browsers. The modern, and frankly, only reliable way to handle them is to hide the default input and style the <label> instead. This gives you total creative freedom.

First, we’ll make the actual input invisible, but keep it accessible for screen readers and keyboard users.

/* Hide default radio/checkbox but keep it functional */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
opacity: 0;
position: absolute;
width: 1px;
height: 1px;
}

Next, we create our custom-styled box or circle using a ::before pseudo-element on the label. The + selector is your best friend here, targeting the label that immediately follows our hidden input.

/* Create a custom box for the checkbox label */
.gform_wrapper .gfield_checkbox label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 3px;
margin-right: 10px;
vertical-align: middle;
transition: background-color 0.2s;
}
Now for the fun part. The :checked pseudo-class lets us add styles when the user selects the option, providing that instant visual feedback they expect.

/* Style the checked state /
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked + label::before {
background-color: #6200ea; / Your brand color /
border-color: #6200ea;
background-image: url("data:image/svg+xml,…"); / Optional: Add a checkmark SVG */
}
You can use this exact same approach for radio buttons. The only change you need is to set the border-radius to 50% to get that classic circular shape.

Ensuring a Perfect Responsive Form Experience

In a world where most traffic is mobile, a form that isn't responsive is a form that won't get used. That beautiful two-column layout on your desktop will become a cramped, un-tappable nightmare on a phone if you're not careful. This is where CSS media queries save the day.

Media queries are simple rules that apply CSS only when the screen hits a certain size. They are absolutely essential for making Gravity Forms layouts, especially those built with Ready Classes like .gf_left_half and .gf_right_half, behave on mobile.

A responsive form isn't a feature; it's a fundamental requirement. With over 60% of global website traffic coming from mobile devices, ensuring your forms are easy to use on a small screen is critical for capturing every possible lead.

Here’s a snippet I use in almost every Divi project. It targets screens smaller than 768px (Divi's standard tablet breakpoint) and forces any multi-column fields to stack neatly on top of each other.

@media (max-width: 767px) {
/* Stack Gravity Forms columns on mobile */
.gform_wrapper .gform_body .gform_fields .gfield.gf_left_half,
.gform_wrapper .gform_body .gform_fields .gfield.gf_right_half {
width: 100%;
float: none;
margin-right: 0;
}
}
This small block of code is a lifesaver. It makes your form fields full-width and easy to interact with on smaller screens, eliminating user frustration and horizontal scrolling.

Styling Validation Errors and Success Messages

How your form communicates back to the user—whether with an error or a success message—is a huge part of the experience. Clear, on-brand messages feel much more professional and trustworthy than the generic browser defaults.

First, let's tackle validation errors. When a user forgets a required field, the error needs to be obvious and helpful.

• Error Message Container: Target .gform_wrapper .validation_message to style the main error box that shows up at the top.
• Individual Field Errors: Use .gform_wrapper .gfield_error to highlight the specific fields that need attention, usually with a red border.
• Error Text: Style the error text itself using .gform_wrapper .gfield_error .gfield_label and div.gfield_description.validation_message to make it stand out.

The success message is just as crucial. It's your last touchpoint, a chance to confirm the submission and thank the user.

/* Style the confirmation message /
.gform_confirmation_wrapper .gform_confirmation_message {
background-color: #eaf7ed; / A light green /
border: 1px solid #c8e6c9;
color: #2e7d32; / A dark green text color */
padding: 20px;
border-radius: 5px;
text-align: center;
}

These advanced gravity forms styles transform your form from a simple data collection tool into an integral, polished part of your website. For comprehensive guidance on creating a visually appealing and highly functional website that incorporates effective form styling, consider exploring essential steps for mastering overall web design.

Integrating Styled Forms with Divi's Ecosystem

So you've spent the time crafting a gorgeous, perfectly styled Gravity Form. Now what? A beautiful form is great, but where and how you display it is just as critical for getting conversions.

Thankfully, getting your custom-styled Gravity Forms into the Divi Builder is dead simple. The most direct way is to use the shortcode that Gravity Forms generates for you. Just grab the shortcode (it'll look something like [gravityform id="1" title="false" description="false"]) and paste it into any Divi Text or Code module.

Because you’ve already added your custom CSS—likely in Divi > Theme Options > Custom CSS—it will automatically kick in. Your stunning new form will appear right where you placed the module, styled and ready to go. It’s a fast, reliable method that works perfectly for standard contact pages or sections.

Elevating Your Strategy with Smart Triggers

But what if you want to do more than just drop a form on a page? To really boost your results, you need to show your form at the exact moment a user is most likely to act. This is where you can tap into the real power of the Divi ecosystem, especially with tools like our own Divi Areas Pro.

Instead of your form just sitting there passively, you can turn it into a dynamic conversion tool. By pairing your sharp gravity forms styles with intelligent triggers, you create an experience that feels responsive and genuinely helpful to the user.

Here are just a few powerful ways you could set this up:

• Exit-Intent Popups: Catch visitors before they leave. Trigger your styled contact form in a popup the moment a user’s cursor heads for the exit. This is a classic for a reason—it’s a highly effective way to capture leads you would have otherwise lost.
• Scroll-Triggered Fly-Ins: Wait until a user is clearly engaged. After someone scrolls 70% down a blog post, slide a newsletter signup form in from the corner. They’re invested in your content, making it the perfect time to invite them to subscribe.
• Click-Triggered Modals: Ditch the separate contact page. Add a "Request a Quote" button to your site's header that opens your styled Gravity Form in a clean, focused popup.

By combining strategic placement with intelligent triggers, you move beyond just having a pretty form. You create a high-performance lead generation machine that integrates seamlessly into the user journey, often boosting conversion rates significantly.

A Cohesive and Polished Integration

Ultimately, the goal is to make your Gravity Form feel like a native, intentional part of your Divi site—not some clunky add-on. When a popup appears, it should share the same branding, fonts, and button styles as the rest of the page. This consistency builds trust and reinforces your brand's professional image.

For those who want a polished look across their entire Divi site, not just forms, working with professionals for Custom Website Design and Integration can ensure every element is cohesive.

For instance, you can use Divi’s powerful design features to build a high-impact landing page and then use a triggered Gravity Form as the call-to-action. You can see how we approach building these layouts in our guide on creating a lead generation page using Divi's contact form module. Just apply those same design principles, but swap in your more powerful, custom-styled Gravity Form. This combination is a winning formula for any marketer or business owner.

Frequently Asked Questions About Gravity Forms Styles

You’ve built the perfect form with Gravity Forms, dropped it into your Divi layout… but the styling is all wrong. The buttons are off-brand, the fields are clunky, and it just doesn't match the rest of your beautiful site. Don't worry, you're not alone.

Getting your Gravity Forms styles to bend to your will inside Divi can throw a few curveballs. Here are the answers to the most common questions and roadblocks I see designers face, so you can stop fighting with your code and start creating that pixel-perfect finish.

Why Are My Custom CSS Styles Not Working?

This is probably the #1 issue I see Divi users run into. You write what looks like perfect CSS, but nothing happens. The default Gravity Forms styles just stubbornly refuse to change.

The culprit is almost always CSS specificity. Think of it as a battle: Gravity Forms has its own stylesheet, and its rules are often quite specific. If your CSS rule isn't "stronger" or more specific, the browser will simply ignore it in favor of the default.

The trick is to give your CSS selectors more context. Instead of a generic selector like .gform_button, try prefixing it with a Divi class, like .et_pb_section .gform_button. This tells the browser, "Hey, only apply this style to a Gravity Form button if it's inside a Divi section." This makes your rule more powerful and ensures it wins the specificity battle.

A quick word on !important: use it as a last resort. While it’s a tempting quick fix, it’s a brute-force approach that makes your code messy and incredibly hard to debug later. Your best friend here is your browser's "Inspect" tool. It will show you exactly which styles are being applied and which are getting overridden, making it much easier to see why your code isn't working.

How Do I Style Radio Buttons and Checkboxes Properly?

Styling radio buttons and checkboxes directly is a classic developer headache because browsers render them inconsistently. The modern, and frankly much better, solution is to hide the default browser input and style the <label> element to look like a custom one.

This approach gives you total creative freedom and, more importantly, ensures your forms look the same across all browsers.

Here's the general idea:

1. Hide the Real Input: First, you make the actual <input> invisible but keep it functional for accessibility. Setting its opacity to 0 and using position: absolute; is a common way to do this.
2. Build a Custom Element: Next, you use the ::before or ::after pseudo-element on the label to create your new visual element—a custom box for a checkbox or a circle for a radio button.
3. Style the Checked State: Finally, you use the :checked pseudo-class and the adjacent sibling selector (+) to change your custom element's appearance when a user selects it. For example, a rule like input[type='radio']:checked + label::before { background-color: #0073e6; } will change the background color of your custom radio button when it's selected.

It's a few extra steps, but the result is a polished, professional look that default browser styles just can't match.

What Is the Best Way to Make Gravity Forms Responsive?

Making your forms work beautifully on mobile requires a two-step approach. The first part is easy: make sure your basic form fields use a relative width, like width: 100%;. This lets them adapt to the width of their container.

The second part is where most people get stuck. If you've used Gravity Forms' CSS Ready Classes to create multi-column layouts (like gf_left_half and gf_right_half), you'll notice they don't stack on mobile by default. You have to tell them to. This is where CSS media queries come in.

A simple media query is all it takes to fix those stubborn multi-column layouts on smaller screens. This little block of code is a lifesaver for mobile usability.

@media (max-width: 767px) {
.gf_left_half,
.gf_right_half {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
}

This CSS tells the browser that on any screen narrower than 768px, those half-width columns should become full-width and stack vertically. This instantly makes your form usable on a phone, preventing users from having to pinch, zoom, or scroll horizontally.

Can I Use the Divi Builder to Style Gravity Forms?

In a word: no. This is a huge point of confusion for new Divi users. The Divi Builder's design toggles and settings only work on native Divi modules, like the Divi Contact Form.

When you drop a Gravity Form into your layout (usually by pasting its shortcode into a Text or Code module), Divi just sees a string of code. It has no idea what a form field, a label, or a submit button is, so its design controls can't target them.

That’s why custom CSS is your best friend for styling Gravity Forms. It's the only method that gives you the granular, pixel-perfect control you need to make your form look like it was truly designed for your Divi website.

---

Ready to take your Divi site to the next level? With Divimode, you can build high-performing, interactive websites using powerful tools like Divi Areas Pro for advanced popups, fly-ins, and dynamic content.

Explore our plugins and tutorials at Divimode.com