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 you can customize to your needs.
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 - contact-us.html
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>
<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">
<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>
<textarea name="comments" rows="5" id="comments" class="form-control" placeholder="YOUR MESSAGE" cols="10"><textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="btn btn-primary btn-block" type="submit" value="SUBMIT" />
</div>
</div>
</div>
</div>
</form>
</div>
<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 data-id="12379" data-layout="basic" data-levels="1" data-module-object-id="2" href="/">About Us</a></li>
<li class="navHighlight list-group-item"><a data-id="12379" data-layout="basic" data-levels="1" data-module-object-id="2" href="/" style="color: white;">Contact Us</a></li>
<li class="list-group-item"><a data-id="12385" data-layout="basic" data-levels="1" data-module-object-id="2" href="/">Phone Directory</a></li>
</ul>
</div>
</div>
Step 2 - contact-us.css
Download the CSS below and include it in your web page
contact-us.cssAdd the includes below to your web page
xxxxxxxxxx
<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">
<link href="contact-us.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>