contact.html

---
layout: default
title: Contact
contact: true
---

<main id="main" class="site-main">

    <div class="post-full inner">
        <header class="post-header">
            <h1 class="post-title">Contact</h1>
        </header>
        <form id="contact-form" action="{{ site.contact.form_action }}" method="post" class="ajax-form"
              role="form" onsubmit="return Ao.Web.contactForm.handleSend(this);">

            <input type="text" id="contact-form-name" name="name" class="form-input"
                   placeholder="Your name"
                   data-val="true" data-val-required="Your name is required" />

            <input type="text" id="contact-form-email" name="email" class="form-input"
                   placeholder="Your email address"
                   data-val="true" data-val-required="Your email is required"
                   data-val-email="That's not a valid email address" />

            <textarea id="contact-form-message" name="message" class="form-textarea"
                      placeholder="Your message"
                      data-val="true" data-val-required="A message is required"></textarea>

            <div class="g-recaptcha" data-sitekey="{{ site.contact.recaptcha_key }}" data-callback="recaptchaValid"></div>
            <input type="hidden" id="contact-form-recaptcha" name="recaptcha" 
                   data-val="true" data-val-recaptcha="Are you a robot...?" />

            <input id="contact-form-submit" type="submit" value="Send" />

            <div id="progress-cover" class="hidden"></div>

            <div id="popup" class="hidden icon-container icons-md">
            </div>

            <div id="progress" class="hidden">
                {% include icons/spinner.html %} <span>Sending...</span>
            </div>

            <div id="complete-ok" class="hidden">
                {% include icons/check.html %} <span>Sent</span> <a class="button" href="JavaScript:Ao.Web.contactForm.handleSent(true);">OK</a>
            </div>

            <div id="complete-error" class="hidden">
                {% include icons/error.html %} <span>Error!</span> <a class="button" href="JavaScript:Ao.Web.contactForm.handleSent(false);">OK</a>
            </div>
        </form>
    </div><!-- .inner-->
</main>