Blocks

Contact Form

Formulário de contato com nome, email, assunto, mensagem e checkbox de consentimento.

Form de contato — 2 col layout (nome + email), assunto, textarea, consent.

<form class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-8">
<header class="flex flex-col gap-1">
  <h2 class="text-2xl font-bold tracking-tight text-foreground">Fale com a gente</h2>
  <p class="text-sm text-muted-foreground">Resposta em até 1 dia útil.</p>
</header>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
  <label class="itps-field">
    <span class="itps-field__label">Nome</span>
    <input type="text" class="itps-input" required />
  </label>
  <label class="itps-field">
    <span class="itps-field__label">E-mail</span>
    <input type="email" class="itps-input" required />
  </label>
</div>
<label class="itps-field">
  <span class="itps-field__label">Assunto</span>
  <input type="text" class="itps-input" />
</label>
<label class="itps-field">
  <span class="itps-field__label">Mensagem</span>
  <textarea class="itps-input min-h-32 resize-y" rows="5" required></textarea>
</label>
<label class="flex items-start gap-2 text-sm text-muted-foreground">
  <input type="checkbox" required />
  <span>Concordo com a <a href="/termo-de-uso" class="text-brand hover:underline">política de privacidade</a>.</span>
</label>
<button type="submit" class="itps-btn itps-btn--primary self-start">Enviar mensagem</button>
</form>

<form class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-8">…</form>