Passing data out of HubSpot using onFormSubmit

forms

#1

Hey, I might be completely blind but I am struggling to work out exactly where in HubSpot I am supposed to add onFromSubmit handlers for forms created using the Marketing Form Builder. I see a lot of examples for using

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

however there seems to be no place to add this code. I attempted to embed it in Settings > Advanced Options > Additional code snippets > Head HTML but understandably hbspt isn't an object.

Am I missing something really obvious?

My use case is that I wish to add a product signup form for a SAAS application and the form must post to an external URL where my webapp sits to create an account.

Any help would be greatly appreciated. I feel that as I can't find an answer the question must be blindingly stupid and look forward to being put on the path to enlightenment :stuck_out_tongue_winking_eye:


#2

Hi @lucygenik,

That's what the HubSpot form embed code looks like; the customization options (including the various callbacks) are intended to be used when embedding the form on an external page. If you're trying to take advantage of these events on a HubSpot page, you'd be better off listening for the corresponding global form events:


#3

Thank you Derek that is exactly the info I needed, problem solved.


#4

@lucygenik, what does the final product look like then. I.e., what exactly do you add in the onFormSubmit section here to send the form data to an external url (?):

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


#8

Hi @John5,

In its simplest form, you'd probably be looking at something like:

hbspt.forms.create({
     portalId: '',
     formId: '',
     onFormSubmit: function($form) {
          // Serialize the form data.
          var formData = $(form).serialize();
          // Submit the form using AJAX.
          $.ajax({
               type: 'POST',
               url: $(form).attr('action'),
               data: formData
          })
     }
});

I recommend checking out these releated resources on jQuery and AJAX:


onFormSubmit - How do you send the form data via email and/or into MySQL or add to a text file?
#9

Thanks @Isaac_Takushi, I just noticed this, and that definitely appears promising. Are you also able to shed any light here:

Would like to be able to do some or all of the following with onFormSubmit in order of preference:

  1. Send the data in an email somewhere
  2. Add the data to a MySQL db (or other db?)
  3. Add the data into an existing text file under any data already there

Thanks again for that post.

Oh and come to think of it, where and how do I put the destination url to go with this in your post above:

url: $(form).attr('action'),


#10

Hi @John5,

@Connor_Barley and I are working on a response to this topic. Stay tuned.

You can actually just define the request URL where I typed $(form).attr('action'). Since the embedded form action URL points to HubSpot's backend, you will need to define a different request URL within the onFormSubmit method. That was an oversight on my part.

The code should then be something like:

$.ajax({
     type: 'POST',
     url: URL,
     data: formData
})