Crafting an Effective Contact Us Page

Not all contact us pages are created equal. This tutorial provides instructions to design a beautiful contact us page, using Bootstrap and Font Awesome, which you can customize to your needs.

Below is the HTML, CSS, and JavaScript required.

Step 1 — Add the HTML below to your web page

<div class="subpageTitle u-bg10">
<div class="container">
<h1 class="text-uppercase">
Contact Us
</h1>
</div>
</div>
<!-- subpageBanner -->
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-push-4 col-md-7 col-md-push-5 col-lg-8 col-lg-push-4" id="mainContent">
<ul class="breadcrumb">
<li>
<a id="bchomelink" class="fileTrail" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
</li>
<li class="fileTrailCurrent active">Contact Us</li>
</ul>
<form name="contentForm" enctype="multipart/form-data" method="post" action="/contact-us/index.stml">
<!-- <h4>CONTACT FORM</h4> -->
<div class="contactForm">
<div class="row">
<div class="col-md-6">
<div class="form-group icon-1">
<label class="control-label sr-only" for="firstName">First Name</label>
<input name="firstName" id="firstName" class="form-control" placeholder="FIRST NAME" type="text" value="">
</div>
<div class="form-group icon-1">
<label class="control-label sr-only" for="c_lastname">Last Name</label>
<input name="lastname" id="c_lastname" class="form-control" placeholder="LAST NAME" type="text" value="">
</div>
<div class="form-group icon-2">
<label class="control-label sr-only" for="fromEmail">Email</label>
<input name="fromEmail" id="fromEmail" class="form-control" placeholder="EMAIL" type="text" value="">
</div>
<div class="form-group icon-3">
<label class="control-label sr-only" for="phoneNumber">Phone Number</label>
<input name="phoneNumber" id="phoneNumber" class="form-control" placeholder="PHONE" type="text" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label sr-only" for="comments">Your Message</label>
//Replace the opening and closing brackets [ below with <
[textarea name="comments" rows="5" id="comments" class="form-control" placeholder="YOUR MESSAGE" cols="10">[/textarea]
</div>
<input type="submit" value="SUBMIT" class="btn btn-primary btn-block">
</div>
</div>
<!-- / row -->
</div>
<!-- / contactForm -->
</form>
</div>
<!-- / #mainContent -->
<div class="col-sm-4 col-sm-pull-8 col-md-5 col-md-pull-7 col-lg-4 col-lg-pull-8 pageSidebar" id="leftSideNav">
<ul class="sidebar-widget list-group u-paddingTop30 text-uppercase">
<li class="list-group-item">
<a href="/" data-module-object-id="2" data-id="12379" data-layout="basic" data-levels="1">About Us</a>
</li>
<li class="navHighlight list-group-item">
<a href="/" data-module-object-id="2" data-id="12379" data-layout="basic" data-levels="1" style="color: white;">Contact Us</a>
</li>
<li class="list-group-item">
<a href="/" data-module-object-id="2" data-id="12385" data-layout="basic" data-levels="1">Phone Directory</a>
</li>
</ul>
</div>
<!-- / #leftSideNav -->
</div>
<!-- / row -->
</div>
<!-- / container -->
</div>

Step 2 — Add the CSS below to the main stylesheet of your website

.subpageTitle {
padding: 22px 0;
}
.u-bg10 {
background-color: #2361a0 !important;
}
.subpageTitle h1, .subpageTitle h2, .subpageTitle h3, .subpageTitle h4, .subpageTitle h5, .subpageTitle h6 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 400;
color: #ffffff;
margin: 0;
}
.subpageTitle h1 {
font-size: 45px;
}
#mainContent ul {
margin-top: 10px;
}
.breadcrumb {
padding: 18px 0;
margin: 0;
background: none;
border-radius: 0;
}
#mainContent ul > li {
margin-bottom: 5px;
}
.breadcrumb > li {
color: #0d5cab;
font-size: 12px;
text-transform: uppercase;
}
.breadcrumb > li a {
display: inline-block;
}
.breadcrumb > li img {
position: relative;
top: -1px;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
#mainContent ul > li {
margin-bottom: 5px;
}
.breadcrumb > li {
color: #0d5cab;
font-size: 12px;
text-transform: uppercase;
}
.contactForm input[type="submit"] {
font-family: 'Roboto', sans-serif;
padding-top: 13px;
padding-bottom: 13px;
background-color: #00aeef;
}
.contactForm input {
font-family: 'Roboto', sans-serif;
}
.contactForm textarea {
font-family: 'Roboto', sans-serif;
}
.list-group .navHighlight, .list-group .navHighlight:hover {
/* background-color: transparent; */
background-color: #cccccc;
border-color: #cccccc;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.pageSidebar ul {
margin-top: 30px;
}
.pageSidebar {
padding-right: 70px;
font-family: 'Roboto', sans-serif;
}
.list-group .list-group-item:first-child {
border-top: none;
border-radius: 0;
}
.list-group .list-group-item {
padding: 18px 0 18px 9px;
}
.list-group .list-group-item {
border-left: none;
border-right: none;
font-weight: 600;
padding: 18px 0px;
border-color: #dce0e3;
}
.sidebar-widget a {
text-decoration: none;
}
.list-group .list-group-item {
padding: 18px 0 18px 9px;
}
.list-group .navHighlight, .list-group .navHighlight:hover {
background-color: #cccccc;
border-color: #cccccc;
}
.list-group .list-group-item {
border-left: none;
border-right: none;
font-weight: 600;
padding: 18px 0px;
border-color: #dce0e3;
}
.list-group .list-group-item {
padding: 18px 0 18px 9px;
}

Step 3 — Add the includes below to your web page

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Demo on JSFiddle

Download from GitHub

Originally Posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.