Contact Form

Markup

<form
  class="form form-contact js-ajax-form bg-white"
  action="mail.php"
  method="POST"
  data-message-success="Thanks for your message! We will reply you as soon as possible."
  data-message-error='Something went wrong :( Please contact me directly at <a href="rhye@example.com">rhye@example.com</a>'
  >
  <!-- header -->
  <div class="row form__row">
    <div class="col form__col">
      <h3 class="h3 mt-0 mb-0">Send Message</h3>
    </div>
  </div>
  <!-- - header -->
  <!-- input #1 -->
  <div class="row form__row">
    <div class="col form__col">
      <label class="input-float js-input-float">
        <input class="input-float__input" type="text" name="visitor_name" required="required" data-msg="Please enter your name"/>
        <span class="input-float__label">Your Name</span>
        <span class="form__error"></span>
      </label>
    </div>
  </div>
  <!-- - input #1 -->
  <!-- input #2 -->
  <div class="row form__row">
    <div class="col form__col">
      <label class="input-float js-input-float">
        <input class="input-float__input" type="email" name="visitor_email" required="required" data-msg="Please enter a correct e-mail"/>
        <span class="input-float__label">Your E-mail</span>
        <span class="form__error"></span>
      </label>
    </div>
  </div>
  <!-- - input #2 -->
  <!-- input #3 -->
  <div class="row form__row">
    <div class="col form__col">
      <label class="input-float js-input-float">
        <textarea class="input-float__input input-float__input_textarea" name="visitor_msg"></textarea>
        <span class="input-float__label">Your Message</span>
        <span class="form__error"></span>
      </label>
    </div>
  </div>
  <!-- - input #3 -->
  <!-- submit -->
  <div class="row form__row">
    <div class="col form__col form__col_submit">
      <button class="button button_solid button_black button_fullwidth" data-hover="Send Message">
        <span class="button__label-hover">Send Message</span>
      </button>
    </div>
  </div>
  <!-- - submit -->
</form>

<form> Attributes

• js-ajax-form class – defines if the form data should be submitted via AJAX call
• data-message-success – success message for the user. Escaped HTML is acceptable.
• data-message-error – error message for the user. Escaped HTML is acceptable.

TIP

Basic PHP mailer setup is described in Contact Form Setup article.