How to setup contact form

The contact form HTML markup is located in app/index.html > ‘hg-contact’ section.

 

<form class="hg-contactform" method="post" action="contactForm.php">
 <div class="row">
   <div class="col-sm-6">
    <div class="hg-form-component">
     <input class="hg-input" type="text" name="name" id="text_field" placeholder=""/>
     <label for="text_field">Name</label>
     </div>
   </div>
   <div class="col-sm-6">
    <div class="hg-form-component">
     <input class="hg-input" type="email" name="email" id="email_field" placeholder="" />
     <label for="email_field">Email</label>
    </div>
   </div>
   <div class="col-sm-12">
     <div class="hg-form-component">
      <textarea class="hg-input" name="message" id="text_area" cols="40" rows="6" placeholder=""></textarea>
      <label for="text_area">Message</label>
     </div>
    </div>
   <div class="col-sm-12">
     <div class="hg-form-component">
      <input type="hidden" name="cf_type" value="cf_1" />
      <input type="hidden" class="hg-redirect-to" value="" />
      <div class="form-message"></div>
     </div>
    </div>
   <div class="col-sm-12">
    <div class="hg-form-component"><!-- TODO FORM SUBMISSION -->
     <button class="hb_btn btn-gradient hg-submitcontact" type="submit">Send message</button>
     </div>
   </div>
 </div>
</form>

The class that triggers the js is ".hg-contactform"

The contact form php code is located in app/contactForm.php. In this file, you can change the recipient email address, recipient name, email subject.

The form is based on Bootstrap forms but to which is added custom style. This is found in app/style/scss/_pages.scss

 

input[type=text],input[type=email] {
 max-width: 100%;
 border-radius: 4px;
 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 margin-bottom: 15px;
 border: 0px;
 padding: 26px 16px 6px;
}