How to Make a Contact Form Send Email Using HTML

22 Jul 2023

If you have a website and want to allow visitors to contact you easily, adding a contact form can be a great idea. In this guide, we’ll walk you through the process of creating a simple contact form in HTML that can send emails. Don’t worry if you’re not familiar with coding – we’ll keep things easy and straightforward.

What You’ll Need

Before we dive in, let’s make sure you have everything you need:

Text Editor: You’ll need a basic text editor to write your HTML code. Notepad (Windows) or TextEdit (Mac) will work just fine.
Internet Connection: To access any third-party services, you’ll need an active internet connection.

Creating the Contact Form

Let’s start by creating the actual contact form using HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="PROCESSING_URL" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea>
        <br>
        <input type="submit" value="Send">
    </form>
</body>
</html>

Replace "PROCESSING_URL" with the actual URL where you will process the form data.

Using Formspree To Send Email

To process the form data and send emails, we’ll use a third-party service called Formspree. Here’s how:

Go to Formspree website.
Sign up using your email.
Once logged in, click “New Form” and enter a name for your form.
You’ll be provided with a Formspree endpoint. Replace "PROCESSING_URL" in your HTML code with this endpoint.
Formspree will handle the data and send you an email whenever someone submits the form.

Customizing and Styling

You can customize the form to match your website’s look and feel. You can modify the labels, input fields, and even add CSS for styling. However, if you’re not comfortable with styling, don’t worry – the basic form will work just fine.

Testing the Contact Form

After setting up the form, it’s essential to test it to ensure everything works as expected. Fill out the form with test information and submit it. You should receive an email to the address you used to sign up for Formspree.

Wrapping Up

Congratulations! You’ve successfully created a contact form that can send emails using HTML and Formspree. This simple form allows visitors to get in touch with you without revealing your email address. With this basic knowledge, you can start enhancing and adding more features to your website’s forms.