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.css

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">
<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>

Download from Github

Share on Facebook Tweet It