How to send a form to an email without any backend

#email #forms #html #nobackend

Hi Everyone!
In this post I will be showing you how to send a form in HTML without any backend in multiple ways. Remember to follow me for more posts. Now let's get started!

The Method attribute of the form must be set to "POST" for each of these ways to work. And the form input fields must have a name attribute that is not empty. I am going to use this basic HTML Markup:

<div class="container">
  <form action="#" method="POST">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

Now I am going to show you the first way to do this. In the action attribute of the form element add this code:

mailto:you@example.com <!--put your email here-->

What this will do is that it will open a new window of the Mail app and it is going to take all the user text in the input fields and put it in an email. Then if the user clicks "SEND", the form data will be sent to you.

The next way we can do this is by using different form submission companies. The ones we will be using are "Formspree" and "FormSubmit".

I prefer FormSubmit because it requires no registration so I will start with that. The first thing you need to do is go to Formsubmit.co.

Then you need to to copy the code that is pointed to in the image below.

Paste this code in the action attribute of your form. Then enter your email in "your@email.com" and you are all set!

Next let's use Formspree. Go to Formspree.io. Then create a new account by clicking the "Get Started Button".
Then you will be redirected to this page:

Then click "New Form". Then enter your form name and select what email it will send the submissions to (your email).

Once you create the form, copy the code that the image below shows.

Then paste that code in the action attribute of your form and you are done!

These are different ways you can send form with HTML without and Backend Code. Thank you for reading my post and if you have any questions, let me know.

Bye for now!