Contact Form #3

Centered Contact Form

Preview

Show Code

<!-- Start Contact Form 3 -->
<section id="contact-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 p-b-20 text-center">
        <h2>Contact Us</h2>
        <hr class="hr-small hr-color">
        <h4 class="m-t-40 m-b-30">Get In Touch</h4>
          <!-- Start Contact Form -->
          <form id="contactForm" class="contact-form text-center m-b-0" data-toggle="validator">
            <div class="form-group">
              <div class="controls">
                <input type="text" id="name" class="form-control" placeholder="Name" required data-error="Please enter your name">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <input type="email" class="email form-control" id="email" placeholder="Email" required data-error="Please enter your email">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <input type="text" id="msg_subject" class="form-control" placeholder="Subject" required data-error="Please enter your message subject">
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="controls">
                <textarea id="message" rows="5" placeholder="Message" class="form-control" required data-error="Write your message"></textarea>
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <button type="submit" id="submit" class="gnx-btn gnx-btn-default">Send Message</button>
            <div id="msgSubmit" class="hidden"></div>
            <div class="clearfix"></div>
          </form>
          <!-- End Contact Form -->
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!-- End Contact Form 3 -->

Important Notes: Add custom scripts to the bottom of page for a working Contact Form

<!-- Contact Form js
============================================ -->
<script src="assets/contact-form/form-validator.min.js"></script>
<script src="assets/contact-form/contact-form-script.js"></script>