Form submission->trigger function->send mail->report success/failure

We are close to go productive with a Gatsby site. Plans are to go with netlify, but I’m not sure how to tackle this process:

  1. User submits a form requesting an offer.
  2. Netlify receives the form submission and trigges the function submisson-created.
  3. submisson-created generates the requested offer.
  4. submisson-created sends the offer using mailgun.com or a similar service.
  5. If the email service suffers an outage or email verification fails, we should inform the user about this problem. Otherwise, we show the confirmation page.

Ideally we should inform the user about success or failure after completing submisson-created and not after form submission. Imagine an email service outage. The form submits correctly and the user is forwarded to a “Thank -You -Page”, but never receiving the requested offer.

Perhaps a more straightforward way to do this is not using Netlifys form handling at all and do form handling (including reCaptcha confirmation) in the function which sends the offer?

I don’t know how to tackle this case. Any advice appreciated.

Thanks and regards

Hey again @don-esteban :wave:t2:

Yes, you’ve got a few options! Here are three that I think would suit your needs.

Option 1 - If you don’t need the submission logging that Forms gives you (a history of all submissions) then don’t bother with using the Form-Submission hook Function; just have a Function to kick off your email and call it directly from your front end (Mailgun and others log all their emails too so that may suffice for logging anyway)

Option 2 - Query MailGun after-the-fact: when you use the Form-Submission hook Function / Event-Function, the form will submit and your user will be redirected to the post-submission path before or during the submission-created Function runs. It’s not synchronous. That Function will run on its own (quick) time outside of the user flow. In this option I’d recommend that on the “Thanks!” page you have javascript query Mailgun (either directly or through another Function if you need to obscure API keys) to check and see if the mail was sent correctly, then have Javascript render a true “Thank you” message. In the meantime you could make the mark-up something like “Submitted… making sure it sent…” etc.

Option 3 - If you’re using JavaScript to submit your form to Netlify in the first place, you could have the submit handler communicate to Mailgun and submit your form to Netlify. Then you wouldn’t need a submission-created.js function and could perhaps get the benefit of both a) confirming the email was sent and b) logging record of your form submissions via Netlify’s tooling. If you go this route, I’d recommend submitting to Netlify first since Netlify’s spam protection and blockers may be able to stop your code from continuing to send an email if it comes up as spam :slight_smile:

Hope that gives you some ideas!


Jon

1 Like

Great answers!

Not sure, if I do understand correctly and will go deeper in tomorrow with a fresh head :wink: You suggest communicating with Mailgun client side? That’s not possible due to protecting secrets. But I could call a Netlify function, communicating with Mailgun. Something like this?

async function handleSubmit (e) {
  const formSubmissionResponse = await fetch(...) // Form submission
  // ...response/error handling...
  const mailgunResponse = await fetch("/.netlify/functions/send-offer-with-mailgun", options))
  // ...response/error handling...
}

Will check this with real code tomorrow. And have to examine netlify responses and errors. Does Netlify report back, if spam is detected or the reCAPTCHA challenge fails? Probably status 200, if form submission went well, otherwise other HTTP status codes? This way I could still use netlifys reCAPTCHA support.

Thanks


Stefan

Yep! You’re describing what I meant! Including the Function to obscure secure secrets (which can be further obscured even from the Function code as ENV vars :smiley: )

And have to examine netlify responses and errors. Does Netlify report back, if spam is detected or the reCAPTCHA challenge fails?

That is indeed a key question and one that I actually don’t readily know the answer to off-hand. I wouldn’t actually be surprised if Netlify sends back a 200 even on a spam request since they’re trying to convince bots that everything is fine :confused: but worth looking into for sure.


Jon

1 Like

Thanks all for helping. We went for an own form handling in Netlify functions. Everything works great and quite robust.

1 Like