How to Fix Gravity Forms Ajax Not Working in Form Preview

Many WordPress users face a common problem — Gravity Forms AJAX not working in preview. This issue often appears when testing forms inside the WordPress editor or page preview. The form looks fine, but clicking “Submit” does nothing. Sometimes the spinner keeps spinning, and no data is sent. Other times, nothing happens at all.

This AJAX form preview issue in Gravity Forms affects both new and experienced users. It interrupts the test process and delays development. It also creates confusion, especially when the same form works fine on the live page.

Here’s why this problem matters:

• Users can’t confirm that submissions are working during preview.
• Errors like gform is not defined may appear in the browser console.
• The form’s spinner might not appear or work as expected.
• Developers often waste time debugging the wrong things.

This guide will help you understand, diagnose, and fix the issue.

AJAX allows forms to submit without reloading the page. In Gravity Forms, this feature improves user experience and saves time. When AJAX works, users can stay on the same page after submitting the form.

Gravity Forms supports AJAX when using:

• Shortcodes like [gravityform id=”1″ ajax=”true”]
• Gutenberg blocks with AJAX enabled in settings
• Some page builders that support AJAX forms

But in preview mode, things work differently. The page may not load all needed scripts. Sometimes, jQuery is not loaded, or AJAX handlers are skipped. This leads to Gravity Forms AJAX spinner not appearing, or the form not submitting at all.

The result? A form that looks ready but doesn’t actually work during preview.

When AJAX fails in Gravity Forms preview, the form may appear broken. The issue can look simple but hides complex causes. Knowing the signs helps you find the right fix faster.

Here are some common signs:

• The AJAX spinner keeps spinning, but the form never submits.
• You click “Submit,” but nothing happens on the page.
• The form seems frozen or unresponsive after submission.
• No confirmation message or redirect appears.

These problems happen often when using preview mode in WordPress.

JavaScript Errors in the Console

Open your browser’s developer tools and check the console tab. If you see the error gform is not defined, it means Gravity Forms scripts are not loaded. This is a major reason for AJAX not working in preview.

Other common issues in the console include:

• Missing jQuery
• Script loading in the wrong order
• Blocked or minified JS files

These errors show that the form doesn’t have what it needs to run AJAX.

jQuery Not Loaded in Preview

In many cases, the preview page skips loading jQuery. Without it, Gravity Forms can’t trigger its AJAX process. This problem appears often in themes that remove default scripts or use custom loading rules.

To check this:

• Inspect the page source or use browser tools.
• Look for missing <script> tags for jQuery or Gravity Forms.

This symptom often connects to Gravity Forms preview jQuery not loaded issues. It’s especially common when using custom-built themes or page builders.

AJAX Fails in Popups or Builders

If your form is inside a popup or page builder block, AJAX may fail to start. Many builders delay loading scripts until after the page loads. That breaks Gravity Forms’ AJAX setup.

These issues are common in:

• Elementor and other visual builders
• Popup modals that load forms with delay
• Templates that skip enqueueing required scripts

Being aware of these signs helps you trace the problem to its root.

Understanding the reason why AJAX fails in preview mode is key. In many cases, it’s not a bug in Gravity Forms, but how it interacts with your site. The issue can be due to scripts, shortcodes, plugins, or even your theme. Below are the most common causes developers face.

1. Incorrect Shortcode Configuration

This is one of the most common mistakes. If you forget to add ajax=”true” to your Gravity Forms shortcode, AJAX simply won’t work.

For example, this won’t work:

[gravityform id=”1″]

This will work:

[gravityform id=”1″ ajax=”true”]

Without the correct attribute, the form loads normally but won’t submit via AJAX. This also causes multi-page form preview issues.

2. Legacy reCAPTCHA Still in Use

Some forms still use reCAPTCHA v2 (checkbox style), which is not fully compatible with AJAX submissions in preview mode. It can block the form from submitting.

When reCAPTCHA is active and AJAX fails, try disabling it. If the form then works, reCAPTCHA is likely the issue. This is a common Gravity Forms AJAX reCAPTCHA conflict.

