Prepopulating form product codes?

Developer Support CMS Development
1

Hi,

I am trying to prepopulate a code for individual product posts using:

https://developers.hubspot.com/manipulating-forms-with-jquery

How does this work? Thanks.

2

Hey @PZee ,

Use this code if you’re using a form widget instead of using the form embed by placing in the Footer HTML of either your template or your page settings.

$(window).load(function(){
 $('input[value="checkbox_1"]').prop('checked', true).change();
 $('input[name="firstname"]').val('Brian').change(); 
});

$(window).load(function() {}); tells the browser to wait until the page has fully loaded, this way your script doesn’t try to run before the form is ready to be manipulated.
$(‘input[value=“checkbox_1”]’) and $(‘input[name=“firstname”]’) is where you tell the script which field you’re wanting to update. In a Hubspot form the field name is usually the internal property name that you would see in your properties listing or in the form editor in the field’s details.
.prop(‘checked’, true) tells the script to set a checkbox or radio button to ‘true’, aka selected.
.val() is where you tell a script what value you want a field to have. The text inside val(‘Brian’) is what you would be changing the value to (the value is what is submitted to Hubspot). If you want to use a HubL value here you can like so val(‘{{ hubl_value_name }}’)
.change() initiates the change of the value
If you’re embedding your forms using Hubspot’s embed code you would use the onFormReady callback in your embed:

hbspt.forms.create({ 
 portalId: 'XXXXXX',
 formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
 onFormReady: function($form, ctx){
 	$('input[value="checkbox_1"]').prop('checked', true).change();
 	$('input[name="firstname"]').val('Brian').change(); 
 }
});

You can get the default embed code by going to your form dashboard and clicking the “Actions” button that shows up when you hover over the link to your form and selecting “Share form”. You’ll get a popup with the form embed.
Then you’ll add the onFormReady: function($form, ctx){ to tell the embed to wait to run the script until the form is ready to be manipulated.
The rest inside the onFormReady callback is the same as for the other code.
Hope this helps!

3

Thank you for the reply!

I inputed this exactly, only with the correct Id’s. Did not use a widget for the form. On the top I put <script> and </script> on the bottom. Any suggestions on what I am still doing wrong?

hbspt.forms.create({
	portalId: 'XXXXXXX',
	formId: 'a60ed526-b2b4-49f9-b98c-XXXXXXXXXXXX',
 onFormReady: function($form, ctx){
 	$('input[value="product_code"]').prop('checked', true).change();
 	$('input[name="productcode"]').val('NFD-813').change();
});
4

You’re missing a curly bracket

hbspt.forms.create({
	portalId: 'XXXXXXX',
	formId: 'a60ed526-b2b4-49f9-b98c-XXXXXXXXXXXX',
 onFormReady: function($form, ctx){
 	 $('input[value="product_code"]').prop('checked', true).change();
 	 $('input[name="productcode"]').val('NFD-813').change();
 }
});
5

Thank you for the quick reply!

Tried it with the curly bracket but still no luck unfortunately. Any other ideas are greatly appreciated.

6

What is the internal name of the form field you’re trying to update? And what type of field is it? You can find the internal name in the form editor and clicking on the field. It’ll be under “Contact property name”.

formproperty.png
formproperty.png742×188 7.86 KB

7

The name of the field is product_code and it is a single-line text.

8 
hbspt.forms.create({
	portalId: 'XXXXXXX',
	formId: 'a60ed526-b2b4-49f9-b98c-XXXXXXXXXXXX',
 onFormReady: function($form, ctx){
 	 $('input[name="product_code"]').val('NFD-813').change();
 }
});

Try this

9

Thank you for the reply!

Tried that and it still will not display the product code. Really appreciate the suggestions.

10

Would it be possible for you to send me a preview link of the page you’re testing this form on?

11

http://www.neliasfloraldesign.com/easter-flower-basket/?preview_id=6213&preview_nonce=d79ad4951e&post_format=standard&_thumbnail_id=3974&preview=true Here you go. Also just realized that it doubled the previous form.

12

Couldn’t preview the link since it’s Wordpress and Wordpress only allows signed-in users to view previews.

However, from your live page I was able to see you’re using a Free Hubspot subscripton and, unfortanutely, manipulating forms isn’t available for such as noted in the 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.

13

Is there any improvement paintings going into adding Custom houses to Products? For example, each product has a SKU code this is a part of the deal that syncs to ERP link. Is there any work going into being able to add a custom assets on a Product?