Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Design a Contact us Page using HTML and CSS
It really doesn't make sense to have a contact form on a website without one, much like a burger without a bun. If your business is online, you must have a method for clients to get in touch with you. A "Contact Us" form is an online form that website users can use to submit messages or requests to the website's owners or operators. It provides customers with an easy way to get in touch with the company without requiring them to use traditional contact methods like phone calls or emails.
The data is often forwarded to the recipient's specified email address or kept in a database for further use when the user completes and submits the form. With this approach, businesses and organizations may handle consumer queries, comments, and support requests in a more efficient and well-organized manner.
Since "Contact Us" forms don't involve using an email client, provide an organized method of communicating with users, and are available day or night, they are frequently favored by consumers. Let's dive into the article to learn how to create contact us page using HTML and CSS.
Basic Structure Components
A contact us form typically includes the following elements
- Name field Text input for user's name
- Email field Email input for contact information
- Message area Textarea for detailed messages
- Checkbox For terms and conditions agreement
- Submit button To send the form data
Example: Animated Contact Form
Let's create a contact form with hover effects and animations that enhance user experience
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #E8DAEF;
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
.contact-form {
background: #D5F5E3;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
max-width: 460px;
margin: 50px auto;
padding: 30px;
border-radius: 10px;
animation: fadeIn 1s ease-in;
}
.form-title {
font-family: Verdana, sans-serif;
margin: 0 0 20px 0;
text-align: center;
font-weight: bold;
}
.page-title {
font-size: 2em;
color: #2C3E50;
margin-bottom: 10px;
}
.sub-title {
color: #7D8E95;
font-size: 1em;
margin-bottom: 30px;
}
.form-input {
display: block;
margin: 20px 0;
width: 100%;
padding: 15px;
border: 2px solid #E5E8E8;
border-radius: 5px;
background-color: #F8F9FA;
box-sizing: border-box;
font-size: 14px;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #6495ED;
background-color: white;
box-shadow: 0 0 10px rgba(100, 149, 237, 0.2);
}
.form-input:hover {
border-color: #6495ED;
transform: translateY(-2px);
}
.message-area {
height: 100px;
resize: vertical;
min-height: 80px;
}
.checkbox-container {
margin: 20px 0;
text-align: center;
}
.checkbox-container input[type="checkbox"] {
margin-right: 10px;
}
.checkbox-container label {
color: #2C3E50;
font-size: 14px;
}
.submit-btn {
width: 120px;
padding: 15px;
color: #DE3163;
background-color: #D6EAF8;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 20px auto;
transition: all 0.3s ease;
}
.submit-btn:hover {
background-color: #AED6F1;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="contact-form">
<form>
<div class="form-title page-title">Contact Us</div>
<div class="form-title sub-title">We'd love to hear from you!</div>
<input type="text" class="form-input" placeholder="Enter Your Name" required />
<input type="email" class="form-input" placeholder="Enter Your Email" required />
<textarea class="form-input message-area" placeholder="Enter Your Message" required></textarea>
<div class="checkbox-container">
<input type="checkbox" id="terms" required>
<label for="terms">I agree to the <b>Terms</b> & <b>Privacy Policy</b></label>
</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
</body>
</html>
A centered contact form with a light green background and shadow appears on a purple background. The form includes animated input fields that highlight on hover, a message textarea, checkbox for terms acceptance, and a submit button with hover effects. The entire form has a fade-in animation when the page loads.
Key Styling Features
- Hover Effects Input fields lift slightly and change border color on hover
- Focus States Active fields show blue borders and subtle shadows
- Responsive Design Form adapts to different screen sizes
- Animation Smooth fade-in effect when page loads
- Typography Clean font hierarchy for better readability
Conclusion
Creating a contact form with HTML and CSS involves structuring form elements and applying CSS for visual appeal. Hover effects, focus states, and animations enhance user experience and make the form more interactive and engaging.
895 Views