3. jQuery or Gravity Forms Scripts Not Loaded

In some cases, jQuery or Gravity Forms’ core JavaScript files are missing. This often happens when using custom themes, such as Roots or Sage, which load scripts differently.

Missing scripts can cause:

• gform is not defined errors
• No AJAX spinner
• Submission buttons doing nothing

Preview pages may also skip important script enqueues, which breaks the AJAX process.

4. Conflicts from Third-Party Plugins

Caching or optimization plugins can block or delay important scripts. Some minify or defer JavaScript, which prevents AJAX from running in preview.

Common plugin conflicts include:

• Page caching (e.g., WP Rocket, W3 Total Cache)
• JavaScript minifiers
• Content delivery networks (CDNs)

These tools may strip needed inline scripts or load them too late.

5. Theme or Page Builder Interference

Many modern themes use heavy JavaScript frameworks. Some also block or delay script execution in previews. Page builders like Elementor or Divi may wrap forms in containers that prevent proper rendering.

Problems caused by themes or builders include:

• AJAX not triggered on submit
• Form not visible until a user scrolls
• Scripts blocked from running inside popups

This is often a theme conflict with Gravity Forms AJAX in previews.

6. Preview Page-Specific Limitations

WordPress preview pages do not always load content like regular front-end pages. This means some shortcode data or AJAX scripts may be missing.

In preview mode:

• The form may be present but unresponsive
• AJAX attributes might not apply
• Gravity Forms hooks may not fire correctly

You may see issues like the Gravity Forms AJAX shortcode not working or forms showing without interactivity.

7. Conditional Logic and Hidden Containers

If your form uses conditional logic, hidden fields, or is loaded in a popup, AJAX can break. When these elements are hidden by default, Gravity Forms may not initialize them properly.

This can lead to:

• Scripts not binding to dynamic form fields
• Date pickers or dropdowns not showing
• Form not submitting when shown via popup

This is especially common when forms load through modals or delayed containers.

8. Multi-Page Forms with AJAX in Preview

Multi-step forms using AJAX often fail in preview. Each page relies on scripts that might not be initialized. The result is a broken “Next” button or form reset.

Preview mode can’t fully simulate a real page. So AJAX multi-page Gravity Form preview often shows misleading behavior.

Now that you’ve identified the root cause, it’s time to apply the fix. These fixes will help restore full AJAX functionality—even in form preview mode.

1. Use Correct Shortcode with AJAX Enabled

The most important step is to use the right shortcode. If AJAX is not enabled in the shortcode or block settings, Gravity Forms won’t use it.

To fix this:

• Edit the form embed shortcode.
• Add ajax=”true” to enable AJAX submission.

Example:

[gravityform id=”1″ ajax=”true”]

This simple change often solves Gravity Forms AJAX shortcode not working issues. In Gutenberg, make sure the AJAX toggle is enabled in the form block settings.

2. Replace or Disable Legacy reCAPTCHA

Legacy reCAPTCHA can block AJAX in preview. If you’re using the v2 (checkbox) style, try switching to a newer version.

How to fix this:

• Open Gravity Forms → Settings → reCAPTCHA.
• Disable the old reCAPTCHA v2 keys.
• Try using reCAPTCHA v3 or hCaptcha instead.

You can also disable reCAPTCHA temporarily to confirm it’s the issue. If AJAX works after removing it, the reCAPTCHA conflict was the cause.

3. Make Sure Scripts Are Loaded Correctly

If you see gform is not defined or the AJAX spinner doesn’t show, scripts are likely missing. This happens often in custom themes or preview mode.

Fix this by:

• Calling gravity_form_enqueue_scripts() manually in your theme template.
• Ensuring jQuery loads in the page header.
• Checking that wp_footer() and wp_head() are present in your theme files.

You can also open your browser’s console and look for:

• JavaScript errors
• Missing script URLs
• Warnings about undefined variables

This solution helps with Gravity Forms preview jQuery not loaded and related errors.

4. Resolve Plugin and Caching Conflicts

Many caching or optimization plugins break AJAX in preview. They may delay or block scripts needed for form submission.

