Passing data out of HubSpot using onFormSubmit

[lucygenik]

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

[IsaacTakushi]

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:

• How to post a form with many fields with jQuery? | Stack Overflow
• How to Create an AJAX Contact Form | Treehouse
• .serialize() method | jQuery documentation

[#3]

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

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

Is this a viable answer for the email part? Can I get this PHP into the "Stuff do do before form is submitted" instructions and have it run or a function that uses it: <?php $mailto = ???; $mailFrom = ???; $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $email = $_POST['email']; $phone = $_POST['phone']; mail($mailto, $firstname, $lastname, $email, $phone, "From: ".$mailFrom); ?> Or... Would it have to be a combination of JQuery and Ajax (?):

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'),

[IsaacTakushi]

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

[#5]

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

[lucygenik]

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

[Derek_Gervais · Accepted solution]

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:

developers.hubspot.com

Using Global Form Events

This is a list of global events triggered by HubSpot forms; you can use these to trigger custom javascript related to forms. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.