In the dynamic realm of digital marketing, I have dedicated a significant 14+ years to unraveling the intricacies of blogging. This thrilling journey has been fueled by an unwavering passion for helping others grow, making every milestone a testament to the evolving landscape of this industry.

Get In Touch


Digital World


HTML, CSS, and JavaScript contact form validation example

Here’s a simple example of how you can validate a contact form using HTML, CSS, and JavaScript:

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

    <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">

    <div class="container">
        <form id="contactForm" onsubmit="submitForm(event)">
            <h2>Contact Us</h2>
            <div class="input-group">
                <label for="name">Name:</label>
                <input type="text" id="name" class="form-input" required>
            <div class="input-group">
                <label for="email">Email:</label>
                <input type="email" id="email" class="form-input" required>
            <div class="input-group">
                <label for="message">Message:</label>
                <textarea id="message" class="form-input" rows="4" required></textarea>
            <button type="submit" class="submit-button">Submit</button>

        function submitForm(event) {
            // Validate form data
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var message = document.getElementById('message').value;

            if (name === "" || email === "" || message === "") {
                alert("Please fill in all fields");

            // Send mail using your preferred server-side language (PHP in this case)
            // Replace 'your_mail_script.php' with the actual script that sends the email
            var xhr = new XMLHttpRequest();
  "POST", "your_mail_script.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert("Thank you for contacting us! We will get back to you soon.");
            var data = "name=" + encodeURIComponent(name) +
                "&email=" + encodeURIComponent(email) +
                "&message=" + encodeURIComponent(message);

/* styles.css */

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

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

form {
    display: grid;
    gap: 20px;

.input-group {
    display: grid;
    gap: 5px;

label {
    font-weight: bold;

.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;

.submit-button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

.submit-button:hover {
    background-color: #45a049;

Note: Replace "your_mail_script.php" with the actual server-side script that processes the form and sends the email. Additionally, ensure that your server supports the chosen server-side language (PHP in this example).

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us