CODEWITHSUNDEEP
javascripthubspot
Ralph Vugts
Ralph Vugts

Reputation: 425

How do I modify a Hubspot javascript form that is system generated

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

Upvotes: 3

Views: 10297

Answers (3)

Nick Louloudakis
Nick Louloudakis

Reputation: 6005

Another way, apart from with what @Kirk H mentioned, could be to monitor the event messages of the page and perform actions when a message is published and is related to HubSpot form, such as a form submission.

For sure, it is not the optimal solution as you are practically monitoring the events of the page in general, but it does not require any external libraries, services or any Pro/Enterprise accounts in terms of cost, and should do the work in simple and not heavy workload scenarios.

For instance, this could be useful for integration with other systems, such as Google Tag Manager:

window.addEventListener("message", function(event) {
  // An event regarding HS form occured, and it is a form submission here.
  if(event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      'event': 'hubspot-form-success',
      'hs-form-guid': event.data.id
    });
  }
});

Upvotes: 5

Micha&#235;l Perrin
Micha&#235;l Perrin

Reputation: 6238

The easiest way to do this is to use the HubSpot global form events:

window.addEventListener('message', event => {
  if (
    event.data.type === 'hsFormCallback'
    && event.data.eventName === 'onFormSubmit'
  ) {
    console.log("Form Submitted!");
  }
});

If you have multiple forms on your page, you can also check for its id, with event.data.id.

Upvotes: 3

Kirk H
Kirk H

Reputation: 451

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.

Upvotes: 3

Related Questions