Hello there! I get errors for the callbacks of my hbspt.forms.create object.
I already reached out to support, and it looks like it works perfectly with them.
This is the error I get:
v2.js:8 The onFormReady function in hbspt.forms.create requires jQuery. It was not run. @runCustomerCallbackFunction
v2.js:8 The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run. @runCustomerCallbackFunction
In the jsfiddle I received from the support, there are no jquery dependencies anywhere, so I wonder why there are checks for jQuery. I get the errror, for the support it works.
I took a quick look at the hubspot v2 js code that is included in the page.
The js form seems to be using ReactJS for the most part and jQuery seems to be used in some specific cases that don’t seem to be blocking.
My application is also written using ReactJS and I didn’t want to include the whole jQuery library to bloat it.
So I added these lines to my codebase, specifically for the Hubspot form:
window.jQuery = window.jQuery || (() => ({
// these are all methods required by HubSpot
change: () => {},
trigger: () => {},
}));
Thanks to this thread i discovered that jQuery is also required for "onFormSubmit" because otherwise it doesn't fire at all. It didn't even print an error message like "onFormReady".
@frosso Very interesting fix. It indeed solves the error.
I am wondering though, if the HS team decides to utilize other jQuery methods, we would have no control over the stability of our forms if we rely on lifecycle methods like onFormReady.
For instance, since they have jQuery at their fingertips, they may decide to utilize it in a way that could impact form lifecycles or core functionality.
Whould you please help me to know where should I put this in the following code?
hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
onFormReady($form, ctx){
$('input[value="checkbox_1"]').prop('checked', true).change();
$('input[name="firstname"]').val('Brian').change();
}
});
Sorry I thought from your initial message that the fiddle was working. Simply adding jQuery to the fiddle resolves the error, but I’m guessing there is more to the issue you’re seeing on your website.