How to make a simple html contact form design
Simple Html contact form design using bootstrap
Html code here
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="project description here">
<link
rel="shortcut icon"
type="image/x-icon"
href="assets/img/favicon/favicon.ico">
<title>Title
here</title>
<link
rel="stylesheet"
href="assets/css/bootstrap.min.css">
<link
rel="stylesheet"
href="assets/css/default.css">
<link
rel="stylesheet"
href="assets/css/style.css">
</head>
<body>
<section
class="contact-form-area">
<div
class="container">
<div
class="row justify-content-center">
<div
class="col-lg-6">
<div
class="contact-form">
<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<form
action="#">
<div
class="single-form-group">
<label
for="name">Name</label>
<input
type="name">
</div>
<div
class="single-form-group">
<label
for="email">E-mail</label>
<input
type="email"
required>
</div>
<div
class="single-form-group">
<label
for="message">Message</label>
<textarea
name=""
id=""
cols="30"
rows="10"></textarea>
</div>
<div
class="single-form-group">
<input
type="submit"
value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<script
src="assets/js/bootstrap.min.js"></script>
</body>
</html>
Css code here
body {
background-color:
#e6e3e3;
}
.contact-form {
background-color:
#e4e4e4;
border:
1px
solid
#fff;
padding:
30px
40px;
}
section.contact-form-area {
padding-top:
100px;
}
.contact-form
h3 {
font-size:
26px;
font-weight:
700;
color:
#000;
}
.contact-form
p {
font-size:
16px;
color:
#000;
}
.single-form-group
label {
display:
block;
margin-bottom:
10px;
font-size:
14px;
color:
#000;
}
.single-form-group
input {
width:
100%;
border:
1px
solid
#000;
padding:
10px
20px;
margin-bottom:
20px;
color:
#000;
}
.single-form-group
input[type="submit"] {
width:
auto;
padding:
12px
50px;
font-weight:
700;
border-radius:
5px;
background-color:
#9e9e9e;
margin:
0;
}
.single-form-group
textarea {
width:
100%;
border:
1px
solid
#000;
margin-bottom:
15px;
}
No comments