Formulários
Input padrão
<div class="flex flex-col gap-1"> <label for="campo" class="text-[rgba(0,0,0,0.45)] dark:text-[rgba(255,255,255,0.45)] text-sm"> Label do campo </label> <input type="text" id="campo" placeholder="Placeholder" class="bg-[#f3f3f3] dark:bg-background-elevated border border-black/6 dark:border-border-subtle rounded-lg px-4 py-3 text-[#0a0a0a] dark:text-white placeholder:text-[rgba(0,0,0,0.25)] dark:placeholder:text-text-disabled focus:outline-none focus:border-brand-600 dark:focus:border-brand-500 transition-colors text-sm" /></div>Estados do input
| Estado | Dark | Light |
|---|---|---|
| Default | border-white/8 | border-black/6 |
| Hover | border-white/15 | border-black/10 |
| Focus | border-brand-500 | border-brand-600 |
| Error | border-error | border-error |
| Disabled | opacity-40 cursor-not-allowed | opacity-40 cursor-not-allowed |
Checkbox / Radio
<label class="flex items-center gap-3 cursor-pointer"> <input type="checkbox" class="w-4 h-4 rounded cursor-pointer accent-brand-600 dark:accent-brand-500" /> <span class="text-[rgba(0,0,0,0.65)] dark:text-[rgba(255,255,255,0.65)] text-sm"> Aceito os termos de uso </span></label>Formulário completo — exemplo
Fale com um especialista
Veja como a Retents funciona na sua academia.
Seu nome
Academia exemplo
Quero ver uma demo
Sem compromisso. Respondemos em até 1 dia útil.
Layout de formulário
- Empilhe campos verticalmente — nunca 2 campos lado a lado no mobile
- Botão de submit: sempre na última linha, largura total (
w-full) em mobile - Mensagem de privacidade abaixo do botão:
text-text-disabled text-xs text-center - Máximo de 5 campos visíveis — para mais, use steps ou seções colapsáveis
Formulários de lead gate (materiais)
Os formulários de materiais ricos enviam dados via evento GTM (lead_form_submit) com os campos lead_email, lead_nome, lead_empresa, material_title e hubspot_form_id. A integração com HubSpot/RD Station é feita via tag no GTM, sem código adicional no app.