Simple Contact Form with HTML, CSS & JavaScript

A contact form is an essential website feature, allowing users to send messages easily. In this tutorial, you’ll learn how to create a simple, responsive contact form using HTML, CSS, and JavaScript without a backend.

Since we won’t be using a backend, we’ll implement form validation and display a confirmation message upon submission.

Step 1: Create the HTML Structure

Create an index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to create a simple contact form using HTML, CSS, and JavaScript without a backend.">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="contact-container">
        <h2>Contact Us</h2>
        <p>Fill in the form below to send us a message.</p>
        
        <form id="contact-form">
            <div class="input-group">
                <label for="name">Name</label>
                <input type="text" id="name" placeholder="Enter your name" required>
                <small class="error-message"></small>
            </div>

            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" placeholder="Enter your email" required>
                <small class="error-message"></small>
            </div>

            <div class="input-group">
                <label for="message">Message</label>
                <textarea id="message" placeholder="Enter your message" rows="4" required></textarea>
                <small class="error-message"></small>
            </div>

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

        <p id="form-response" class="hidden">Thank you! Your message has been sent.</p>
    </div>

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

Step 2: Style the Contact Form with CSS

Create a styles.css file and add the following styles:

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Container for the contact form */
.contact-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Form headings */
h2 {
    margin-bottom: 10px;
}

/* Input field styles */
.input-group {
    text-align: left;
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Error message */
.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

/* Button styling */
button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #0056b3;
}

/* Success message */
.hidden {
    display: none;
    color: green;
    font-weight: bold;
    margin-top: 15px;
}

Step 3: Add JavaScript for Form Validation and Confirmation

Create a script.js file and add the following JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("contact-form");
    const nameInput = document.getElementById("name");
    const emailInput = document.getElementById("email");
    const messageInput = document.getElementById("message");
    const responseMessage = document.getElementById("form-response");

    // Function to show an error message
    function showError(input, message) {
        const errorMessage = input.nextElementSibling;
        errorMessage.textContent = message;
        errorMessage.style.display = "block";
        input.style.borderColor = "red";
    }

    // Function to clear an error message
    function clearError(input) {
        const errorMessage = input.nextElementSibling;
        errorMessage.textContent = "";
        errorMessage.style.display = "none";
        input.style.borderColor = "#ccc";
    }

    // Email validation function
    function isValidEmail(email) {
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailPattern.test(email);
    }

    // Form submission handling
    form.addEventListener("submit", function (event) {
        event.preventDefault();

        let isValid = true;

        // Name validation
        if (nameInput.value.trim() === "") {
            showError(nameInput, "Name is required.");
            isValid = false;
        } else {
            clearError(nameInput);
        }

        // Email validation
        if (emailInput.value.trim() === "") {
            showError(emailInput, "Email is required.");
            isValid = false;
        } else if (!isValidEmail(emailInput.value.trim())) {
            showError(emailInput, "Enter a valid email address.");
            isValid = false;
        } else {
            clearError(emailInput);
        }

        // Message validation
        if (messageInput.value.trim() === "") {
            showError(messageInput, "Message cannot be empty.");
            isValid = false;
        } else {
            clearError(messageInput);
        }

        // If the form is valid, show a success message
        if (isValid) {
            responseMessage.classList.remove("hidden");
            form.reset();
            setTimeout(() => {
                responseMessage.classList.add("hidden");
            }, 3000);
        }
    });
});

How It Works

HTML

  • A form with three input fields (name, email, message) and a submit button.
  • A hidden success message (#form-response) that appears upon successful submission.

CSS

  • A responsive, modern design.
  • Error messages that appear when validation fails.
  • A hover effect on the button.

JavaScript

  • Validation to ensure all fields are filled correctly.
  • Checks for valid email format.
  • Shows error messages if the input is incorrect.
  • Displays a confirmation message when the form is submitted successfully.

Conclusion

This simple contact form with validation is responsive, user-friendly, and lightweight. It works without a backend, making it perfect for static websites or learning purposes.
If you are looking for readymade Free HTML Contact Form Templates with Code, you can check this blog.
If you liked this tutorial, you may want to take a look at Login and Registration Forms. Keep an eye out for more easy web development tips coming your way.

Popular Downloads