topic Update contact property on form submit in APIs & Integrations

Update contact property on form submit

Anonymous — Mon, 18 Feb 2019 13:11:12 GMT

Hi guys,

I have a custom property group called "Salesforce Information". Within this group I've created a custom property called "web_activity_most_recent__c" and set it to hidden on a form.

Scenario: Everytime a form is submitted, we need this property to be updated with a value dependent on the page the form is submitted from. We currently have over 120 pages with corrsponsponding web_activity_most_recent__c values.

eg. if the visitor submits a form from huddle.com/get-started/ then the value forweb_activity_most_recent__c should be "Downloaded_ebook_collaboration_client-experience", and a different value if the form is submited from another page, etc.

I can't get it to work...

Any assistance will be much appreciated!

Herewith my edited form embed 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: "my-hubspot-code",
formId: "e7075578-e362-4c94-a075-10fb9c74e8e0",
redirectUrl: "/sites/default/files/white-papers-files/huddle_-_accounting_and_professional_services_e-paper_2018.pdf",
onFormReady($form) {
$('input[name="web_activity_most_recent__c"]').val('Downloaded_ebook_collaboration_client-experience').change();
}
});
</script>

Re: Update contact property on form submit

JasminLin — Fri, 15 Feb 2019 08:33:15 GMT

Hey @Anonymous , if you use this instead it should work:

onFormReady($form) {
$('input[name="web_activity_most_recent__c"]', $form).val('Downloaded_ebook_collaboration_client-experience').change();
}

Re: Update contact property on form submit

Anonymous — Mon, 18 Feb 2019 12:50:45 GMT

Thanks but that doesn't work either. It's the $ that's the issue. It works perfectly when replacing the $ with the actual word "JQuery".

Final working code as below:

<!--[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: "replace-this-with-your-hubspot-id",
  formId: "replace-this-with-hubspot-form-id",
  onFormSubmit: function($form) {
    jQuery('input[name="replace-this-with-hubspot-internal-name-of-hidden-field"]').val('replace-this-with-your-required-value').change();
  }
});
</script>

Also ensure your Salesforce mapping within the Hubspot integration settings is set to "Use most recent value" to avoid Salesforce from overwriting recent values changes in Hubspot.

Re: Update contact property on form submit

bradmin — Fri, 15 Feb 2019 13:06:07 GMT

Hi, @Anonymous. While the approach outlined would work, the properties in the Salesforce Information section are used in mappings. Populating the properties ending in "__c" - custom fields from Salesforce - won't push values to Salesforce from HubSpot. You want to update the HubSpot property mapped to that Salesforce Information property instead in your form.

Re: Update contact property on form submit

Anonymous — Mon, 18 Feb 2019 12:43:40 GMT

Thanks for this @bradmin , what do you suggest I do?

I've gone ahead and updated the Update Rule in the Salesforce mapping section within Hubspot from Use Salesforce value to Use updated value - as per Hubspot documentation. Everything seems to be working fine? Is there something I'm missing?

Re: Update contact property on form submit

bradmin — Tue, 19 Feb 2019 13:14:26 GMT

@Anonymous, it looks like the API name of the HubSpot-side property matches the Salesforce property. That would work if your custom HubSpot property has that same API name, but that may not be sustainable.

Mappings allow you to populate the Salesforce side of the mapping, by setting the value in the HubSpot-side property part of the mapping. You'd have CustomHubspotProperty on the left side of the mapping, and Custom_Salesforce_Field__c on the right. After that's established, put CustomHubSpotProperty as your field on the form, and subsequent submissions will pass the desired value to Salesforce in Custom_Salesforce_Field__c.

The ambiguous part is that the Salesforce field needs to exist among your HubSpot properties, so it can be included in the mapping. However, if you map the Salesforce field to the Salesforce field, nothing will effectively get synced to Salesforce from HubSpot.

Re: Update contact property on form submit

Anonymous — Tue, 19 Feb 2019 13:19:43 GMT

@bradmin thanks for the response, however everything seems to be working and matches up perfectly. Basically we had this working through Marketo for ages, so it's the exact same implementation.

The field's value updates whether amended from Salesforce or Hubspot.

Cheers

Re: Update contact property on form submit

bradmin — Tue, 19 Feb 2019 13:21:27 GMT

Okay, if it's working for you, you're all set. That's a particular config which does have the potential to interfere with results, but if you haven't experienced any issues, disregard what I wrote.

Re: Update contact property on form submit

Anonymous — Tue, 19 Feb 2019 14:09:26 GMT

Awesome thanks @bradmin I'll definitely keep an eye out.

Thanks again, cheers

Re: Update contact property on form submit

dannio — Fri, 27 Mar 2020 08:47:54 GMT

Wouldn't it be much safer to just use plain js to do this?

e.g:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
  portalId: "xxxxxxx",
  formId: "xxxxxxx-xxxx-xxxx-xxxxxxxxxxxx",
  onFormReady: function($form){
    valueFrom = document.querySelector('#value-from').innerHTML;
    document.getElementsByName("value_to")[0].value=valueFrom;
  },
});
</script>

This way you wouldn't be relying on jQuery at all, and it would, in general, be much quicker and more reliable. (No blocking, fires as soon as form loaded)

Re: Update contact property on form submit

RLightfoot — Thu, 25 Mar 2021 00:20:28 GMT

@dannio -In your example, where would I place the "internal_property_name" of the field, and where would I place the "value" to go into that field?

Thank you

Re: Update contact property on form submit

dannio — Thu, 25 Mar 2021 01:40:00 GMT

@RLightfoot the internal_property_name is the value_to, and the value is the valueFrom:

document.getElementsByName("internal_property_name")[0].value=valueFrom;

Re: Update contact property on form submit

RLightfoot — Thu, 25 Mar 2021 02:59:08 GMT

@dannio - sorry, novice here...
is this the syntax?

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "xxx",
portalId: "xxxxxx",
formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
onFormReady: function($form){
valueFrom = document.querySelector('#value-from').innerHTML;
document.getElementsByName("favorite_character")[0].('Barney Rubble')=valueFrom;
}
});
</script>

Thank you.

Re: Update contact property on form submit

dannio — Thu, 25 Mar 2021 03:16:41 GMT

As far as I can tell, region isn't a param on the embedded code.

You can find out more of the form embedded code here:

https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options

The valueFrom variable in my example is only an example of where the data could come from. In this case, it's an element with the ID value-from somewhere on the page.

The assignment should be something like:

document.getElementsByName("favorite_character")[0].value='Barney Rubble';

You can check if the value has been set after by opening up the console and typing:

document.getElementsByName("favorite_character")[0].value

Re: Update contact property on form submit

RLightfoot — Thu, 25 Mar 2021 03:42:49 GMT

@dannio - Thank you.

Re: Update contact property on form submit

dannio — Mon, 29 Mar 2021 02:26:45 GMT

No worries. Another way to make sure it gets the correct element with js is to use the form value that's defined by the callback like so:

form.elements.favorite_character.value = *insert value*