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

[#1]

I get the following error when I try to manipulate DOM loaded from Hubspot form.
The onFormReady function in hbspt.forms.create requires jQuery. It was not run.
This is the code I use to change input field value:
hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
onFormReady($form, ctx){
$('#firstname-6ae5c91f-67cf-40e7-bc53').val('Brian').change();
}
});
Anyone has the same issue?

[Derek_Gervais]

Hi @Payman_Ferdowsali,

The onFormReady callback requires jQuery to function properly. Some other community users have found some workarounds you might find useful:

Form callback throws unrelated jquery error Forms

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 require…

[salty_stephen]

@Payman_Ferdowsali

As @Derek_Gervais is saying, you might not have jQuery loaded on the page. But if you don't need or want jQuery on the page, the offending code is $('#firstname-6ae5c91f-67cf-40e7-bc53')... This is jQuery syntax.

If you replace it with:

document.getElementById("firstname-6ae5c91f-67cf-40e7-bc53").value = "Brian";

I am not sure what the change event is for, but that will set the value to "Brian"

Full code:

hbspt.forms.create({
	portalId: 'XXXXXX',
	formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
	onFormReady: function($form, ctx){
		document.getElementById("firstname-6ae5c91f-67cf-40e7-bc53").value = "Brian";
	}
});

[#4]

I tried nothing under the onFormReady callback function, no matter what it gives me the same error:
shell.js:9 The onFormReady function in hbspt.forms.create requires jQuery. It was not run.
If I remover the onFormReady callback, I don't get error!

[Derek_Gervais]

Hi @Payman_Ferdowsali,

This might be a basic question to start, but do you have jQuery included on the page in question? Is it loaded before the form script?

[jayjiang]

hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
onFormReady: function($form, ctx){
$('#firstname-6ae5c91f-67cf-40e7-bc53').val('Brian').change();
}
});

[#7]

jayjiang:

hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
onFormReady: function($form, ctx){
$('#firstname-6ae5c91f-67cf-40e7-bc53').val('Brian').change();
}
});

Still getting the same error:

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