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

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Terms Privacy Policy Contact