HubSpot form callback not working in WordPress: jQuery issue

Other Questions HubSpot
1

Hey folks, I’m having trouble with HubSpot forms on my WordPress site. The forms are working fine and I can see the data in HubSpot, but the onFormReady() callback isn’t firing. I’m getting this error:

The onFormReady function in hbspt.forms.create requires jQuery. It was not run.

I’ve added jQuery in my functions.php and it works in other parts of the site. Here’s the HubSpot code I’m using:

<script src=\"//js.hsforms.net/forms/shell.js\"></script>
<script>
hbspt.forms.create({
    portalId: \"123\",
    formId: \"abc123\",
    onFormReady: function() {
        console.log(\"Form is ready!\");
    }
});
</script>

Any ideas on how to get onFormReady() working? Or is there another way to catch form submissions using jQuery? I’ve tried a few things but no luck so far. Thanks!

2

I’ve encountered this issue before, and it’s often related to how WordPress handles script loading. One solution that worked for me was to use WordPress’s built-in jQuery and ensure it’s loaded before the HubSpot script.

Try modifying your code to use wp_enqueue_script for both jQuery and the HubSpot script in your functions.php:

function enqueue_scripts() {
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘hubspot’, ‘//js.hsforms.net/forms/shell.js’, array(‘jquery’), null, true);
wp_add_inline_script(‘hubspot’, ’
hbspt.forms.create({
portalId: “123”,
formId: “abc123”,
onFormReady: function() {
console.log(“Form is ready!”);
}
});
');
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_scripts’);

This approach ensures proper script dependency and loading order, which should resolve the jQuery issue you’re experiencing.

3

yo henryg, had this issue before. try adding jquery manually in the header:

before the hubspot script. if that dont work, maybe try a different jquery version. sometimes wordpress can be finicky wit scripts. good luck mate!

4

As someone who’s dealt with HubSpot forms in WordPress, I can tell you it’s not always smooth sailing. Have you considered that WordPress might be loading jQuery in no-conflict mode? This can sometimes cause issues with scripts expecting jQuery to be available globally.

Try wrapping your HubSpot code in a jQuery ready function and use the ‘$’ alias like this:

jQuery(document).ready(function($) {
hbspt.forms.create({
portalId: “123”,
formId: “abc123”,
onFormReady: function() {
console.log(“Form is ready!”);
}
});
});

This approach ensures jQuery is fully loaded before your HubSpot script runs. If that doesn’t work, you might want to check if there are any JavaScript errors occurring before your HubSpot code executes. Sometimes, earlier errors can prevent subsequent scripts from running correctly.

Lastly, double-check your WordPress theme and plugins. Some can interfere with how scripts are loaded or executed. Temporarily switching to a default theme and disabling plugins can help isolate the issue.

5

hey henryg, sounds like a tricky issue. have u tried loading jquery before the hubspot script? sometimes order matters. also, check if jquery.noConflict() is needed. if nothing works, u could try catching the form submit event manually with vanilla js instead. good luck!

6

I encountered a similar issue with HubSpot forms and jQuery in WordPress. The problem often lies in how WordPress loads jQuery. Try enqueuing jQuery properly in your functions.php file:

function enqueue_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');

Also, ensure your HubSpot script is loaded in the footer. You can do this by adding it to the wp_footer hook:

function add_hubspot_script() {
    ?>
    <script src=\"//js.hsforms.net/forms/shell.js\"></script>
    <script>
    jQuery(document).ready(function($) {
        hbspt.forms.create({
            portalId: \"123\",
            formId: \"abc123\",
            onFormReady: function() {
                console.log(\"Form is ready!\");
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_hubspot_script');

This approach should resolve the jQuery dependency issue and allow onFormReady to function correctly.