Posted on March 30, 2021, 8 p.m. by Bishal ( 9888)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<title>Contact Us form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
form
elements, which will help us in building the UI. In the later part of this blog, we will design the contact form.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="Name" autocomplete="off" id="Name" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Message" id="Message" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn form-btn">Send a message</button>
</div>
</div>
</form>
style.css
<head> </head>
of your HTML document:<link href="style.css" rel="stylesheet">
style.css
file:.textarea{
min-height:220px;
resize:none;
}
.form-btn{
background: red;
color:#fff;
}
.form-btn:hover{
background: tomato;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<title>Contact Us form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="Name" autocomplete="off" id="Name" placeholder="Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" autocomplete="off" id="email" placeholder="E-mail">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="Message" id="Message" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn form-btn">Send a message</button>
</div>
</div>
</form>
</body>
</html>
.textarea{
min-height:220px;
resize:none;
}
.form-btn{
background: red;
color:#fff;
}
.form-btn:hover{
background: tomato;
color:#fff;
}