Support

Account

Home Forums General Issues WYSIWYG, Gravity Forms and jQuery

Solving

WYSIWYG, Gravity Forms and jQuery

  • Gravity Forms is aware of this issue, and my feeling is they will bounce me over to your team. So I’m jumping ahead, here it goes…

    When adding an embedded GF form shortcode to an ACF WYSIWYG custom field, the WP bundled jQuery is not moved to the <head> as expected, and errors are thrown:
    Uncaught ReferenceError: jQuery is not defined

    The WYSIWYG field is simply wrapped in bootstrap classes.. “container/row/columns”

    GF states they only support the default editor, otherwise Gutenberg. Whereas ACF WYSIWYG is Classic Editor.

    All other Forms, added in the default editor, on my site are behaving normally.

    Has your team experienced this specific scenario with WYSIWYG custom field and GFs?

  • Is this on the front end of the site?

    jQuery is generally loaded in the header of the site. Do you have any plugins or anything else that is deferring script loading or moving jQuery to the footer of the site?

  • I’m encountering something similar: Gravity Forms shortcode in an ACF WYSIWYG field does not render the form fields (https://cloudup.com/ch3uqruShiw). However I do not have the jQuery error that OP has.

    Official support for Gravity Forms with ACF fields would be excellent, but also recognize this can lead to requests to officially support other plugins as well.

    It is strange that Gravity Forms no longer supports WYSIWYG, but the “Add Form” button remains in place (https://cloudup.com/cfHgaPJ8c3f).

  • Hello, thanks for the quick reply.

    Yes, the error is seen in the dev tools when viewing the frontend.

    All plugins, except ACF and Gravity Forms, have been disabled, the errors persists.

    We use the jQuery bundled with WordPress, as does Gravity Forms.

  • ACF does not alter loading of jQuery in any way.

    When you put a shortcode in a WYSIWYG field ACF calls that shortcode when the content is rendered, including any JS code that shortcode might contain. That JS code is being run before jQuery is defined.

    As I said it my first reply. Something is pushing the loading of jQuery after the content is loaded. Look in the page’s generated HTML. Where is jQuery loaded?

  • Okay so a few notes of things I’ve uncovered:

    1. wp_kses_post() removes some elements from the rendered form
    2. jQuery being undefined could be because you have an enhanced select field, and jQuery is being enqueued in the footer
    3. I have a script that defers the loading of jQuery, so even though jQuery is loaded in the header, the form scripts run before jQuery is available
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.