topic Re: form embed code value update onFormReady not working in APIs & Integrations

form embed code value update onFormReady not working

Manobyte — Mon, 20 May 2019 20:28:51 GMT

So I have a form that I am creating with the embed code. When the form is created I need it to be created with a value already in it. I have done this in that past and not had any probles, so im not sure what is different or if I have a typo somewhere or something. So here is my code

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

this creates the form but does not update the first name field with the value indicated, though I am sure I have used this method in the past. I also tryed using onFormSubmit but that just submitted a blank form. Maybe something has changed?

Re: form embed code value update onFormReady not working

Manobyte — Mon, 20 May 2019 20:33:02 GMT

Ok, so I may have posted pre-emtivly since I figureed out how to make this work. All I needed to do was turn on "unstyled form" in the forms options. and now it works.

Re: form embed code value update onFormReady not working

jennysowyrda — Tue, 21 May 2019 20:02:40 GMT

Thanks for sharing your solution @Manobyte 🙂

Re: form embed code value update onFormReady not working

dranreb — Thu, 08 Aug 2019 10:15:14 GMT

Thanks for your post and it's great you got this to work.

I'm having an identical issue but turning on Unstyled form did not help. Could you recommend something else for me to try? Thanks in advance for your time and any help you could offer with this request.

Here's my embed code:


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

When I use $('input[name="firstname"]').val("Brian").change(); I get an error TypeError: $ is not a function. So I replaced $ with jquery and that does not throw an error. This practice was recommended a few places as well. Maybe if you found a way around this error you could share it and that might resolve the issue for me.

Re: form embed code value update onFormReady not working

Manobyte — Thu, 08 Aug 2019 12:59:15 GMT

I tested out the code you added, but unfortunaly I get an error when using jquery instead of $. Ive never come accross the error using $ so im not sure how to tell you how to get around it. Are you loading the form on a hubspot page, or an external site? I was just building it on a hubspot page, which already has jquery added. So if you are building it on a separate site maybe there is an issue with the way jquery is loading?

Re: form embed code value update onFormReady not working

Stevie-Kv — Thu, 10 Dec 2020 17:02:34 GMT

Kudos to Manobyte for the shared solution. Been scratching my head for hours on this! It was the hint I needed to realise that JS and iframes don't play nicely 🙂