The short answer is you can’t do this with HTML only. You need server-side code to do it, for example, PHP and its frameworks (WordPress, Laravel,…), Python, NuxtJS, or whatever technology you use.
You might think the “mailto:” Form action can help you, but let me assure you, it’s not what you want. Please read about it here
To send the Form Content as an email, you need 2 things:
1) The Form to collect the data
2) Server Side Backend Code to send the Email
If you know PHP or another language, that seems easy enough,… but the challenges follow once you start sending form emails. But more about that later.
<form method="post" action="sendFormEmail.php">
<textarea name="message"></textarea>
<input type="submit">
</form>The Endpoint in the action attribute describes the Endpoint receiving the form data.
In PHP, you would have the following code in sendFormEmail.php:
<?php
if($_POST["message"]) {
mail("[email protected]", "New Contact Form submission",
$_POST["message"]. "From: [email protected]");
}
?>If you add new fields to the form, you need to add them in the sendFormEmail.php. For example, you want to add an email address.
<form method="post" action="sendFormEmail.php">
<textarea name="message"></textarea>
<input type="text" name="email">
<input type="submit">
</form>and then add it to sendFormEmail.php Script as well:
<?php
if($_POST["message"]) {
mail("[email protected]", "New Contact Form submission",
$_POST["message"]. $_POST["email"];
}
?>That’s it 🙂 But not quite.
After the first few days, you have this form online, the first thing you will realize is that you will receive many spam submissions every day. This will eventually lead to one thing -> emails from your script/server will be blocked, and you will no longer receive Form Submission emails and definitely lose concrete leads and essential data. Also, this information will be lost forever. Customers will start to complain that nobody answered the contact form…
Why is this… It’s easy for a bot to target your form and automatically submit spam content. And the spam filters receiving the emails with this spammy content will very quickly classify those emails as spam. Blocking all incoming traffic from your form. This will happen, and it’s just a matter of days or weeks, never months.
So how do we get around this challenge? We need a way to detect spam submissions. The easiest way to do this is by using a honeypot field. This is basically a field that is only visible to spam bots, and if it contains a value, you know that you have a bot filling out the form, and you can just not send the mail.
This looks like this.
<form method="post" action="sendFormEmail.php">
<textarea name="message"></textarea>
<input type="text" name="email">
<input type="text" name="firstname" class="Robotnik">
<input type="submit">
</form>And to hide the field, just add this to the CSS file:
.Robotnik{
display:none;
}In the PHP sendFormEmail.php just check for this field:
<?php
if( ! empty( $_POST["firstname"] ) ){
return; //you may add code here to echo an error etc.
}else{
if($_POST["message"]) {
mail("[email protected]", "New Contact Form submission",
$_POST["message"]. $_POST["email"];
}
}
?>With this solution, you have a working solution, but it won’t be long until bots can circumvent your protection. In addition, chances are high that some of the emails will land in the spam folder and might never be delivered. In addition, your customer will quickly have the following wishes. Believe me, I know 🙂 it starts simple, but after a couple of contact form requests, you need the following features:
- Tell the customers what happened to the damn Email. (they get lost all the time)
- Give a list with all submissions in excel
- Send files
- Validate the input
- And and and
Basically, soon you will start to extend the script above and basically are building the next form submission backend. Like so many developers before you. This is also the reason we began to create headlessforms.cloud. After the 100s of forms we built for a brand like Volvo, VW, Coke, Stimorol, and so on, we decided we wanted one solution that fits all of the use cases and does it better for all of them. After some customers also enjoyed it, we decided to make a product.
So what is it? Basically, we build the perfect sendEmailForm.php Backend script that you can just use. We ensure emails get delivered, spam is blocked, and your customer receives a Login and can access all the forms in an easy-to-use backend. In addition, we made it easy for you to debug your code.
This how easy the task above is with Headlessforms. No Server Side Code is needed nor any spam detection or mail server problems to solve.
Just replace the action attribute with your personal Headlessforms Endpoint:
<form method="post" action="HeadlessForms-Endpoint">
<textarea name="message"></textarea>
<input type="submit">
</form>You’re done and get a ton of features you will need shortly on top for free.
