LAST UPDATED: AUGUST 5, 2021
How to create a contact form with CSS?
A form in HTML is used to take user input and contains fields for the first name, last name, mobile number, email, etc. Simply adding the HTML elements to create a contact form may be boring. We can style them with CSS so that it looks visually nice.
Creating Contact form with CSS
We can use CSS properties to style the contact form. We can set the background of the contact form using background-color. We can style each element of the contact form using different CSS properties like:
padding - For adding padding between the elements.width - For setting the specific container width.border - Adding the border around the element.box-sizing - Adding the box effect around the contact element.background-color - Adding background color to the element.margin - Adding margin around the element.cursor - Customizing the default cursor.
Example: Style the contact form with CSS
Here, we have used the above properties to style CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
input[type=text] , input[type=email], input[type=number] {
width: 100%;
padding: 12px;
border: 1px solid #cccccc;
border-radius: 2px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Adding hover */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around form*/
.container {
border-radius: 5px;
background-color: #345678;
padding: 18px;
}
</style>
</head>
<body>
<div class="container">
<h3>Contact Form</h3>
<form action="#" name="contact_form">
<label for="first_name">First Name</label>
<input name="first_name" type="text" required placeholder="Enter First name"/>
<br>
<label for="last_name">Last Name</label>
<input name="last_name" type="text" required placeholder="Enter Last name"/>
<br>
<label for="email">Email</label>
<input name="email" type="email" required placeholder="Enter email.com"/>
<br>
<label for="message">Mobile number</label><br>
<input type="number" cols="30" rows="10" placeholder="Enter Mobile number" required> </input>
<div >
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Style the contact form
We can also add textarea and select and style it using CSS.
Conclusion
We can create a visually attractive contact form using the CSS properties. It is very quick and easy to style the contact form. We have explained the creating process with examples, so you can get the idea to use the CSS in the HTML form.
