<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact Us</h2>
                <hr class="hr-alt-background-light">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <p>We would love to hear from you. We are always looking for ways to better serve
                    our customers. Please let us know what we can do to help grow your
                    business.</p>
                <form name="contactForm" ng-controller="ContactController" novalidate>
                    <div class="row">
                        <div class="form-group col-lg-4"
                             ng-class="{'has-error': contactForm.contact_name.$invalid && !contactForm.contact_name.$pristine}">
                            <label>Name</label>
                            <input type="text" name="contact_name" class="form-control"
                                   ng-model="contact.name" required>

                            <p ng-show="userForm.contact_name.$invalid && !userForm.contact_name.$pristine"
                               class="help-block">
                                Please enter a valid Contact Name.
                            </p>
                        </div>
                        <div class="form-group col-lg-4"
                             ng-class="{'has-error': contactForm.contact_email.$invalid && !contactForm.contact_email.$pristine}">
                            <label>Email</label>
                            <input type="email" name="contact_email" class="form-control"
                                   ng-model="contact.email" required>

                            <p ng-show="userForm.contact_email.$invalid && !userForm.contact_email.$pristine"
                               class="help-block">
                                Please enter a valid Contact Email.
                            </p>
                        </div>
                        <div class="form-group col-lg-4"
                             ng-class="{'has-error': contactForm.contact_phone.$invalid && !contactForm.contact_phone.$pristine}">
                            <label>Telephone</label>
                            <input type="phone" name="contact_phone" class="form-control"
                                   ng-model="contact.phone" required>

                            <p ng-show="userForm.contact_phone.$invalid && !userForm.contact_phone.$pristine"
                               class="help-block">
                                Please enter a valid Phone Number.
                            </p>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group col-lg-12"
                             ng-class="{'has-error': contactForm.contact_message.$invalid && !contactForm.contact_message.$pristine}">
                            <label>Message</label>
                            <textarea name="contact_message" class="form-control" rows="6"
                                      ng-model="contact.message" required></textarea>

                            <p ng-show="userForm.contact_message.$invalid && !userForm.contact_message.$pristine"
                               class="help-block">
                                Please enter a valid message.
                            </p>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10">
                                <button ng-click="sendContact(contact)" class="btn btn-primary" ng-disabled="contactForm.$invalid">Send
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>