How to Make a Contact Form Send Email Using HTML
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>
"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.
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.
Hi there! I am Avic Ndugu.
Front End Developer Newsletter
Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.