{{#section "styles"}}
<link rel="stylesheet" href="/static/css/contact.css" />
{{/section}}
{{#section "scripts"}}
<script src="https://hcaptcha.com/1/api.js" async defer></script>
{{/section}}
<section>
  <h1>{{title}}</h1>
  <form action="/contact" method="POST">
    <input type="hidden" name="_csrf" value="{{csrfToken}}">
    <div class="form-group">
      <label class="required" for="name">Name</label>
      <input id="name" name="name" placeholder="Your name" required />
    </div>
    <div class="form-group">
      <label class="required" for="email">Email</label>
      <input id="email" name="email" type="email" placeholder="me@example.com" required
        pattern="[a-zA-Z0-9-_\.]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*" />
    </div>
    <div class="form-group">
      <label class="required" for="subject">Subject</label>
      <input id="subject" name="subject" placeholder="e.g. Collaboration Request, Bug Report, Feedback" required />
    </div>
    <div class="form-group message-group">
      <label class="required" for="message">Message</label>
      <textarea id="message" name="message" rows="5" placeholder="Your message here..." maxlength="2000"
        required></textarea>
    </div>
    <div class="h-captcha" data-sitekey="{{hCaptchaKey}}"></div>
    <button type="submit">Send</button>
  </form>
  <p class="required-note"><small><sup>*</sup> Required field</small></p>
</section>