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

Responsive Contact Us Design

In Part II of our series on Contact Us Page Designs, we provide a mobile responsive contact us form for your website...

In Part II of our series on Contact Us Page Designs, we provide a mobile responsive contact us form for your website. 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 to add this form to your website.

Step 1 - Add the HTML below in between the header and footer of your website

<div class="container">
  <div class="contact-section">
    <h2 class="ct-section-head">CONTACT US</h2>
    <div class="row contact-fields">
      <div class="col-md-8 left-form">
       <form method="post" action="">
        <div class="form-group">
          <label class="sr-only" for="fname">First Name *</label>
          <input class="required form-control" id="fname" name="fname" placeholder="First Name&nbsp;*" type="text"  required>
        </div>
        <div class="form-group">
          <label class="sr-only" for="lname">Last Name *</label>
          <input class="required form-control" id="lname" name="lname" placeholder="Last Name&nbsp;*" type="text"  required>
        </div>
        <div class="form-group">
          <label class="sr-only" for="contactEmail">Email *</label>
          <input class="required form-control h5-email" id="contactEmail" name="contactEmail" placeholder="Email&nbsp;*" type="text"  required>
        </div>
        <div class="form-group">
          <label class="sr-only" for="contactPhone">Phone *</label>
          <input class="required form-control h5-phone" id="contactPhone" name="contactPhone" placeholder="Phone&nbsp;*" type="text"  required>
        </div>
        <div class="form-group">
          <label class="sr-only" for="comment">Type your message here</label>
          <textarea class="required form-control" id="comment" name="comment" placeholder="Type your message here&nbsp;*" rows="6" required><textarea>
        </div>
        <button class="btn btn-accent" type="submit">Submit</button>  
      </form>
    </div>
    <div class="col-md-4 contact-info">
      <div class="phone">
        <h2>Call</h2>
        <a href="tel:+5555555555">555.555.5555</a>
      </div>
      <div class="email">
        <h2>Email</h2>
        <a href="mailto:info@webcorpco.com">info@webcorpco.com</a>
      </div>
      <div class="location">
        <h2>Visit</h2>
        <p>One Town Center </br>
        123 Easy Street </br>
        Suite 1000 </br>
        Orlando, FL 32803
        <br>
        <a class="btn btn-accent" href="" target="_blank"><img src="https://www.solodev.com/assets/contact-us-page/map-marker.png" alt="Map Marker">Google Maps</a></p>
      </div>
    </div>
  </div>
</div>

Step 2 - Add the CSS below to your website's main stylesheet

.contact-section .form-control{
  border: 1px solid  #2fbfbc;
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  color: #101f1d;
  font-size: 35px;
  letter-spacing: 1.25px;
  margin-top: 0;
}
.contact-fields {
  padding: 40px 0 0;
}
.phone {
  padding-top: 50px;
}
.phone,
.email,
.working-hours {
  margin-bottom:30px;
}
.phone a,
.email a,
.location a {
  color: #fd4f00;
  font-size:18px;
}
.contact-h2 {
  color: #fd4f00;
  padding-top:20px;
}
.contact-fields .form-group {
  margin-bottom: 35px;
}
.contact-info {
  margin-top: -40px;
}
.contact-fields .form-group input,
.contact-fields .form-group textarea {
  font-size: 16px;
}
.location a.btn.btn-accent {
  padding: 12px 26px 10px;
  margin-top: 30px;
  font-size: 16px;
}
.location a.btn.btn-accent img {
  margin-right: 20px;
}
.location hr {
  margin-bottom: 10px;
}
.btn {
  font-size: 15px;
  padding: 22px 46px 18px;
  line-height: 1;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  position: relative;
  letter-spacing: 0.3px;
}
.btn.btn-accent {
  background: #2fbfbc;
  color: white;
}
.btn.btn-accent:hover {
  background: #269694;
}
.ct-newsletter-section .container {
  width: 100%;
  max-width: 1360px;
}
.ct-section-head,
.ct-section-header {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  color: #101f1d;
  font-size: 35px;
  text-transform: uppercase;
  padding-top: 45px;
  letter-spacing: 1.25px;
  margin-bottom: 5px;
}
.ct-section-header {
  text-align: center;
}
.ct-newsletter-inline {
  display: table;
  width: 100%;
  color: white;
  margin: 69px 0 138px;
  text-align: center;
}
.ct-newsletter-inline__facebook {
  background-color: #3b5997;
}
.ct-newsletter-inline__facebook, .ct-newsletter-inline__twitter {
  width: 16%;
}
a {
  -webkit-transition: all 250ms cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 250ms cubic-bezier(0.55, 0, 0.1, 1);
}
.ct-newsletter-inline__facebook i, .ct-newsletter-inline__twitter i {
  font-size: 109px;
  padding-top: 25px;
}
.ct-newsletter-inline__facebook span, 
.ct-newsletter-inline__twitter span {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 4px;
  display: block;
  padding-top: 15px;
}
.ct-newsletter-inline__twitter {
  background-color: #2fc2ee;
}
.ct-newsletter-inline__facebook, 
.ct-newsletter-inline__twitter {
  width: 16%;
  padding-top: 25px;
}
.ct-newsletter-inline__form {
  background-color: #fd4f00;
  padding: 24px;
}
.ct-newsletter-inline__form .ct-newsletter {
  text-align: left;
  width: 100%;
  max-width: 668px;
  margin: 0px auto;
}
.ct-newsletter-inline__form .form-inline {
  display: table;
  width: 100%;
  height: 65px;
}
.ct-newsletter-inline__form .form-inline input {
  width: 50%;
  width: calc(100% - 137px);
  padding: 0 40px;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #111f1d;
  text-transform: uppercase;
}
.ct-newsletter-inline__form .form-inline input, 
.ct-newsletter-inline__form .form-inline .btn {
  display: table-cell;
  vertical-align: middle;
  height: 65px;
  border: none;
  margin: 0;
}
.ct-newsletter-inline__form .form-inline .btn {
  width: 137px;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  padding-left: 0;
  padding-right: 3px;
  text-align: center;
}
.ct-newsletter-inline__form .form-inline input, .ct-newsletter-inline__form .form-inline .btn {
  display: table-cell;
  vertical-align: middle;
  height: 65px;
  border: none;
  margin: 0;
}
.btn.btn-dark {
  background: #111f1d;
  color: white;
}
.btn {
  font-size: 15px;
  padding: 22px 46px 18px;
  line-height: 1;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  position: relative;
  letter-spacing: 0.3px;
}
@media screen and (min-width: 980px) {
  .contact-info {
    padding-left: 110px;
  }
}

Step 3 - Add the includes below to your new Contact Us Page

<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

Matthieu McClintock
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