Create a Contact Form Using HTML & CSS

This article will help you to create a contact form using HTML and CSS code for the website. As we know the contact form is a critical component of any website, allowing visitors to easily contact the site owner or team. With HTML and CSS, it's easy to create a well-designed contact form that is both functional and visually appealing.

Using HTML to structure the form and CSS to style it, you can ensure that it looks great on any device or screen size.

The form fields can be customized with various attributes, such as required fields, placeholder text, and input types. With the ability to add custom styles to the form elements, you can make your contact form match the overall design and branding of your website.

HTML Code:

<form action="#" 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="message">Message:</label>
		<textarea id="message" name="message" rows="5" required></textarea>
		<input type="submit" value="Send">
</form>

CSS Code:

<style>
form {
			max-width: 500px;
			margin: 0 auto;
			padding: 20px;
			background-color: #f7f7f7;
			border-radius: 5px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
		}
		input[type="text"], input[type="email"], textarea {
			width: 100%;
			padding: 10px;
			margin-bottom: 15px;
			border: none;
			border-radius: 3px;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		input[type="submit"] {
			background-color: #4CAF50;
			color: white;
			padding: 12px 20px;
			border: none;
			border-radius: 3px;
			cursor: pointer;
			font-family: Arial, sans-serif;
			font-size: 16px;
		}
		input[type="submit"]:hover {
			background-color: #3e8e41;
		}
</style>

This code creates a form with fields for the user to input their name, email, and message. The CSS styles the form to make it look visually appealing and easy to use. You can customize the styles as needed to fit your specific design preferences.

Conclusion:

Overall, creating a contact form with HTML and CSS is an effective way to encourage communication and engagement with your website visitors.