Form handlers

[ironshield]

What is the best practice for adding JS code to form submissions?  If I add a form to a HubSpot page, how can I hook into the form's submit event?

Specifically, I'm trying to add a Facebook pixel event to a form submission.  It works intermittently if I add the JS snippet to the "inline thank you message."  But it's just not consistent.

[TRooInbound]

Hi @ironshield,

We are agree with answer given by @anders_grove.

We just want to add some more details to that answer

"onFormSubmit" attribute is used to provide callback funtion that executes after form is validated, just before the data is actually sent.

for more information regarding form embed code please visit here.

Thanks,

Team  TRooInbound

[ironshield]

Is it possible to use this technique within the "Design Manager," using the Form module?  Or do I have to embed the form code using the Custom HTML module?

[anders_grove]

Hey @ironshield, 

An alternative method is to have the form redirect to a thank you page and add the facebook pixel event code to that page.

The onFormSubmit method is only possible by using embedded forms as it's part of hbspt.forms.create() call.

So if you have to have your script fire at a specific time, or if you have to stay on the same page I'd suggest use embedded forms. There are some jquery techniques you could try, but they're usually buggy and inconsistent. Otherwise add it to you thank your page.

Hope that helps!

[ironshield]

Thanks @anders_grove

That's what I was afraid of.  I appreciate the confirmation.

[anders_grove · Accepted solution]

You can use the embed code and add the onFormSubmit option:

hbspt.forms.create({
      portalId: 'xxxxx',
      formId: 'xxxxx-xxxx-xxxx-xxxx-xxxx',
      onFormSubmit: function($form) {
        // YOUR SCRIPT HERE
        } 
});