Creating a "Contact Us" form is a fundamental aspect of web development. It allows users to send messages or inquiries directly to the website owner or support team. This article will guide you through creating a complete and functional HTML Contact Us form, along with styling it using CSS and adding JavaScript validation.
HTML Contact Us Forms
A "Contact Us" form typically consists of fields for the user to provide their name, email, subject, and message. This data is then sent to the website owner or support team for further action. Proper styling and validation are crucial to ensure a good user experience and data integrity.
Basic Structure of an HTML Contact Us Form
The basic structure of an HTML contact form involves using the <form> element along with <input> elements for various fields, and a <textarea> element for the message.
<form action="/submit-contact" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
Adding CSS for Styling
To make the contact form visually appealing, you can add CSS to style the form elements. Here’s a basic example of how to style the contact form.
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Enhancing the Form with JavaScript Validation
You can enhance the contact form with JavaScript to provide instant feedback and validation on user inputs. Here’s a simple example that checks if all fields are filled before submission.
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let subject = document.getElementById("subject").value;
let message = document.getElementById("message").value;
if (name == "" || email == "" || subject == "" || message == "") {
alert("All fields are required!");
return false;
}
return true;
}
You need to add the onsubmit attribute to the form to call this function:
<form action="/submit-contact" method="post" onsubmit="return validateForm()">
Complete Code for an HTML Contact Us Form
Combining the HTML, CSS, and JavaScript, here’s the complete code for a functional and styled contact form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h2 {
text-align: center;
}
form {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
if (name == "" || email == "" || subject == "" || message == "") {
alert("All fields are required!");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="form-container">
<h2>Contact Us Form</h2>
<form action="/submit-contact" method="post" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>
Conclusion
Creating an HTML Contact Us form is an essential skill for web developers. With this guide, you now have a complete example of a contact form, including HTML, CSS, and JavaScript validation. This form is ready to be integrated into your web projects, providing a functional and user-friendly way for users to get in touch.
