HTML Contact Form with Validation
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Simple HTML Contact Form with Validation</title>
<meta name="description" content="Learn how to create a simple HTML contact form with built-in validation using HTML5 attributes. Includes example code and explanation.">
<meta name="keywords" content="HTML Contact Form, HTML5 Validation, Simple Contact Form, Form Validation, Frontend Development">
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form action="submit_form.php" method="post">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required placeholder="Write your message here"></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Step 2: CSS Code
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f8f9fa;
}
.container {
max-width: 400px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #218838;
}
Explanation
-
HTML Form Elements
<form>contains input fields for name, email, and message.- The
requiredattribute ensures users must fill out the fields. - The
<input>field for email hastype="email", which ensures proper email format validation.
-
Styling with CSS
- The form is centered, and styles are added for better readability.
- The submit button has hover effects for a better user experience.
-
Validation
- HTML5 validation automatically checks the required fields before submitting.
- The email input uses
type="email", so incorrect formats (e.g., “test@com”) will not be accepted.