How to Make a simple Contact Form with no Back end

Through this article you'll learn how to set up a simple Contact Form with no backend, that is using Form Submit . Form Sumit is easy to use form endpoint that sends all your submissions to your mail, without the need to write any backend code.

It is especially good if you do not want to share your email-id directly on your site & do not want to/know how to set up the backend. So for beginner Web Developers who set their portfolios or freelancers or students or anyone fine with getting a bunch of emails from Form Submit 😉. I recommend using it for personal projects, cause those pages do not get a lot of traffic/submissions.

Code

So to start out, build a simple form using HTML <form> tag. Even though one can always build fancy-looking forms using divs, it is highly recommended to use the <form> tag for accessibility. All the form fields are written under this tag.

I am building a very basic form containing the Name, Email, and Message fields, and of course, the Submit button. I highly recommend reading this or this documentation if you want to add more fields to your form.

To the <form> tag, add action attribute with the link “https://formsubmit./your@email.com” replacing the email id with your own, also add the method = ”POST” attribute:

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

This is the main set-up linking the Form Submit endpoint to your form.

Now, Form Submit is a great alternative if you do not want to share your email-id on your website, but it will still be visible on inspecting the Webpage using Dev tools. If you want to hide it even on inspection, read along to see how you can do so. 😃

For the further part of the HTML form, use the <label> tag to name your field and further to link <input> fields to label, provide proper id. Use the same id for your <input> tags.

<form action="https://formsubmit.co/example@mail.com" method="POST" >
    <label for="name">Name:</label>
    <input id="name" type="text" class="name" placeholder="Name" aria-label="Name input" required />

    <label for="email">Email-id:</label>
    <input type="email" id="email" class="email" placeholder="example@email.com" aria-label="email id input" required />

    <label for="message">Your Message:</label>
    <textarea name="Message" id="message" cols="30" rows="10" aria-label="your message input"></textarea>

    <input type="submit" class="submit-btn" aria-label="submit form" />
  </form>

I added placeholder values to the inputs, so that reader can better understand (yes, you can choose to add either label or placeholder values or both if want to). The aria attributes make the form accessible to people.

Here's the pen, where I build the Contact form:

For the Styling part, I used Flexbox (flex-direction: column) to make the vertical form format. I set the field widths to 100% and form width to 30%. You can style it as per your requirements and as per the number of fields. I added breakpoints to make the form responsive .

Host and Activate your Form

Now that your form is ready, it is time to host and activate your Form Submit endpoint. You can go ahead and host your Contact Form/webpage (try GitHub pages for free) . Now submit a dummy form. This is an important step, as you will be required to activate your Form Sumit endpoint, using the link you receive in the mail from Form Submit (this mail is sent to you after submission of the first form).

Click the activation button, and your Contact form is ready to get some submissions. On submission, the user will be asked to confirm captcha and will be directed to a Thank you page (which contains a link to navigate back to your website). You can choose to remove the captcha, but they highly recommend using it to avoid technical limitations.

Form Submit also provides many other options such as setting up autoresponse or linking a custom Thank you page etc, head over to Form Submit to explore the features.

At this point, you can happily be proud of the work you have done 👏

Optionally, you can do one more step to safely hide your mail-id (on inspecting the page) and then celebrate. To do so, open the activation mail you received from Form Submit and copy the random-like string, and paste it in place of your mail-id under the action attribute of <form>. Now, all that one sees on inspecting the form element is a random string instead of your mail-id 😁

Before replacing:

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

After replacing:

<form action="https://formsubmit.co/007cc3ab36ead6d4692e6e62b2d3dbe9" method="POST" >
...
</form>

Hooray, you just build a simple and working contact form with no backend!😀😎

Thanks for reading! Comment down if you know others ways to set up contact forms without backend😄 Feedback is always welcome!✨