Troubleshooting Divi Cache and Performance Issues with Gravity Forms

Overview

This article explains how the Divi theme’s caching and script optimization features can interfere with Gravity Forms, and how to identify and resolve the conflict.

Symptoms

  • The form looks correct inside the Divi Builder, but renders unstyled or partially styled on the live page.
  • Form styling broke immediately after a Gravity Forms update, and rolling back Gravity Forms appears to fix it.
  • Conditional logic, multi-page navigation, or AJAX submission does nothing, with no error shown.
  • Fields are invisible or collapsed until the page is resized or scrolled.
  • Changes to form styling or custom CSS never reach the front end, no matter how often you clear your caching plugin.
  • The styling you applied in the Gravity Forms module’s design settings doesn’t appear on the live page, or the form falls back to its default appearance.
  • The form behaves correctly when you are logged in as an administrator, but not when you are logged out.

Why It Happens

Static CSS caching

It compiles your page styles, including any styling applied through the Gravity Forms module, into a file under /wp-content/et-cache/, and serves that file instead of generating the CSS on each request. Each page gets its own numbered subfolder matching its post ID. If the file was written before your form’s styling changed, the stale copy continues to be served. In Divi 5 this is always on; you clear it with the Clear CSS Cache button.

Divi › Theme Options › header bar, visible from any tab

Critical CSS

It defers styles considered below the fold. A form low on a long page can render unstyled, or with fields hidden, until the deferred styles arrive.

Divi › Theme Options › General › Performance

Defer jQuery and jQuery Migrate

It moves jQuery into the page body. Gravity Forms scripts expect jQuery to be available when they run, so deferring it can break conditional logic, multi-page forms, and AJAX-enabled forms.

Divi › Theme Options › General › Performance

Defer Additional Third-Party Scripts

It defers scripts registered by other plugins, including Gravity Forms. Divi’s own description of this setting warns that it can cause JavaScript errors.

Divi › Theme Options › General › Performance

Dynamic Module Framework

It loads only the assets Divi detects the page needs. If your form is embedded with a shortcode, a Code module, or another plugin’s output rather than the Gravity Forms module, detection can miss it.

Divi › Theme Options › General › Performance

Output Styles Inline

It prints Divi’s styles into the page instead of loading them as a separate file. The styles are then cached as part of the HTML by any page cache in front of your site, rather than as a stylesheet that the browser can revalidate on its own.

Divi › Theme Options › Builder › Advanced

How the Form is Embedded

Divi treats the two embed methods differently, and that determines which of the settings below can affect your form.

The Gravity Forms module (Divi 5.11 and later)
It renders the form natively and generates its own styling for the fields. Divi recognizes the form as one of its modules, but the styling it generates is cached alongside the rest of the page’s CSS.

A shortcode, Code module, block, or widget
It places the form on the page, but Divi doesn’t recognize it as a module. Features that load assets based on the modules Divi detects can miss it entirely.

Confirm the Issue

  1. Open the page in the Divi Builder and check whether the form is placed with the Gravity Forms module or inside a Code module or shortcode.
  2. Open the live page, right-click, and select View Page Source.
  3. Search for /wp-content/et-cache/. A stylesheet loaded from that folder means Divi is serving static CSS for this page. The number in the path is the page’s post ID, so you can confirm you are looking at the right page’s cached file.

How to Fix It

Note: These settings are available since Divi 5. If you are using an older version, refer to the official Divi documentation for more information.

  1. Go to Divi › Theme Options and click Clear CSS Cache in the header bar. Divi rebuilds the files on the next page load.
  2. Clear every other cache on the site: caching plugins, the host cache, and the CDN, then hard-refresh the page.
  3. If the problem remains, return to Divi › Theme Options › General › Performance and turn off one option at a time, re-testing the form after each: Defer jQuery And jQuery Migrate, Defer Additional Third-Party Scripts, Critical CSS, then Dynamic Module Framework.
  4. Once you know which option is responsible, leave the others enabled.
    If Defer jQuery And jQuery Migrate turns out to be the cause and you want to keep it enabled, make sure Enqueue jQuery Compatibility Script is also on before disabling it outright.

Resources

​Disclaimer: Third-party services, plugins, or code snippets that are referenced by our Support documentation or in Support Team communications are provided as suggestions only. We do not evaluate, test or officially support third-party solutions. You are wholly responsible for determining if any suggestion given is sufficient to meet the functional, security, legal, ongoing cost and support needs of your project.

Feedback, feature, and integration requests, and other functionality ideas can be submitted at https://gravity.com/feature-request/.