As a website owner, providing a way for your users to contact you is crucial.
It allows them to send their inquiries, feedback, or even compliments.
A contact form is the most commonly used method for this purpose.
In this tutorial, we will show you how to create a contact form with CSS.
What are Contact Forms
Contact forms are an essential part of any website, and they serve as a bridge between the website owner and the users.
They allow users to send messages to the website owner, and they provide a way for the website owner to collect information from their users.
A well-designed contact form can help build trust and improve the user experience on your website.
HTML Structure
The first step in creating a contact form is to define its structure using HTML. Below is the HTML code for a basic contact form:
<form action=""> <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" required></textarea> <input type="submit" value="Submit"> </form>
In the code above, we have a form element with an action attribute set to an empty string.
This means that the form will be submitted to the same page, and the data will be processed using JavaScript.
We also have three input elements and one textarea element. The first two input elements are for the name and email of the user, and they are both required fields.
The textarea element is for the message, and it is also a required field.
Styling the Form with CSS
Now that we have the HTML structure for our contact form, we can style it using CSS. The CSS code below will give our form a simple and clean look:
form {
width: 500px;
margin: 0 auto;
text-align: left;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
label,
input,
textarea {
width: 100%%;
padding: 12px;
margin-top: 8px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="text"],
input[type="email"] {
height: 40px;
}
textarea {
height: 150px;
}
input[type="submit"] {
width: 100%%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin-top: 8px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
In the CSS code above, we have defined styles for the form, label, input, and textarea elements.
We have set the width of the form to 500px and aligned it in the center of the page using margin: 0 auto. The form also has a padding of 20px and a background color of #f2f2f2.
For the label, input, and textarea elements, we have set their width to 100% and added padding and margins for spacing.
We have also given them a border and border radius for a cleaner look.
For the input elements with type “text” and “email”, we have set their height to 40px.
For the textarea element, we have set its height to 150px to allow enough space for a longer message.
Finally, we have added styles for the submit button. The submit button has a width of 100% and a background color of #4CAF50.
It also has a white text color, padding, and a border radius. On hover, its background color changes to #3e8e41.
Conclusion
In this blog post, we have shown you how to create a contact form using HTML and CSS.
We have covered the basic HTML structure and the CSS styles to give it a clean and simple look.
With these steps, you can easily add a contact form to your website and make it easier for your users to reach you.
Remember to always validate the user input before processing it to avoid security risks.
You can use JavaScript or a server-side language like PHP to handle the form submission and send the email.
With a well-designed contact form, you can improve the user experience on your website and build trust with your users.
