Contact Us

This is an example contact form that might appear on a design agencies website. It features a form header and footer along with required fields and some notes.

Your email will not be shared with anyone.

* Required fields


<form>
  <header class="form-header">
    <h2>Contact Us</h2>
    <p>This is an example contact form that might appear on a design agencies website. It features a form header and footer along with required fields and some notes.</p>
  </header>
  <div class="form-group">
    <label for="input-username">Your Name <span class="req">*</span></label>
    <div class="row">
      <div class="col col-6">
        <input type="text" class="input" placeholder="First Name" required>
      </div>
      <div class="col col-6">
        <input type="text" class="input" placeholder="Last Name" required>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label>Email Address <span class="req">*</span></label>
    <p class="note">Your email will not be shared with anyone.</p>
    <input type="email" class="input" placeholder="example@gmail.com" required>
  </div>
  <div class="form-group">
    <label>What are you interested in? <span class="req">*</span></label>
    <select class="input" required>
      <option disabled selected>Select One...</option>
      <option>Web Design</option>
      <option>Development</option>
      <option>Content Creation</option>
      <option>Search Engine Stuff</option>
    </select>
  </div>
  <div class="form-group">
    <label>Your Message</label>
    <textarea class="input" rows="4"></textarea>
  </div>
  <footer class="form-action">
    <button class="button green">Submit Form</button>
    <div class="note input-align float-right">
      <p><em>* Required fields</em></p>
    </div>
  </footer>
</form>

form {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  background: $white;
  background-clip: padding-box;
  border: 1px solid rgba($black, 0.1);
  @include box-shadow(0 1px 6px rgba($black, 0.1));
  @include border-radius();
}
form .form-group {
  padding: 0 20px;
}
form .form-header {
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
  padding: 20px;
  text-shadow: 0 1px 1px rgba($black, 0.1);
  background: $blue;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: rgba($black, 0.1);
  @include linear-gradient(top, $blue, $blue-darker);
  @include border-radius-top();
  
  h2 {
    color: $white;
  }
  p {
    color: rgba($white, 0.75);
  }
}
form .form-action {
  padding: 20px;
  background: $blue-pale;
  border-top: 1px solid rgba($black, 0.1);
  @include border-radius-bottom();
}