Try the following:

• Disable caching plugins like WP Rocket or W3 Total Cache.
• Turn off JS minification and deferred loading features.
• Pause your CDN if it rewrites or delays JavaScript.

Also use the Health Check & Troubleshooting plugin to test Gravity Forms in a clean environment. This tool helps find conflicts without affecting your live site.

These steps help fix disable caching Gravity Forms AJAX fix issues.

5. Check for Theme or Builder Conflicts

AJAX can also break if your theme or builder handles scripts incorrectly. Popups, modals, and builder templates often interfere with Gravity Forms scripts.

Fixes include:

• Test with a default theme like Twenty Twenty-Four.
• Disable the page builder and re-test the form.
• Embed the form in a regular page instead of using a popup.

You may also need to manually trigger Gravity Forms scripts after dynamic content loads. This addresses theme conflict Gravity Forms AJAX issues.

6. Avoid Preview-Specific Limitations

WordPress preview pages do not fully replicate front-end behavior. They often skip loading shortcodes or necessary scripts.

Workarounds include:

• Embedding the form in a real test page and visiting that page.
• Using the Gravity Perks Live Preview plugin for a better preview.
• Avoiding default preview buttons in Gutenberg or Classic Editor.

These methods give you a more accurate view of AJAX behavior. This fix is essential for ajax form preview issue Gravity Forms problems.

7. Re-Initialize Scripts for Dynamic or Hidden Fields

If your form uses conditional logic, hidden containers, or modals, scripts might not initialize correctly. This causes fields to malfunction or the form to fail.

To fix this:

• Use the gform_post_render hook in your JS.
• Or, trigger a DOM event manually to refresh scripts.

Example JS fix:

window.document.dispatchEvent(new Event(“DOMContentLoaded”, { bubbles: true }));

You can also try calling form-specific functions again after the form loads. This helps with Gravity Forms legacy markup AJAX bug and similar dynamic form issues.

8. Fix Multi-Page Form Behavior in Preview

Multi-page AJAX forms often fail to work in preview mode. Navigation buttons don’t respond, or data is lost between pages.

Solutions include:

• Avoid previewing multi-step forms; use a test page instead.
• Confirm that ajax=”true” is present in the embed code.
• Disable reCAPTCHA if step transitions fail.
• Load forms outside of popups or page builder containers.

This resolves the AJAX multi-page Gravity Form preview issue and ensures smooth page transitions.

When managing complex forms or custom WordPress environments, small adjustments can prevent major issues with AJAX. Below are advanced tips to ensure Gravity Forms AJAX functions properly across all use cases—including preview mode.

One helpful approach is to use the gform_form_args filter. This PHP filter allows you to globally enable AJAX for all forms. It’s especially useful on large sites with multiple forms where adding ajax=”true” manually may be forgotten. Add this filter in your theme’s functions.php file to enforce AJAX behavior regardless of how forms are embedded.

add_filter(‘gform_form_args’, function($args) {

$args[‘ajax’] = true;

return $args;

});

Another smart solution is to manually enqueue Gravity Forms scripts. If your site uses a custom template system or doesn’t use standard WordPress functions like wp_footer(), scripts might not load. In this case, use gravity_form_enqueue_scripts() directly in your template files. This guarantees all required scripts, including AJAX handlers and jQuery, are available on the page.

For developers and agencies, the Gravity Perks Live Preview plugin is a great tool. It offers a more accurate representation of form behavior compared to WordPress’ default preview mode. It helps validate AJAX, conditional logic, and multi-page transitions without publishing the form.

Lastly, after changing themes, page builders, or script loading methods, always re-test forms. Themes and visual editors may override or delay script execution. Testing immediately after such changes helps catch issues early and avoid user-facing problems.

When AJAX breaks, it often takes more than one fix to solve. A structured, code-aware approach saves time and keeps your forms reliable—even during previews. Need help with AJAX issues, Gravity Forms, or theme conflicts? Get expert help anytime. Contact 24×7 WP Support today and let certified WordPress developers solve it for you—fast.