# Guide to Creating a Simple Contact Form Creating a contact form is an essential skill for any web developer. This guide will show you how to build a simple contact form using HTML for the structure, CSS for styling, and JavaScript for basic validation. ### HTML Structure Start by creating the form markup with fields for Name, Email, and Message :-) ``` ``` ### CSS Styling Add some CSS to style the form and inputs for a clean and modern look:-) ``` form { max-width: 400px; margin: 20px auto; padding: 15px; border: 1px solid #ccc; border-radius: 8px; font-family: Arial, sans-serif; } label { display: block; margin-top: 10px; font-weight: bold; } input, textarea { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #bbb; border-radius: 4px; box-sizing: border-box; } button { margin-top: 12px; padding: 10px; background-color: #007bff; border: none; color: white; font-weight: bold; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } ``` ### JavaScript for Basic Validation Add basic validation to ensure the user fills all fields with appropriate values:-) ``` document.getElementById('contactForm').addEventListener('submit', function(event) { var name = document.getElementById('name').value.trim(); var email = document.getElementById('email').value.trim(); var message = document.getElementById('message').value.trim(); var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!name) { alert('Please enter your name.'); event.preventDefault(); return; } if (!email || !emailRegex.test(email)) { alert('Please enter a valid email address.'); event.preventDefault(); return; } if (!message) { alert('Please enter your message.'); event.preventDefault(); return; } }); ``` ## Conclusion With these simple steps, you have a functional contact form that looks good and validates user input for common errors. You can further enhance this form by adding server-side handling, spam protection, and advanced UI features.

Tag: WebDev