How to Avoid Console Errors in Oxygen Builder When Embedding Gravity Forms

If you've ever tried to embed a Gravity Forms shortcode inside a page built with Oxygen Builder, you may have encountered an error in the Oxygen editor itself, as well as a series of annoying errors in the JavaScript console.

These don't break their place in the frontend, but they definitely make editing in Oxygen a headache… or at least not as pleasant as it should be.

Errors like:

• Uncaught SyntaxError: Identifier 'gformIsSpinnerInitialized' has already been declared
• gform_theme_config is not defined
• net::ERR_NAME_NOT_RESOLVED (from via.placeholder.com)

These console errors can disrupt the editing experience, confuse even experienced users, and slow down the workflow. Fortunately, there are multiple ways to prevent this problem. This guide will walk you through the best solutions available—whether you're a non-coder or a seasoned WordPress developer.

The first three solutions do require at least some basic coding knowledge or familiarity with WordPress development. But don’t worry—if you're less experienced, have minimal programming skills, or simply prefer to avoid code altogether, Solution 4 is definitely the easiest and safest option.

Why This Happens

Gravity Forms loads JavaScript and CSS assets automatically when its shortcode is rendered. Oxygen Builder's visual editor tries to render the shortcode in real-time, which causes Gravity Forms scripts to load in the builder environment, where they don't belong. The result: script conflicts, double declarations, and missing references.

Solution 1: Disable Gravity Scripts in Oxygen (PHP Snippet)

Best for: Developers with access to functions.php or similar

This approach prevents Gravity Forms from injecting its scripts into the builder. Paste this snippet into your theme’s functions.php file or use a snippets plugin:

add_action( 'gform_enqueue_scripts', 'boreas_remove_gf_scripts_in_oxygen', 11, 2 );
function boreas_remove_gf_scripts_in_oxygen( $form, $is_ajax ) {
    if ( defined( 'OXYGEN_BUILDER_PATH' ) && is_admin() && isset( $_GET['ct_builder'] ) ) {
        remove_filter( 'gform_pre_render', array( 'GFFormDisplay', 'maybe_add_form_css' ) );
        remove_filter( 'gform_pre_render', array( 'GFFormDisplay', 'maybe_add_init_script' ) );
        remove_filter( 'gform_register_init_scripts', array( 'GFFormDisplay', 'add_init_script' ) );
    }
}

You can use the code as it is or replace the function's name for your own one.

Pros:

• Keeps form visible in the builder
• Prevents script conflicts

Cons:

• Requires basic knowledge of PHP
• Best used in a child theme or via a safe method like a snippets plugin

Solution 2: Conditional Rendering with $_GET['ct_builder']

Best for: Advanced setups or reusable templates

This technique uses PHP to check if Oxygen Builder is active. If so, it skips rendering the form entirely.

if ( ! isset( $_GET['ct_builder'] ) ) {
    echo do_shortcode('your_gravity_forms_shortcode');
}

You can add this in a Code Block element or a reusable component, and customize the Gravity Forms shortcode as needed.

Pros:

• Great for templates or dynamic pages
• Maximum control

Cons:

• Requires some coding and logic

Solution 3: Use a Snippet Plugin

Best for: Admins without FTP access

If you can't or don't want to edit functions.php directly, use a plugin like Code Snippets. It allows you to safely add the PHP code above from the WordPress dashboard.

Pros:

• Safer and easier than editing theme files
• Works across themes and Oxygen templates

Cons:

• Slightly more overhead than manual edits

Solution 4: Use "Do Not Render in Oxygen" (Easiest Fix)

Best for: Visual builders and non-coders

This is the method I personally use, and it works like a charm. Here’s how:

1. In Oxygen, add a Shortcode element to your page.
2. Paste your Gravity Form shortcode.
3. In the settings panel of that shortcode element, check the box: Do not render in Oxygen.
4. (Optional) Assign the space you want the placeholder to occupy on the screen. This helps you to work out the layout of your page knowing the space the form will occupy on the frontend.

Done! Now Oxygen will render a placeholder in the editor, and the actual form will load perfectly on the frontend.

Pros:

• No code required
• Fully compatible with Oxygen
• Prevents all script-related errors

Cons:

• You won't see the form in the visual editor (but that’s a small tradeoff)

FAQ: Gravity Forms Errors in Oxygen Builder

Final Thoughts

If you're looking for quick and safe implementation without touching code, scroll back and try Solution 4. It’s the one I use and recommend to non-technical users.

For developers or agencies managing more complex sites, the PHP-based solutions offer more flexibility.

This issue is a good example of why it's important to understand how plugins interact behind the scenes. With the right tools and a little knowledge, you can keep your editing environment clean and productive.