A contact form is an essential feature for any website, allowing visitors to easily get in touch. Building a simple, stylish contact form using HTML, CSS, and JavaScript helps you collect inquiries without relying on third-party tools. In this tutorial, you’ll learn how to create a responsive contact form that validates input and provides user feedback.
Build a Contact Form
Step 1: Create the HTML Structure
Start by adding the basic form elements inside your HTML file:
<form id="contactForm" novalidate> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Your Name" required> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="you@example.com" required> <label for="message">Message</label> <textarea id="message" name="message" rows="5" placeholder="Write your message here..." required></textarea> <button type="submit">Send Message</button> <p id="formMessage"></p> </form>
The novalidate attribute disables the browser’s default validation so we can handle it with JavaScript.
Step 2: Style the Form with CSS
Add some clean and responsive styling to make the form look professional:
form { max-width: 400px; margin: 40px auto; padding: 20px; background: #f9f9f9; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-family: Arial, sans-serif; } label { display: block; margin-bottom: 6px; font-weight: bold; color: #333; } input, textarea { width: 100%; padding: 10px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; font-size: 1rem; } input:focus, textarea:focus { border-color: #007bff; outline: none; } button { background-color: #007bff; color: white; border: none; padding: 12px; width: 100%; font-size: 1.1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } #formMessage { text-align: center; font-weight: 600; margin-top: 12px; }
Step 3: Add JavaScript for Form Validation and Submission
To enhance user experience, we’ll add simple validation and a confirmation message when the form is submitted.
const form = document.getElementById('contactForm'); const formMessage = document.getElementById('formMessage'); form.addEventListener('submit', function(e) { e.preventDefault(); // Clear previous message formMessage.textContent = ''; formMessage.style.color = ''; // Simple validation const name = form.name.value.trim(); const email = form.email.value.trim(); const message = form.message.value.trim(); if (!name || !email || !message) { formMessage.textContent = 'Please fill out all fields.'; formMessage.style.color = 'red'; return; } // Basic email format check const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/; if (!emailPattern.test(email)) { formMessage.textContent = 'Please enter a valid email address.'; formMessage.style.color = 'red'; return; } // If valid, simulate form submission formMessage.textContent = 'Sending your message...'; formMessage.style.color = '#007bff'; setTimeout(() => { formMessage.textContent = 'Thank you! Your message has been sent.'; formMessage.style.color = 'green'; form.reset(); }, 1500); });
Step 4: Test and Customize
Open your HTML file in a browser and test the form:
- Try submitting empty fields — you should see error messages.
- Enter valid data — see the success confirmation.
- Customize colors, fonts, or button styles to match your brand.
Final Thoughts
Building your own contact form with HTML, CSS, and JavaScript gives you full control over design and behavior. You can extend this example by integrating backend services like PHP, Node.js, or third-party APIs (e.g., Formspree, EmailJS) to handle actual email sending.
