Update contact property on form submit

[Anonymous]

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>

[bradmin]

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. 

[Anonymous]

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?

[bradmin]

@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. 

[Anonymous]

@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

[bradmin]

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. 

[Anonymous]

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

Thanks again, cheers

[JasminLin]

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();
}

[Anonymous · Accepted solution]

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.

[LPM]

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)

[RLightfoot]

@LPM -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

[LPM]

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

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

[RLightfoot]

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

<!--[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({
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.

[LPM]

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 

[RLightfoot]

@LPM - Thank you.

[LPM]

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*