Advertisement
webdev • A contact form is one of the most common elements on any website, and building one is a great way to learn real web development. In this tutorial, you’ll learn how to create a clean and functional contact form using HTML, style it with CSS, and add simple JavaScript validation to make sure users fill in the right information. Everything is explained step-by-step in friendly beginner language

How to Build a Simple Contact Form Using HTML, CSS, and JavaScript (Beginners Guide)

5 Min Read Verified Content

A contact form is the little box you see on websites where you can type your name, email, message, and hit Send.
And guess what? Building one is much easier than you might think.

We’re going to create a simple form, make it look nice, and add a bit of JavaScript so it behaves properly. Even if you’re new or feel “not smart enough for coding,” trust me—you can do this.

Let’s get started.


1. Step One: Create Your Project Folder

You already know the drill from the previous tutorial:

contact-form-app

Inside it, create:

index.html
style.css
script.js

That’s our starting point.


2. Step Two: Write the HTML Form

Open index.html and add:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Contact Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Contact Us</h1>

    <form id="contactForm">
        <label for="name">Name:</label>
        <input type="text" id="name" placeholder="Your Name">

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="your@email.com">

        <label for="message">Message:</label>
        <textarea id="message" placeholder="Write your message here"></textarea>

        <button type="submit">Send Message</button>
    </form>

    <p id="status"></p>

    <script src="script.js"></script>
</body>
</html>

Explanation

  • <form> holds all the input fields

  • <input> receives text like name and email

  • <textarea> is for longer messages

  • The <button> will submit the form

  • id="status" will display messages like “Sent successfully!”

Simple and clean.


3. Step Three: Make It Look Nice with CSS

Open style.css and add:

body {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 40px auto;
    background: #f9f9f9;
    padding: 20px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input, textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background: #45a049;
}

#status {
    margin-top: 20px;
    font-weight: bold;
}


Explanation

  • The form is centered to look clean

  • Inputs have padding and rounded corners

  • Button has a friendly color

  • Gap makes spacing easy

Looking professional already!


4. Step Four: Add JavaScript Validation

Open script.js and add:

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent form from refreshing the page

    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const message = document.getElementById('message').value.trim();
    const status = document.getElementById('status');

    if (!name || !email || !message) {
        status.textContent = "Please fill out all fields.";
        status.style.color = "red";
        return;
    }

    if (!email.includes('@')) {
        status.textContent = "Please enter a valid email address.";
        status.style.color = "red";
        return;
    }

    status.textContent = "Message sent successfully!";
    status.style.color = "green";

    document.getElementById('contactForm').reset();
});


Explanation

  • We prevent the page from reloading

  • Check if all fields are filled

  • Check if email looks valid

  • Show a friendly success message

  • Reset the form after submission

This is exactly how real websites handle form validation.

Advertisement
Back to Webdev