Customize default field values for form Embed code

[Shay]

Migrated from legacy feedback forum with 68 votes.

I have had several instances where the ability to set the default values for form fields would have saved me hours of integration time.

For example:

My client has 10 webinar pages each with its own unique thank you page. Our current form configuration (not-HubSpot integrated) redirects the user to the appropriate thank you page which contains the webinar requested for view.

I can already dynamically change the thank you page destination from the form embed code - but what I am looking for is to also set a hidden fields value inside the embed code as well.

For example the embed code would look something like this:

<script>
hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
formFields: {
fieldID1 : {
value : "my value"
},
fieldID2 : {
value : "my value"
}
}
});
</script>

Where the field ID parameters and their values would correspond to certain fields (hidden or visible) in the form. This would allow me to use a single form across multiple pages on my site and also be able to send through the correct values for certain form fields based on the action / content they requested on the site.

If you guys can do this - or if it is already possible and I didn't know about it - I would love you forever.

[IsaacTakushi]

Hi all,

It is currently possible to modify a HubSpot form's embed code and set field values with jQuery. This method applies to all fields, visible or hidden.

Here is an example form embed code which sets the value of the hidden country field to wakanda:

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

(Remember to use the internal names of properties and their options.)

[chrispower]

This method of setting default values using the form embed code doesn't appear to work for 'Dropdown select' fields.  I've tested it successfully with a text field, but with drop down select, using the internal field name and the internal value, nothing happens on form load.

[IsaacTakushi]

Hi, @chrispower.

Your use case is addressed in this Community post.

Dropdown select fields are select elements rather than input elements, so you'll have to modify your selector to be something like:

$('select[name="dropdown"]').val('option1').change();

Where dropdown is the internal name of the dropdown property and option1 is the internal name of one of the property's options.

If you have additional troubleshooting questions, please post them on either the "APIs & Integrations" or "CMS Development" boards here.

[EllieCookson]

Hi @IsaacTakushi 

I was wondering if you could follow up on this - is there any way I can set a hidden fields value to contain a value that was filled out in the form previously?

For example, if someone put their company name as one of the answers to a question in the form, would you be able to make a hidden value of a website url incorporate that answer to be something like www.<company name>.com? 

Thanks! 

[IsaacTakushi]

Hi, @EllieCookson.

Yes, this could be accomplished with some custom JavaScript which checks whether specific fields are filled onFormSubmit and then copies the values to hidden fields.

With jQuery, this might look like:

hbspt.forms.create({
      portalId: 'XXXXXX',
      formId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
      onFormSubmit: function($form) {
            let companyName = $('input[name="company"]').val();
            if (companyName) {
	          $('input[name="custom_company_domain"]').val("www." + companyName + ".com").change();
	    }
      }
});

If your visitors are likely to submit company names with spaces, you'll have to account for that with additional JavaScript.

I hope this helps! If you have follow-up questions, please post on the APIs & Integrations board.

[CConant_Raka]

Thanks for the solution @IsaacTakushi! One thing to call out here is that you have to 'Set as raw HTML form' in the form's 'Style & preview' settings for this to work.