Centered Contact Form | Background Color
<!-- Start Contact Form 5 -->
<section id="contact-us" class="bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 text-white 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 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 text-white"></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 text-white"></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 text-white"></div>
</div>
</div>
<div class="form-group">
<div class="controls">
<textarea id="message" rows="7" placeholder="Message" class="form-control" required data-error="Write your message"></textarea>
<div class="help-block with-errors text-white"></div>
</div>
</div>
<button type="submit" id="submit" class="gnx-btn btn-border-blue">Send Message</button>
<div id="msgSubmit" class="hidden" style="margin-top: 20px; color: #ffffff; text-align: center;"></div>
<div class="clearfix"></div>
</form>
<!-- End Contact Form -->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<!-- End Contact Form 5 -->
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>