Send Emails From an HTML Contact Form Using FormSubmit

Sachini Amarasinghe
Nerd For Tech
Published in
2 min readSep 20, 2022
Photo by Author

Hey all!🤩

Are you looking for a simple way to send emails through a contact form on your web page? Okay, now you have reached the solution! I’ll explain a super simple way to do that here, only using HTML.

First, I’m going to make a contact form with a few input fields for getting the name, email, and message and also with a submit button. Then I’ll show how actually send emails to your email address after pressing the send button and redirecting to a thank you page. Here I’m using FormSubmit to do this. It essentially allows us to connect our form to their form endpoint and they will email out the submissions for us.

Okay, let’s make it!

The below code snippet will essentially create a form for us with an action that uses the form submit endpoint. You can just use your email address where you should receive emails from users instead of “your@email.com” in the below code. Also, you can change the other input fields according to your need, even though I’m just using them to get the name and email.

If you need to redirect to a thank you page, you can use this below code line inside your form after creating another page for it (Here, the page is thanks.html).

<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">

You can refer to the FormSubmit documentation to customize the email format and add many more features to your contact form.

The first time when you are going to submit the form, it will trigger an email requesting confirmation. The message will appear like this.

Form activation message

Note: Make sure to open this page through a web server. Because FormSubmit will not work in pages browsed as HTML files.

TADAA! You have done the work. Isn’t it so cool?😎

If you learned something new from this article or if you have any suggestions, please leave a comment. I love to hear from you.🧡

--

--

Nerd For Tech
Nerd For Tech

Published in Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Sachini Amarasinghe
Sachini Amarasinghe

Written by Sachini Amarasinghe

Former Trainee Software Engineer at Creative Software | Final Year Undergraduate at University of Moratuwa, Sri Lanka. https://sachiniamarasinghe.vercel.app/

No responses yet