themes-coffee/templates/overrides/coffee/contact-form.ninjatpl
Alex Dunmow 023bd23d96 feat(coffee): Wave A override contract — 49 builtin overrides, 7 page templates, persona blocks, seed
WO-TF-013. Bring the coffee theme up to the frozen OVERRIDE-CONTRACT:

- 49 mandatory builtin overrides in templates/overrides/coffee/ (chrome,
  marketing, primitives, commerce/local, blog family, auth surface,
  page-suggestions), each re-skinned in cafe/roastery chrome over the builtin
  data model. Legacy button/heading/image/text field reads updated to the new
  builtin contract (link/label/style, media/text).
- Signature moves: chalkboard menu panel (menu-list), hand-drawn doodle
  dividers, torn-paper edges, kraft-tag stamped buttons, circular roast stamps,
  hours "today" highlight. Semantic tokens only; CSS-first motion with
  prefers-reduced-motion fallbacks.
- 7 page templates: default, landing, article, full-width, blog-index, contact,
  auth.
- Blocks rework: deleted the five builtin-duplicating theme blocks (menu_board,
  hours_strip, location_card, footer, doodle_divider) — now overrides. Kept/added
  4 persona blocks: featured_pour, roast_profile, loyalty_card, brew_guide.
- 5 dual-mode presets (mode "both"), all 19 tokens, light and dark tuned.
- Bundled Fraunces / Work Sans / Caveat woff2 (OFL, latin subset, license
  recorded); fonts.json populated; all font-family via var(--font-*). Updated
  RECOMMENDED_FONTS.md, added RECOMMENDED_ICONS.md; required_icon_packs declared.
- Themed email-safe wrapper retained (tables, inline styles).
- Master pages rebuilt on builtin keys. Demo seed (demo:true): home, about,
  blog + 3 posts, contact (form + contact_submissions data table + row_inserted
  email-admins workflow), login. Cafe voice.

make (codeless build + verify) and check-safety both exit 0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 10:57:54 +08:00

40 lines
3.5 KiB
Plaintext

{% with bid=_block_id|default:context.blockId %}
<section id="contact-form-{{ bid }}" class="py-16 md:py-24 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
<div class="mx-auto max-w-2xl px-4">
{% if form.submitted %}
<div class="coffee-card coffee-torn-top coffee-torn-bottom p-8 text-center">
<div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-accent/15 text-accent"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg></div>
<p class="coffee-display text-xl text-primary">{{ form.message|default:successMessage|default:"Thanks. Your message is on its way." }}</p>
</div>
{% else %}
{% if heading %}<h2 class="coffee-display text-3xl text-primary md:text-4xl"><span class="coffee-doodle-underline">{{ heading }}</span></h2>{% endif %}
{% if description %}<p class="coffee-body mt-3 text-lg text-muted-foreground">{{ description }}</p>{% endif %}
{% if form.errors._form %}<div class="coffee-body mt-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ form.errors._form }}</div>{% endif %}
{% with formAction="/api/blocks/"|add:bid|add:"/submit" formTarget="#contact-form-"|add:bid %}
{% form action=formAction hx_target=formTarget hx_swap="outerHTML" class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2" %}
{% for field in fields %}
<div class="{% if field.width == "half" %}sm:col-span-1{% else %}sm:col-span-2{% endif %}">
{% if field.label %}<label for="cf-{{ bid }}-{{ field.name }}" class="coffee-hand mb-1.5 block text-lg text-accent">{{ field.label }}{% if field.required %} <span class="text-destructive">*</span>{% endif %}</label>{% endif %}
{% if field.type == "textarea" %}
<textarea id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" rows="5"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="coffee-body w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"></textarea>
{% elif field.type == "select" %}
<select id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}"{% if field.required %} required{% endif %} class="coffee-body w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
{% if field.placeholder %}<option value="">{{ field.placeholder }}</option>{% endif %}
{% for opt in field.options %}<option value="{{ opt.value }}">{{ opt.label|default:opt.value }}</option>{% endfor %}
</select>
{% else %}
<input id="cf-{{ bid }}-{{ field.name }}" name="{{ field.name }}" type="{{ field.type|default:"text" }}"{% if field.required %} required{% endif %}{% if field.placeholder %} placeholder="{{ field.placeholder }}"{% endif %} class="coffee-body w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring">
{% endif %}
</div>
{% endfor %}
<div class="hidden" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
<div class="sm:col-span-2">
<button type="submit" class="kraft-tag">{{ submitLabel|default:"Send message" }}</button>
</div>
{% endform %}
{% endwith %}
{% endif %}
</div>
</section>
{% endwith %}