How to Create Contact Form With CSS
Create a contact form for collecting user’s contact details and opinions about your website. Follow the steps and create a contact form with CSS in a simple way.
Have you ever wondered why you need a contact form on your website?
There are many reasons why a website should have a contact form. If you want to know what the visitors think about your website, articles, blogs or collect their contact details and build relationships with them, a contact form is a must!
In this snippet, we are going to show how to generate code for an HTML contact form and style it with the help of CSS.
Create HTML
- Create a
<h2>tag for the title and add a<div>element with a<span class="attribute">class</span>"container". - Create a
<form>element and add an<span class="attribute">action</span>attribute with a "/form/submit" url. - Create five
<label>elements with the following<span class="attribute">id</span>attributes: "fname", "lname", "mail", "country", and "message". - Create a drop-down list of options for "country" with the
<select>tag. - Create a
<textarea>tag to define a field, where the user can input a multi-line text. - Define fields for user input with the
<span class="attribute">text</span>attribute of the<input>tag. - Create a "Send" button with the
<span class="attribute">submit</span>attribute of the<span class="property"> XFI4 </span>tag.
How to create contact form with HTML <div>, <form>, <label>, <select>, <textarea> tags, and "text", "submit" types of <input> tag.
<h2>Contact Form</h2>
<div class="container">
<form action="/form/submit" method="POST">
<label for="fname">Name</label>
<input type="text" id="fname" name="name" placeholder="Type your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="surname" placeholder="Type your last name..">
<label for="mail">E-mail Address</label>
<input type="text" id="mail" name="e-mail" placeholder="Type your e-mail..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="italy">Italy</option>
<option value="spain">Spain</option>
<option value="france">France</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Type your message.." style="height: 200px"></textarea>
<input type="submit" value="Send">
</form>
</div>Add CSS
- Style
<select>and<textarea>by setting the width, padding, margin-top and margin-bottom properties. - Make the border a little bit rounded with the border-radius property.
- Make the
<span class="property">textarea</span>resize only vertically with the resize property. - Style the "Send" button with the background-color, color, padding, and
<span class="property">border-radius</span>properties. - Define the type of cursor.
- Set a
<span class="property">background-color</span>, which will change when you hover.
How to style HTML <select>, <textarea>, <input> tags with CSS width, padding, margin-top, margin-bottom, border, border-radius and resize properties?
input[type=text],
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #eeeeee;
border-radius: 4px;
box-sizing: border-box;
margin-top: 8px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4cd9c6;
color: #ffffff;
padding: 12px 20px;
border: none;
border-radius: 7px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #6fe8d7;
}Here’s the full code of contact form.
Example of creating a contact form:
An example of a contact form with CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #eeeeee;
border-radius: 4px;
box-sizing: border-box;
margin-top: 8px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4cd9c6;
color: #ffffff;
padding: 12px 20px;
border: none;
border-radius: 7px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #6fe8d7;
}
.container {
border-radius: 8px;
background-color: #e6e6e6;
padding: 15px;
}
</style>
</head>
<body>
<h2>Contact Form</h2>
<div class="container">
<form action="/form/submit" method="POST">
<label for="fname">Name</label>
<input type="text" id="fname" name="name" placeholder="Type your name.." />
<label for="lname">Last Name</label>
<input type="text" id="lname" name="surname" placeholder="Type your last name.." />
<label for="mail">E-mail Address</label>
<input type="text" id="mail" name="e-mail" placeholder="Type your e-mail.." />
<label for="country">Country</label>
<select id="country" name="country">
<option value="italy">Italy</option>
<option value="spain">Spain</option>
<option value="france">France</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Type your message.." style="height:200px"></textarea>
<input type="submit" value="Send" />
</form>
</div>
</body>
</html>Result
<div class="demo px-2.5 mt-1 mb-5 not-prose"> <div class="example"> <form action="/form/submit" method="POST"> <label for="fname">Name</label> <input id="fname" name="name" placeholder="Type your name.." type="text"> </input> <label for="lname">Last Name</label> <input id="lname" name="surname" placeholder="Type your last name.." type="text"> </input> <label for="mail">E-mail Address</label> <input id="mail" name="e-mail" placeholder="Type your e-mail.." type="text"> </input> <label for="country">Country</label> <select id="country" name="country"> <option value="italy">Italy</option> <option value="spain">Spain</option> <option value="france">France</option> </select> <label for="message">Message</label> <textarea id="message" name="message" placeholder="Type your message.." style="height:200px"> </textarea> <input type="submit" value="Send"> </input> </form> </div> </div> ### Example of styling a contact form:
An example of how to create contact form with HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
font-family: 'Open Sans' sans-serif;
color: #fff;
margin: 0;
}
.container {
display: block;
border: 8px solid #414178;
border-radius: 10px;
margin: 0 auto;
padding: 0 0 10px 10px;
max-width: 330px;
background-color: #ac9dd1;
}
.title {
display: inline-block;
}
.title h2 {
padding: 0 10px 0 0px;
margin: 5px 0;
color: #FBFBFB;
}
form {
padding: 10px 10px 0 0;
}
hr {
width: 100%;
display: block;
margin: 5px 0;
height: 5px;
border: 0;
background-color: #ffffff;
}
input,
textarea {
width: 100%;
border: 5px solid #FFFFFF;
border-radius: 3px;
resize: none;
padding: 0 5px;
box-sizing: border-box;
font-family: 'Open Sans' sans-serif;
font-size: 16px;
color: #000000;
}
input[type="text"],
input[type="email"] {
padding: 0 1px;
height: 40px;
width: 100%;
}
input:focus,
textarea:focus {
outline: none;
}
.form-input {
margin: 5px 0 10px 0;
}
.form-textarea {
margin: 5px 0;
width: 100%;
height: 100px;
}
input[type="submit"] {
width: 100%;
height: 50px;
background-color: #414178;
border: 0;
color: #fff;
border: 5px solid #414178;
border-radius: 8px;
margin: 10px 0 0 0;
font-family: 'Open Sans' sans-serif;
font-size: 22px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="title">
<h2>
Contact Us
<hr />
</h2>
</div>
<form class="form" action="/form/submit" method="POST">
<label for="name">Name</label>
<input class="form-input" type="text" name="name" id="name" />
<label for="email">Email</label>
<input class="form-input" type="email" name="email" id="email" />
<label>Message</label>
<textarea class="form-textarea"></textarea>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>