HTML Contact Form Template
Create a Contact Form using HTML and CSS:
Many website use HTML Form to get input from the users. In HTML Language, we can create different kind of forms using various input fields. Most commonly used form elements are Text, Password, Number, Radio, Checkboxes, Textarea, Dropdown, Calendar (Date), URL, Upload file, Submit, Reset, and many more.
In this HTML Contact Form template, we have included all these fields. This HTML Form Layout is only made using Div tag along with internal CSS. We have used the minimum code for better understanding and there is no use of table tag.
HTML Contact Form Template/Code:
<!DOCTYPE html>
<html>
<head>
<style>
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-header {
font-size: 18px;
border-bottom: 1px solid #f4f4f4;
padding: 10px 0;
}
body {
font-family: arial, verdana;
font-size: 15px;
}
.wrapper {
padding: 0 25px;
width: 710px;
border: 1px solid #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
border-top: 3px solid #3c8dbc;
}
form {
margin: 30px 0;
}
.form-label {
float: left;
width: 150px;
}
.form-row {
margin: 12px 0;
}
.form-field {}
input,
textarea,
select {
width: 500px;
height: 28px;
border: 1px solid #d2d6de;
padding: 2px 8px;
}
textarea {
height: 50px;
}
input[type=radio],
input[type=checkbox] {
width: 20px;
color: red;
height: 14px;
}
input[type=submit],
input[type=reset] {
width: 100px;
margin-right: 50px;
background-color: #3c8dbc;
border-color: #367fa9;
color: #ffffff;
cursor: pointer;
}
input[type=submit]:hover,
input[type=reset]:hover {
background-color: #367fa9;
}
.form-field:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="form-header">Simple HTML Contact Form</div>
<form action="" method="">
<div class="form-row">
<div class="form-label">Name</div>
<div class="form-field">
<input type="text" name="name" />
</div>
</div>
<div class="form-row">
<div class="form-label">Password</div>
<div class="form-field">
<input type="password" name="password">
</div>
</div>
<div class="form-row">
<div class="form-label">Phone</div>
<div class="form-field">
<input type="number" name="phone" placeholder="Please enter a number only" /> </div>
</div>
<div class="form-row">
<div class="form-label">Gender</div>
<div class="form-field">
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female</div>
</div>
<div class="form-row">
<div class="form-label">Preference:</div>
<div class="form-field">
<input type="checkbox" name="">Morning
<input type="checkbox" name="">Evening</div>
</div>
<div class="form-row">
<div class="form-label">Message</div>
<div class="form-field">
<textarea name="message" rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-label">Service</div>
<div class="form-field">
<select name="service">
<option value="one">Service 1</option>
<option value="two">Service 2</option>
<option value="three">Service 3</option>
<option value="four">Service 4</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-label">Date of Birth</div>
<div class="form-field">
<input type="date" name="date" />
</div>
</div>
<div class="form-row">
<div class="form-label">Website</div>
<div class="form-field">
<input type="url" name="website" />
</div>
</div>
<div class="form-row">
<div class="form-label">Upload file</div>
<div class="form-field">
<input type="file" name="file"> </div>
</div>
<div class="form-row">
<div class="form-label"> </div>
<div class="form-field">
<input type="reset" name="reset" />
<input type="submit" name="message" value="Submit" />
</div>
</div>
</form>
</div>
</body>
</html>Download HTML Contact Form Code:
You can download HTML contact form code using HTML/CSS with Div tag (without Table) tag.
Learn more about the similar topics:
| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |