chicken_babies_site/app/templates/public/contact.html

{#
  Contact page — live Phase 5 form.

  POSTs to /contact. Honeypot + hCaptcha + SlowAPI rate-limit protect
  the endpoint. Every field carries an id/label pair for a11y and a
  maxlength/minlength to match the server-side validator — the HTML5
  attributes are a UX hint only, not the security boundary.

  Honeypot:
  - The ``website`` field is wrapped in a .visually-hidden container
    marked ``aria-hidden="true"`` so assistive tech hides it too.
  - It is NOT ``required`` and has ``tabindex="-1"`` so a keyboard
    user can't accidentally focus it.
  - The server rejects any submission where the field is non-empty.

  hCaptcha:
  - When ``hcaptcha_site_key`` is truthy the widget div + script tag
    render. When empty (dev) we skip them and rely on the dev-mode
    fallback in :class:`HCaptchaService`.

  Context:
    - contact_email   : str | None  (from settings.admin_contact_email)
    - active_nav      : "contact"
    - errors          : dict[str, str]  (field_name -> message)
    - form            : dict[str, str]  (prior submitted values)
    - form_error      : str | None       (top-level error banner)
    - hcaptcha_site_key : str | None     (rendered when truthy)
#}
{% extends "public/base.html" %}

{% block title %}Contact — Chicken Babies R Us{% endblock %}
{% block meta_description %}Get in touch with Chicken Babies R Us.{% endblock %}

{% block content %}
  <article class="page-article">
    <header class="page-article__header">
      <h1 class="page-article__title">Get in touch</h1>
    </header>

    <p>
      We'd love to hear from you &mdash; questions about the birds,
      availability, or just to say hi.
    </p>

    {% if contact_email %}
      <p class="contact-mailto">
        Prefer email? Reach us at
        <a href="mailto:{{ contact_email }}">{{ contact_email }}</a>.
      </p>
    {% endif %}

    {% if form_error %}
      <p class="contact-form__error" role="alert">{{ form_error }}</p>
    {% endif %}

    <form class="contact-form"
          method="POST"
          action="/contact"
          aria-describedby="contact-form-note">
      {# Honeypot — visually hidden + aria-hidden so neither sighted
         users nor screen readers encounter it. Bots fill it in and
         get silently filed as spam. #}
      <div class="visually-hidden" aria-hidden="true">
        <label for="contact-website">Website</label>
        <input type="text"
               id="contact-website"
               name="website"
               tabindex="-1"
               autocomplete="off"
               class="contact-hp"
               value="">
      </div>

      <div class="contact-form__field">
        <label for="contact-name">Name</label>
        <input type="text"
               id="contact-name"
               name="name"
               autocomplete="name"
               required
               maxlength="80"
               value="{{ (form.name if form else '') or '' }}">
        {% if errors and errors.name %}
          <p class="contact-form__field-error" role="alert">{{ errors.name }}</p>
        {% endif %}
      </div>

      <div class="contact-form__field">
        <label for="contact-email">Email</label>
        <input type="email"
               id="contact-email"
               name="email"
               autocomplete="email"
               required
               maxlength="254"
               value="{{ (form.email if form else '') or '' }}">
        {% if errors and errors.email %}
          <p class="contact-form__field-error" role="alert">{{ errors.email }}</p>
        {% endif %}
      </div>

      <div class="contact-form__field">
        <label for="contact-message">Message</label>
        <textarea id="contact-message"
                  name="message"
                  rows="6"
                  required
                  minlength="10"
                  maxlength="4000">{{ (form.message if form else '') or '' }}</textarea>
        {% if errors and errors.message %}
          <p class="contact-form__field-error" role="alert">{{ errors.message }}</p>
        {% endif %}
      </div>

      {% if hcaptcha_site_key %}
        <div class="contact-form__captcha">
          <div class="h-captcha" data-sitekey="{{ hcaptcha_site_key }}"></div>
        </div>
      {% else %}
        {# hCaptcha disabled in dev — HCaptchaService returns True. #}
      {% endif %}

      <div class="contact-form__actions">
        <button type="submit" class="btn btn--primary">
          Send message
        </button>
      </div>
    </form>
  </article>

  {% if hcaptcha_site_key %}
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  {% endif %}
{% endblock %}