How to Build a Fully Functional Contact Form with HTML, CSS & JavaScript

Introduction: Why Your Form Probably Doesn't Work

Most tutorials show you how to make a contact form look pretty. They give you HTML and CSS, but they don't tell you how to actually receive the messages. If you're just using `

`, it's unreliable and often opens the user's email client. In this guide, I'm going to show you how to build a contact form that actually sends messages to your inbox, using a free service called Formspree.

What We're Building

A simple form with Name, Email, and Message fields. It will have client-side validation (so users can't submit empty fields). On submission, it will send the data to a backend service.

Step-by-Step Execution

Step 1: The HTML

<form id="contactForm">
    <input type="text" id="name" placeholder="Your Name" required>
    <input type="email" id="email" placeholder="Your Email" required>
    <textarea id="message" placeholder="Your Message" required></textarea>
    <button type="submit">Send</button>
</form>

Step 2: The CSS

We'll add some basic styling to make it look clean.

form { display: flex; flex-direction: column; gap: 15px; max-width: 400px; }
input, textarea { padding: 12px; border: 1px solid #ccc; border-radius: 6px; }
button { padding: 12px; background: #6366f1; color: white; border: none; cursor: pointer; }

Step 3: The JavaScript (Validation)

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent default submission
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    if (!name || !email) {
        alert('Please fill all fields.');
        return;
    }
    alert('Message sent successfully!');
});

Step 4: Making It Real with Formspree

To actually receive emails, sign up at Formspree.io. They give you a unique URL. Change your form tag to:

<form action="https://formspree.io/f/YOUR_ID" method="POST">

Now, when users submit the form, Formspree will forward the message to your email.

Common Mistakes Beginners Make

Not preventing default: Without `e.preventDefault()`, the page will reload and validation will be lost.
Using `mailto`: It's unreliable. Use a backend service like Formspree.
Forgetting the `name` attribute: Formspree and other services need the `name` attribute to identify the field.

Practical Exercise (Don't Skip This)

Build the form, integrate Formspree, and send yourself a test message. If you get stuck, email me at digisoneglobal@gmail.com.

Frequently Asked Questions

Q: Is Formspree really free?
A: Yes, the free tier allows 50 submissions per month, which is plenty for a small site.

Q: Can I build this without JavaScript?
A: Yes, HTML5 has `required` attributes for basic validation. But JS gives a better user experience.

Tools & Resources Mentioned

Formspree - Free form backend.
MDN Forms Guide - Official docs.

Conclusion & Next Steps

You've built a functional form. This is a critical skill for any web developer. Next, we'll move on to more advanced topics like APIs.