Kinsey

# Contact Form

# Markup

<form 
  class="form form-contact js-ajax-form bg-light-3 p-small" 
  action="mail.php" 
  method="POST" 
  data-message-success="Thanks for your message! We will reply as soon as possible." 
  data-message-error="Something went wrong :( Please contact me directly at <a href='hello@example.com'>hello@example.com</a>"
>
  <div class="row form__row">
    <!-- input #1 -->
    <div class="col-12 col-lg-6 form__col">
      <label class="input-float js-input-float">
        <input class="input-float__input" type="text" name="visitor_name" required data-msg="Please enter your name"/>
        <span class="input-float__label">Your Name</span>
        <span class="form__error"></span>
      </label>
    </div>
    <!-- - input #1 -->
    <!-- input #2 -->
    <div class="col-12 col-lg-6 form__col">
      <label class="input-float js-input-float">
        <input class="input-float__input" type="email" name="visitor_email" 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>
    <!-- - input #2 -->
  </div>
  <!-- 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 text-center">
      <button class="button button_icon button_solid bg-dark-1">
        <span class="button__label button__label-normal">
          <span class="button__title">Send Message</span>
          <span class="button__icon button__icon_after knz-arrow-right"></span>
        </span>
        <span class="button__label button__label-hover">
          <span class="button__title">Send Message</span>
          <span class="button__icon button__icon_after knz-arrow-right"></span>
        </span>
      </button>
    </div>
  </div>
  <!-- - submit -->
</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 the Contact Form Setup article.

# Showcase

  • 📄 011-landing-page-1.html
  • 📄 012-landing-page-2.html
  • 📄 036-contacts.html

← Footer →