Linking your HTML contact form to your email, no backend code needed.

Build Solutions's photo
Build Solutions
·

2 min read

I was working on a website site for a client and the stated that they didn't want any backend code, and everything should be managed from the frontend. Easy right? The con here is that they wanted the contact form to submit to their email and an auto-responder signifying the sender that the form has been submitted in their email. This is pretty easy to achieve with PHP but the client clearly wanted HTML, CSS and Minimal JavaScript. I had to look for a way, I started searching for third party APIs that would take 'POST' request form the website and send the input information to the clients email. It didn't take me much time before I came across Form Submit, I went through the documentation to discover that they offered exactly what the client wanted and it is all free, you can choose to support them.

Let me walk you through what you need to get started: Create a HTML file, we will not be using CSS as this is just to show you workings. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>

<body>
    <form target="_blank" action="" method="post">
      <label for="name">
        <input type="text" name="name" id="name" placehoder="Name">
      </label><br>
      <label for="email">
        <input type="email" name="email" id="email" placehoder="Email Address">
      </label><br>
      <label for="message">
        <textarea name="message" id="message" cols="20" rows="5" placehoder="Message"></textarea>
      </label><br>
      <button type="submit">Submit Form</button>
    </form>
</body>

</html>

So let me explain the code above, this is the contact form with the name attribute for all inputs including the 'textarea' element. What the name attribute does here is to give each field a name so the API handling the 'POST' request would know what the different fields represents. And the type attribute is also very important, it helps the API understand what to do with the inputs. For example, the email type helps the API know the email to respond to incase you want that, we'll get back to how to implement it. In the form element, put this into your action attribute action="https://formsubmit.co/<youremail.com>" you see the method is also 'POST' because we are sending the data. Mind you for this to work the webpage has to be hosted online, their are loads of free web hosting sites to try this e.g surge, netlify, githubpages etc. After submitting the form, you should get a activation email for Form Submit and you have to follow the instruction, you are also given a random string that would replace your email, so if someone inspects your page they'd only see that random string.

Thank You for reading.

You should check back for more contents and you can suggest topics you want me to breakdown for you.

HTML EmailsHTML5