How to make a copy of the form data be sent by email AFTER form submission to its first destination?

JohnH2O
Participant

I'm trying to add some code to the javascript for an embedded form that will send a copy of the form submission data in an email, but not in lieu of submitting the data to its first destination.  So basically it means two actions happen after the user clicks to submit.  This is what I have so far, but I don't know how to complete it, or if the Ajax part is on the right track:

 

<script>
hbspt.forms.create({
portalId: "1234",
formId: "5678",
inlineMessage: "Thank you!

onFormSubmitted: function($form) {
// Serialize the form data.
var formData = $(form).serialize();
// Send a copy of the form data using AJAX after the form has already been submitted to its first and primary destination
$.ajax({
type: 'hsFormCallback',
url: $(form).attr('action'),
data: formData

What command goes here next to send the email, and are the three Ajax lines above complete and correct to begin with?
})
}

 

Also, assuming this can even be done, will it cause email software to open up on the form user's device to send the email?  That is definitely not what I want.  I would want this email to be sent from whatever Hubspot server is receiving and processing the form's input to begin with, not from the actual user of the form.

 

0 Upvotes
3 Replies 3
WendyGoh
HubSpot Employee

Hey @JohnH2O,

 

One thing that I'd like to point out: I believe you should be using onFormSubmit as oppose to onFormSubmitted and this is because the submission has been persisted when you call the onFormSubmitted event. 

 

More details here; Using Global Form Events.

 

As for whether it will cause the email software to open up on the form, I highly doubt so but could you shed more lights on the code that you'd like to use? 

0 Upvotes
JohnH2O
Participant

Hi @WendyGoh ,

 

Thanks for your reply.  I just realized I had seen this in my inbox and needed to come back.

 

I'm trying to put a command in that will cause whatever Hubspot server is processing the form input to begin with to send the email as well, or at least tell whatever Hubspot server is supposed to do that to send it.  I do not want anything to happen on the client visitor device.

 

All of this is pure speculation based on researching to try to find out how to do this:

 

onFormSubmitted: function($form) {
// Serialize the form data.
var formData = $(form).serialize();
// Send a copy of the form data using AJAX after the form has already been submitted to its first and primary destination
$.ajax({
type: 'hsFormCallback',
url: $(form).attr('action'),
data: formData

What command goes here next to send the email, and are the three Ajax lines above complete and correct to begin with?
})

 

I had started with onFormSubmit, but then I started thinking the form first had to be processed for the data input, and then since the email should happen after that, it should be onFormSubmitted instead.  But maybe that idea is simply incorrect.  And maybe both actions can be done at the same time for instance.

 

The form is only capturing first and last name, email and phone.  So I want the form's input to be processed as it is normally, and then also an email be sent saying "hey, Pat Smith of pat@example.com and 555-1212 just submitted a form" to a specific email address that would appear in the code right there.

 

I'm assuming this can be done, but so far have just not yet been able to figure out exactly how.  I already have a big block of css code that goes with the instantiation of the form (not shown or needed here), and I figure surely this extra action I'm trying to code in should be something very doable.  I don't know if everything I have added there after the onFormSubmitted is even correct, but I'm hoping it is or is on the right track.  Wouldn't there be a lot of people here who know exactly what I'm looking for like the back of their hand?  Frankly it's hard to imagine there would not be lots of people using a feature like that if it's doable.

 

0 Upvotes
WendyGoh
HubSpot Employee

Hey @JohnH2O,

 

To be frank, I haven't come across a use case in which customer is using ajax to send an email after HubSpot form submission. As such, I'm not too familar with it. The closest code that I found was a combination of PHP with AJAX: Sending email in PHP using AJAX - Stack Overflow.

 

Generally, HubSpot user would use a workflow to send email after a form submission i.e.

 

Screen Shot 2020-08-05 at 10.32.09 AM.png

 

On the marketing email, you can use the personalization token as such, you can easily achieve the following:

hey, Pat Smith of pat@example.com and 555-1212 just submitted a form

 

Would this be something that your team is keen in exploring?

0 Upvotes