Form callback throws unrelated jquery error


#1

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 even receive the submitted form in my hubspot control panel, but I can’t react to formReady or any other callback.


I tested it on

Linux-Kubuntu 15.10 - Chrome/Firefox
Windows 7 VM - Internet Explorer 10
Android 4.1.2

If this problem persists even across different computers, I’m not sure what the problem is. I also tried it outside the company network.


#2

Hey @MartinMuzatko,

Can you send along the page with the form where you’re seeing the error?

Sebastian


#3

See jsfiddle I sent in the starting topic: https://jsfiddle.net/3f40ypcp/

I always get the error, even in the reduced test case. No matter if its on the website or somewhere else.


#4

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.


#5

It works for the hubspot support but not for me. Do I really need to add jquery, when it already works for the support but not for me?

It works now using jquery, even though it should work without (AFAIK?)

Thanks for your patience


#6

Hey Martin,

It doesn’t work without jQuery.


#7

For posterity.

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: () => {},
}));

Hopefully this will help somebody else.


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

It did! Thanks @frosso


#9

Thanks @frosso. Your fix resolved the error for me.


#10

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();
}
});


#11

@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.

Is that a valid concern?

This person got around it by making their own onFormReady type listener: https://github.com/escaladesports/react-hubspot-form/blob/master/src/index.js


#12

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".