Create a Contact Form using HTML CSS & JavaScript Last Updated : 07 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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:PrerequisitesHTMLCSSJavaScriptApproachCreate 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: Comment More infoAdvertise with us Next Article Create a Contact Form using HTML CSS & JavaScript kvvik2020 Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Geeks Premier League 2023 Similar Reads Create GeeksforGeeks Clone Using HTML CSS & JavaScript In this article, we'll make a clone of the GeeksforGeeks website. The clone includes home, about, courses, and contact pages. On the home page, we've added sections like categories, features, testimonials, and FAQs, similar to the GFG website. We named our clone GeeksforGeeks 2.0 to avoid copyright 15+ min read How to create a Popup Form using HTML CSS and JavaScript ? To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp 3 min read Create a Guestbook using HTML CSS and JavaScript This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest's information 3 min read How to create Cookie Consent Box using HTML CSS and JavaScript ? In this article, we will see how cookies are stored using the cookie consent box using HTML, CSS, & JavaScript.Cookies are small pieces of data that are stored on a user's device while browsing the website. Cookies are used to store information for faster access to data and provide a better user 4 min read How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a 3 min read Create ChatGPT Template using HTML CSS & JavaScript Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements. Prerequisites:HTMLCSSJavaScriptApproachCreate a new HTML file and 7 min read Create an QR Code Generator Project using HTML CSS & JavaScript Today, more than 75% of websites and apps use QR codes to share links, contact info, or event details quickly. Here, youâll learn how to make your own QR Code Generator using HTML, CSS, and JavaScript. Weâll guide you step by step, so even if youâre a beginner, you can follow along easily. By the en 3 min read Create a Health Tracker using HTML CSS & JavaScript In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag 5 min read Dynamic Resume Creator using HTML CSS and JavaScript Creating a well-structured and professional resume can be time-consuming and difficult for many job seekers. Challenges like formatting, organizing details, and making the resume stand out are common. To solve this issue, a Resume Creator project was developed to simplify the process by offering an 5 min read Create a User Blocking project using HTML CSS & JavaScript The User Blocking project is a simple application that allows users to block or unblock certain users. It provides a basic interface to add users to a block list and remove them from the list. In this article, we are going to implement the functionality that can block a user by clicking a button and 4 min read Like