CMS Development

ironshield
参加者

Form handlers

解決

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.

0 いいね!
1件の承認済みベストアンサー
anders_grove
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Form handlers

解決

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

元の投稿で解決策を見る

5件の返信
TRooInbound
キーアドバイザー

Form handlers

解決

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

0 いいね!
ironshield
参加者

Form handlers

解決

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?

0 いいね!
anders_grove
投稿者 | Elite Partner
投稿者 | Elite Partner

Form handlers

解決

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
参加者

Form handlers

解決

Thanks @anders_grove

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

0 いいね!
anders_grove
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Form handlers

解決

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