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.
