🌐 How to Create a Form with HTML and Style it with CSS
Forms are essential for collecting user input on websites — like sign-ups, logins, feedback, and contact information. With HTML and CSS, you can create functional and visually appealing forms.
1. Basic HTML Form Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Contact Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="#" method="post" class="contact-form">
<h2>Contact Us</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Write your message" rows="5" required></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>
✅ Key Points:
<form>: Contains all form elements.
action and method: Define form submission.
<input>: For text, email, and other single-line entries.
<textarea>: For multi-line text input.
<button>: Submit button.
required: Ensures the field must be filled before submission.
2. Styling the Form with CSS
Create a style.css file and add the following styles:
/* General Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Form Container */
.contact-form {
background-color: #fff;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
/* Form Heading */
.contact-form h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
/* Form Labels */
.contact-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
/* Input Fields and Textarea */
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
transition: border-color 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #007BFF;
outline: none;
}
/* Submit Button */
.contact-form button {
width: 100%;
padding: 12px;
background-color: #007BFF;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.contact-form button:hover {
background-color: #0056b3;
}
3. Responsive Form Design
To make the form responsive on smaller screens:
@media (max-width: 500px) {
.contact-form {
padding: 20px;
}
.contact-form button {
font-size: 14px;
padding: 10px;
}
}
✅ Result: The form adjusts automatically to smaller screens like mobile devices.
4. Optional Enhancements
Add placeholder text for better user guidance.
Use HTML5 input types: email, tel, number, url, etc., for validation.
Add hover effects and transitions for interactive feel.
Use icons inside inputs with font-awesome for a modern look.
Final Result
A clean, modern, and responsive contact form.
Works on desktop and mobile devices.
Ready to connect to backend scripts (PHP, Node.js, or API) for submissions.
Learn Full Stack JAVA Course in Hyderabad
Read More
JavaScript ES6 Features Every Developer Should Learn
Responsive Web Design with CSS Flexbox and Grid
Top 10 HTML5 Tags You Must Know
Visit Our Quality Thought Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments