Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Design a Contact Us Page for your Website

In Part III of our series on Contact Us Pages, we provide a clean, simple design for a responsive contact page.

In Part III of our series on Contact Us Pages, we provide a clean, simple design for a mobile responsive contact page. Simply place the design between your header and footer and you've got a brand new contact us page!

Below is the HTML, CSS, and JavaScript required.

Step 1 - contact-us.html

Add the HTML below to your web page

<div id="highlighted" class="hl-basic hidden-xs">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 col-lg-10 col-lg-offset-2">
        <h1>Contact Us</h1>
      </div>
    </div>
  </div>
</div>
<div id="content" class="interior-page">
  <div class="container-fluid">
    <div class="row">
      <!--Sidebar-->
      <div class="col-sm-3 col-md-3 col-lg-2 sidebar equal-height interior-page-nav hidden-xs">
        <div id="subMenu" class="panel panel-default">
          <ul class="panel-heading">
            <li class="subMenuHighlight panel-title">
              <a id="li_291" class="subMenuHighlight" href=""><span>Our Team</span></a>
            </li>
          </ul>
          <ul class="panel-heading">
            <li class="panel-title">
              <a class="subMenu1" href=""><span class="subMenuHighlight">Contact Us</span></a>
            </li>
          </ul>
          <ul class="panel-heading">
            <li class="panel-title">
              <a class="subMenu1" href=""><span>FAQ</span></a>
            </li>
          </ul>
        </div>
        <div>
          <a style="padding: 5% 0px;" href="" class="btn btn-primary btn-block" role="button">LEARN MORE</a> 
        </div>
      </div>
    </div>

    <!--Content-->
    <div class="col-sm-9 col-md-9 col-lg-10 content equal-height">
      <div class="content-area-right">
        <div class="content-crumb-div">
          <a href="">Home</a> | <a href="">About Us</a> | Contact Us
        </div>
        <p>Please fill out the form below and we will contact you as soon as possible.</p>
        <div class="row">
          <div class="col-md-6 forgot-form">
            <label class="label-default" for="un">First Name</label> 
            <input id="" name="" class="form-control" type="text">
          </div>
          <div class="col-md-6 forgot-form">
            <label class="label-default" for="un">Last Name</label>
            <input id="" name="" class="form-control" type="text">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 forgot-form">
            <label class="label-default" for="un">Email Address</label> 
            <input id="" name="" class="form-control" type="text">
          </div>
          <div class="col-md-6 forgot-form">
            <label class="label-default" for="un">Phone Number</label>
            <input id="" name="" class="form-control" type="text">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <label class="label-default" for="un">Comment / Question</label>
            //Uncomment the line below and add a closing textarea tag before use
            //<textarea class="form-control" type="text">
          </div>
        </div>
        <br>
        <a id="" class="btn btn-primary" role="button">Submit</a>
      </div>
    </div>
  </div> 
</div>

Step 2 - contact.css

Download the CSS below and include it in your web page

contact.css

Add the includes below to your contact page

<link rel="stylesheet" href="contact.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Download from Github

Share on Facebook Tweet It