Ad

How Do I Modify A Hubspot Javascript Form That Is System Generated

- 1 answer

I'm having an issue where I'm trying to extend a Hubspot form in their CMS to get some additional functionality out of it.

Unfortunately I can not edit the code they have in the CMS so thought there might be a way to add some javascript after their code to add in what I want to do.

The code they generate looks like this:

      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45', 
      });

I'm wanting to grab the form data after submit so it needs to be like this:

      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45',
        onFormSubmit: function($data) {
          console.log( $("input[name=firstname]").val() );
        }    
      });

But I can not edit the code they generate. Is there a way to add the onFormSubmit to this function without editing the code they are generating.

So something like: (this doesn't work)

    //Their original code
    <script>    
      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45',   
      });
    </script> 

    //My added function
    <script> 
        onFormSubmit: function($data) {
          console.log( $("input[name=firstname]").val() );
        }          
    </script>  

Thanks

Ad

Answer

Option #1: Use embeddable forms in COS rich text modules -- sounds backwards I know, but its viable. This gives you access to onFormSubmit, a valid option for embeddable HubSpot forms per the developer docs: http://developers.hubspot.com/docs/methods/forms/advanced_form_options

Option #2 (Requires HubSpot Pro or Enterprise): Trigger a workflow on form submission and include a webhook as a step -- the payload cannot be modified, but it send the entirety of the contact record to an endpoint of your choice: http://developers.hubspot.com/docs/methods/workflows/webhook_information

Option #3 (Works on all product tiers -- paid, but minimal $$): Use Zapier.com to connect HubSpot to other SaaS platforms. Zapier also includes a method of customizing webhook payloads to send the desired data to your final destination.

Ad
source: stackoverflow.com
Ad