The Easiest Way to Send the Contents of HTML Forms to Your Email

designed using: canva.com

One of the challenges a lot of people face whilst building static web pages is trying to figure out how they can send the content of their contact form as a mail to their email account.

There are a number of options you can choose to use. These options include creating server-side scripts, setting up a third-party form, etc.
The options are diverse and anything can go wrong. In fact, a lot of people get stuck in the process of trying and give up.

I stumbled across a tool that allowed me to seamlessly send the contents of HTML forms via mail. You do not need to build some server-side logic or signup somewhere to get this to work. As a matter of fact, you can test it using static pages from your local machine.

How cool is that?

cool yea 😎

Let’s dive right into it.

There are a couple of tools that would allow you to send the contents of an HTML form to your email.
Some of these tools include formspree, paperform, wufoo, etc. However, these tools are paid tools.

FormSubmit is free and you do not require a signup to get started.
I’d work you through how to use this tool.

For more info, you can check their documentation.

Getting Started with FormSubmit

First of all, you want to connect your form to your email. This is just a single line of code. Create a post method for your form then add your email to the action attribute like so:

<form action="https://formsubmit.co/your@email.com" method="POST" />

Yes, that’s it.

Next, you want to make sure to include a name attribute to every element of the form that you want to capture.
The attribute type of your action button should be set to submit.

If you do this faithfully, your HTML form should look like this:

Go ahead and try this.

When you submit the form for the first time, you would get an email notification stating that you should confirm the product for your email. Note that the confirmation notification email would always show up whenever you use this tool on a new or different server.

You would always want to set this up whenever you deploy your app to a different server.

Activation Email for FormSubmit

Activate the form. Your subsequent form requests would hit your email directly without any hassles.

Some Advanced Settings

There are a couple of advanced settings you should be aware of.
One of those settings is redirecting the users that filled your form to a thank you page.

Add this line of code to your form tag:

<input type="hidden" name="_next" value="your-thank-you-url.html">

Don’t forget to set the typeto hidden so that users won’t be able to view this input. Set the name attribute as _next . Then enter your desired URL into the value attribute.

You can also send the contents of the HTML forms to multiple email addresses.

<input type="hidden" name="_cc" value="another@email.com">

Or

<input type="hidden" name="_cc" value="another@email.com,yetanother@email.com">

You can disable reCAPTCHA, choose email templates and do other cool stuff. Check out their documentation.

This tool is free and amazing and you can consider sponsoring this tool.

I hope you find this article helpful. Feel free to share with developers in your circle.