Responsive Contact Us Page Design | HTML & CSS |

Irfan Hussain
June 08, 2020
Create a simple contact form in HTML and CSS by following our HTML contact form code tutorial. However, if you want to build your contact-us page on your website.

Responsive Contact Us Page Design | HTML & CSS |

Code
HTML:-

<html>
<head>
<meta charset="utf-8">
<title>Contact US</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 </head>

 <body>

<div class="row">
<a name="contact" style="padding-top: 40px; "> &nbsp; </a>
<div style="padding-top: 100px;">
<section class="contact-area" id="contact">
<div class="container">

 <h3 class="contact-head-contact" style="padding-top: 45px; ">CONTACT</h3>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 divider" style="margin-top: 20px;">

 <!--sub-heading for contact-->

 <div>
<div class="contact-address">

 <h5 class="head-title">Address</h5>
<p>16th Main, 6th Cross, Btm Layout 2nd Stage, Bangalore - 560076</p>
</div>
<div class="contact-phone">
<h5 class="head-title">Phone:</h5>(91)883XX37623 (91)883XX37623
</div>
<div class="contact-email">
<h5 class="head-title">Email:</h5>abcxyz@gmail.com<br>
abcxyz@gmail.com

 </div>

 <div class="contact-address-icon">
<a href="#"><i class="fa fa-instagram contact-fa-instagram"></i></a>
<a href="#"><i class="fa fa-facebook contact-fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter contact-fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin contact-fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube contact-fa-youtube"></i></a>

 </div>
</div>

</div>
<!--start working code for message drop-->
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4" style="margin-top: 20px;">
<div class="contact-block">
<h3 style="text-align: center">DROP A MESSAGE</h3>
<form method="post" action="send_message.php" class="contact-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your name" name="name" required="required">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="contact@gmail.com" name="email" required="required">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="your phone number" name="phone" required="required">
</div>
</form>
</div>
</div>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4">
<!--input box code writting here-->
<form class="contact-form" method="post" action="send_message.php" style="margin-top: 55px; margin-left: 23px">
<div class="from-group">
<textarea class="form-control" required="required" name="message"></textarea>
</div>
<div class="from-group">
<input type="Submit" class="btn default-btn btn-block" value="Submit" style="margin-top: 10px;">
<!--submit-btn code wirtting here-->
</div>
</form>
</div>

 </div>

 </section>
</div>

 </div>

 </body>
</html>


CSS:-

<style>
body{
background-image: url('back.gif');
    background-size: cover;
}
.contact-address {
font-size: 14px;
padding-top: 4%;
color: white;
justify-content: center;
letter-spacing: 1px;
}

 .contact-phone {
padding-top: 2%;
color: white;
font-size: 14px;
}

 .contact-email {
font-size: 14px;
color: white;
padding-top: 1%;
}

.head-title{
color: #fff000;
}

 .contact-head-contact {
text-align: center;
font-family: sans-serif;
color: cyan;
margin-top: 40px;
}

 .contact-address-icon {
padding: 20px;
margin-top: 20px;
font-size: 20px;
}

 .contact-fa-instagram {
padding-right: 20px;
size: 90px;
}

 .contact-fa-facebook {
padding-right: 10px;
color: 3b5998;
}

 .contact-fa-twitter {
padding-right: 10px;
color: #1DA1F2;
}

 .contact-fa-linkedin {
padding-right: 10px;
color: #0e76a8;
}

 .contact-fa-youtube {
padding-right: 10px;
color: #c4302b;
}

 .contact-block
{
padding-left: 25px;
color: #fff000;

 }

 .contact-area .form-control,
.contact-area textarea
{
font-family: 'Roboto', sans-serif;
background: #f8fdff;
border: 1px solid #a5d3eb;
padding: 10px 20px;
color: #bdbdbd;
height: 45px;
font-weight: 400;
border-radius: 0;
}

 .contact-area .form-group {
margin-bottom: 24px;
}

 .contact-area textarea

 /*msg box size*/
{
min-height: 115px;
}
.contact-area .default-btn

 /*submit btn working here*/
{
padding: 10px;
border-radius: 10px;
}

 .contact-area .default-btn:hover {
background: cyan;
color: red;
transition: all .5s;
font-size: 20px;
font-weight: bold;
}
</style>