Embedded Form: Populating form fields

[#1]

I would like to populate form fields with values via the form embed code. The below code, as recommended, does not work and no errors are generated.

It would be great to get some idea about what's the issue here.

Resources I've checked and followed:

1. https://developers.hubspot.com/docs/methods/forms/advanced_form_options
2. https://community.hubspot.com/t5/APIs-Integrations/Hubspot-form-programmatically-set-field-value-via...
3. https://mikemcbrien.com/hubspot-embedded-form-onformready-onformsubmit/
4. https://developers.hubspot.com/manipulating-forms-with-jquery

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "XXXX",
formId: "XXXX",
onFormSubmit: function($form, ctx){
$('input[name="firstname"]').val('Brian').change();
}
});
</script>

[#2]

Hey @dranreb 

Could you provide a live test site for us to look at?

At a glance though there might be a few things you can check:

1. Is the value of the target input name attribute actually "firstname"? If not the script will not be targeting the correct input, and might not send an error.
2. Does the site you're embedding the form into have jQuery loaded? Without jQuery your $('input… will not function. You could try plain ol' javascript.
3. Your script might be attempting to run before jQuery is ready or the form is even loaded. Try wrapping the function to update the value in a documnet ready function.
4. Is the .change() method necessary at this point?

[#3]

Hi @Kevin-C,

Many thanks for your speedy reply and apologies for my delayed response. I was away.

Here is a like to a page on an external Wordpress site - https://bit.ly/30hY5uD. Password is "hs".

1. Yes, the value exist in the form on the page.  The script also works on HubSpot pages but not externally.
2. Yes, I've doubled checked this and jQuery is loaded.
3. I'm not sure how to execute this task. It would be great if you could help give some guidance on how to do this.
4. I just copied that HubSpot shared. However, I've also read in the shared links that it's necessary.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "XXXX",
formId: "XXXX",
onFormReady: function($form){
$('input[name="firstname"]').val('Brian').change();
}
});
</script>

[#4]

Hey @dranreb 

Just got back to this. After checking the console I'm seeing a few errors happening.

Most notably the "ReferenceError: $ is not defined". From some research I found that WP uses a function to prevent naming conficts, meaning that to use jQuery you mush refer to it as "jQuery…" rather than the "$…" in your functions. See this article.

Another quick way to check if this is required is by using the dev tools console and tyoing "$().jquery" if this doesn't work it means that you must use the other method to write jQuery. Try using "jQuery().jquery". See this video.

See image below:

You can see that I first attempted to run exactly your code, and got the same error that happened on load.

Then you can see that I changed the "$" to "jQuery" and ran it again, and boom it seemed to work.

TL;DR

Wordpress prevents jQuery naming conflicts by requiring you use a "jQuery" in place of the usual "$". To use jQuery you must follow this convention.

Hope this gets you going in the right direction. For what ever reason if you need to update the values outside of the embbed snippet please reach out!

[#5 · Accepted solution]

@Kevin-C is correct - your issue is that WordPress loads jQuery in safe-mode which keeps other libraries from using the $ shorthand from colliding the the global namespace.

But - you shouldn't actually need to make a new collection.

The $form argument of the callback is actually a jQuery collection of the entire <form> element.

So instead of:

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

You can do the following:

$form.find('input[name="firstname"]').val('Brian').change();

That should also be a bit more stable - because there could be a scenario where there are mulitple inputs with the same name on the page - and if that were to happen - $('input[name="firstname"]') would return a collection of more than 1 element which would be problematic.

Hopefully that helps.

[#6]

Many thanks @derekcavaliero! Your suggestion works. Also thanks for your time and assistance, @Kevin-C. You guys are awesome :-)

[#7]

Hello @dranreb ,
I think issue is not in code as there is no error but as i can see you have changed value on submit event it should be as soon as form renders. can you please check it after adding below code..

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "XXXX",
formId: "XXXX",
onFormReady: function($form){
$('input[name="firstname"]').val('Brian').change();
}
});
</script>

Mark this as a solution if it helps !

[#8]

Hi @Designer_WOT ,

Many thanks for your speedy reply and apologies for my delayed response. As shared above, I was away.

Both my code and yours works on HubSpot pages but not on external sites. jQuery is loaded etc. I'm really out of ideas here.

Thanks in advance for any help you could offer.