APIs & Integrations

Chris_w
Member

jQuery Not Working

SOLVE

I have tried everything I can think of but I cannot figure out why I cant modify my forms with jQuery.

putting:

jQuery('input[name="firstname"]').val('Brian').change();

into the browser console yields nothing.

1 Accepted solution
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

jQuery Not Working

SOLVE

Hey @chris.w_AML,

It seems that you have a Marketing Hub Starter subscription. Like collected forms and lead flows, these embed codes cannot be modified. This is outlined at the top of this documentation:

Note: These options are only available for forms created using the marketing form builder available with a paid Basic, Professional, or Enterprise marketing subscription. Other forms, such as collected forms or lead flows, do not support these customization options.

Apologies for the inconvenience and missing this detail earlier.

Isaac Takushi

Associate Certification Manager

View solution in original post

0 Upvotes
10 Replies 10
Gurutechnolabs
Member

jQuery Not Working

SOLVE

jQuery('input[name="firstname"]').change(function(){

if(jQuery(this).val() == 'Brian'){
code
}else{
code
}
});

0 Upvotes
Chris_w
Member

jQuery Not Working

SOLVE

Thank you for your response, I had all of the forms on a dummy page for testing purposes. I have removed all but one and used the onFormReady in the form creation code but when I try that It disappears.

Just in case, here is the embeded form:
script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js">/script>
script>
hbspt.forms.create({
portalId: "3930388",
formId: "305ce453-e0f3-4923-9877-cd6a7a6def9c"
onFormReady: function($form) {
jQuery('input[name="firstname"]').val('Brian').change();
}
});

/script>

Without and custom javascript, the forms work perfectly, which leads me to believe it's probably an issue with our jQuery. I just took this wordpress website over from someone else and the Javascript is a bit of a mess. Do you have any idea how to fix this or can to point me towards some articles/forums that might help?

0 Upvotes
Christopher_G
Member

jQuery Not Working

SOLVE

Apologies, I’m missing a comma after the formid variable. Please update that and try again.

I can take another look when I get to my desk as well.

0 Upvotes
Chris_w
Member

jQuery Not Working

SOLVE

Thank you for your help but I just found out you can even alter forms with JQ if you have the starter version :confused:

0 Upvotes
Christopher_G
Member

jQuery Not Working

SOLVE

Oh yes, sorry I didn't see @Isaac_Takushi 's reply while on the road.

0 Upvotes
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

jQuery Not Working

SOLVE

Hey @chris.w_AML,

It seems that you have a Marketing Hub Starter subscription. Like collected forms and lead flows, these embed codes cannot be modified. This is outlined at the top of this documentation:

Note: These options are only available for forms created using the marketing form builder available with a paid Basic, Professional, or Enterprise marketing subscription. Other forms, such as collected forms or lead flows, do not support these customization options.

Apologies for the inconvenience and missing this detail earlier.

Isaac Takushi

Associate Certification Manager
0 Upvotes
Chris_w
Member

jQuery Not Working

SOLVE

Can I Alter css or upload directly to the API with the starter version?

0 Upvotes
Christopher_G
Member

jQuery Not Working

SOLVE

Hey @chris.w_AML
I took a peek at your development project via the URL in your console image.

You are loading a few Hubspot forms on the same page, while this is not a problem in itself you might want to rework how you are doing so in the code. Are you trying to change the Name input for all forms, or a specific form? If a specific form, I'd suggest using the #ID of the input instead.

I found the test where you are attempting to change your name input:

<script>
  hbspt.forms.create({
	portalId: "3930388",
	formId: "305ce453-e0f3-4923-9877-cd6a7a6def9c"
    window.onload = function() {
   jQuery('input[name="firstname"]').val('Brian').change();
   alert('test');
     
}  
});
</script>

This is currently returning an error, Instead you should use the onFormReady callback that Hubspot
provides. This will ensure that your .change event fires after the form has loaded.

hbspt.forms.create({
      portalId: '',
      formId: '',
       onFormReady: function($form) {
           jQuery('input[name="firstname"]').val('Brian').change();
        } 
});        

Now, if this code returns an error there is an issue with the way Jquery is being loaded, I didn't have a chance to dig deeper, but I hope this steers you in the right direction.

0 Upvotes
Chris_w
Member

jQuery Not Working

SOLVE

Here is a picture of what I get when I put that query into the console. I am using wordpress as well if there are any known issues with that. I've tried putting this same query into my .js file too and nothing happens.

0 Upvotes
IsaacTakushi
HubSpot Employee
HubSpot Employee

jQuery Not Working

SOLVE

Hi @chris.w_AML,

If jQuery is loaded before the HubSpot form, then I would expect that code to work (it works for my own forms). Have you tried

$('input[name="firstname"]').val('Jack').change();

or some of the methods outlined in this topic?

Isaac Takushi

Associate Certification Manager
0 Upvotes