Embedded Form: Populating form fields

[dranreb]

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>

[Kevin-C]

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?

[dranreb]

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>

[Kevin-C]

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!

[derekcavaliero · 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.

[dranreb]

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

[joanna_cm]

This worked! Thank you soooo much!

My issue was that I was imputting a script into wordpress where I would grab the utm params from the url and then input them into the hidden fields in the form they would eventually nav to.

My error at first was that, inside my onFormReady($form) function, I could not use  $('input[name="firstname"]').val('Sue').change() because apparently Wordpress does something weird with jQuery where I couldn't use the $ because it would throw an error that t doesn't recognize the $.

So then I used jQuery ('input[name="firstname"]').val('Sue').change(), which ran without an error, but did not actually change the value of the input.

I then tried document.querySelector('input[name="firstname"]').setAttribute('value', 'Sue'), to manually change it, which worked SOMETIMES when testing in the console, but not in the code. It would return null as if the element did not exist, which I could see in the HTML, it definitely did exist.

Then I used the code you suggested and it worked. Thank you so much!

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

How did you come up with this solution? How did you know to use the find method on $form? Did you manually sift through the $form available methods? I tried for a little bit but it was so cluttered w data I didn't know how to zero in on the methods and test each one. 

Thanks a bunch 🙂

[derekcavaliero]

@joanna_cm You can learn a lot about how to extend the core form functionality by reading the docs here: https://developers.hubspot.com/docs/methods/forms/advanced_form_options

The $form argument passed into the onFormReady() and onFormSubmit() callbacks are jQuery collections: https://learn.jquery.com/using-jquery-core/jquery-object/

The .find() method is part of the overall jQuery library - it acts as a "sub-query" on an existing jQuery collection. Since the $form object returns a collection of the <form> element you can search through it using .find().

The reason your other approaches were not working probably had to do with not using the callbacks - since the form is added to the page using JavaScript - you need to make sure you prefill the fields only AFTER the form has been added into the DOM (onFormReady() is perfect for that scenario).

Both the onFormReady() and onFormSubmit() callbacks require jQuery to function (which makes sense since the $form argument is a jQuery collection). 

[joanna_cm]

Thank yo for the reply! All great resources. 

I attempted all those approaches within the onFormReady($form) function but no dice.

According to some other forums I read, it is a thing with Wordpress that it does not allow the use of $ to avoid messing with their global variables. I am not really sure why jQuery() did not work in it's place. I was likely not using it correctly. Thanks again.

[prosa]

Hi, how do you handle select boxes?

[Designer_WOT]

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 !

[dranreb]

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.

[amitkumarsingh]

Hi,

How can we apply same form field value changes on External CMS (Kentico) LP

Doing the same code but not updating the form field's value.

Thank You!!

Amit

[derekcavaliero]

@amitkumarsingh 

Unless your implementation of Kentico is using some sort of front-end like React or Vue - I don't see why this wouldn't work. A couple things to check:

1. Make sure you have the jQuery library included on your page.

2. Check the JS console for errors - send a screenshot through with anything that may appear there.

Also if you have links to the page - share it and I can look into why it may not be working.