Create a Contact Form using HTML CSS & JavaScript

Last Updated : 07 Aug, 2024

A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission.

Preview Image:

Web-capture_26-10-2023_123648_

Prerequisites

Approach

Create a HTML structure for the contact form component having proper id and classes for the styles.
Add a CSS file which contains all the styles related to the contact form component.
Add a JavaScript file having all the logic for validation and boundary checks.
Form Validations Conditions
- Length of name should be 5 or more.
- Length of subject should be 10 or more.
- Length of number should be 10.
- Email must include @ and length more than 6.
- Message length must be 40 characters.

Then, link the JavaScript and CSS file to the HTML file.

Example: This example describes the basic implementation of the contact form using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="contact-form-container">
        <h2>Contact Us</h2>
        <form id="contactForm">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" 
                       name="name" 
                       placeholder="Your Name" required>
                <span class="error-message" id="nameError"></span>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" 
                       name="email" 
                       placeholder="Your Email" required>
                <span class="error-message" id="emailError"></span>
            </div>
            <div class="form-group">
                <label for="phone">Phone</label>
                <input type="tel" id="phone" 
                       name="phone" 
                       placeholder="Your Phone Number" required>
                <span class="error-message" id="phoneError"></span>
            </div>
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" 
                          name="message" 
                          placeholder="Your Message" 
                          rows="5" required></textarea>
                <span class="error-message" 
                      id="messageError"></span>
            </div>
            <button type="submit" 
                    class="submit-button">
              Send Message
            </button>
        </form>
    </div>
    <script src="scripts.js"></script>
</body>

</html>

CSS

/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contact-form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 100%;
}

h2 {
    margin-top: 0;
    color: #333;
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

input, textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

textarea {
    resize: vertical;
}

.error-message {
    color: red;
    font-size: 0.875rem;
    display: none; /* Hidden by default */
}

.submit-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #218838;
}

JavaScript

// scripts.js

document.getElementById('contactForm').addEventListener('submit', function (event) {
    event.preventDefault();

    // Clear previous errors
    const errorElements = document.querySelectorAll('.error-message');
    errorElements.forEach(el => el.style.display = 'none');

    // Get form values
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const message = document.getElementById('message').value.trim();

    // Validation flags
    let isValid = true;

    // Name validation
    if (name === '') {
        document.getElementById('nameError').textContent = 'Name is required';
        document.getElementById('nameError').style.display = 'block';
        isValid = false;
    }

    // Email validation
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (email === '' || !emailPattern.test(email)) {
        document.getElementById('emailError').textContent = 'Valid email is required';
        document.getElementById('emailError').style.display = 'block';
        isValid = false;
    }

    // Phone validation
    const phonePattern = /^[0-9]{10}$/;
    if (phone === '' || !phonePattern.test(phone)) {
        document.getElementById('phoneError').textContent = 'Valid phone number is required';
        document.getElementById('phoneError').style.display = 'block';
        isValid = false;
    }

    // Message validation
    if (message === '') {
        document.getElementById('messageError').textContent = 'Message is required';
        document.getElementById('messageError').style.display = 'block';
        isValid = false;
    }

    // If form is valid, you can submit it or perform any other action
    if (isValid) {
        alert('Form submitted successfully!');
        // You can also submit the form here using AJAX or similar methods
    }
});

Output:

Create a Contact Form using HTML CSS & JavaScript

kvvik2020

Improve

Article Tags :

Create a Contact Form using HTML CSS & JavaScript

Preview Image:

Prerequisites

Approach

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?