# Formulário de contato e captura (`formulario`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Formulário em HTML puro com rótulos visíveis, validação em português, aceite de privacidade, armadilha contra robôs e trava: não envia nada até ganhar um destino (mailto, serviço de formulário ou script PHP da hospedagem).

- **Categoria:** Venda e conversão
- **Equivalente no Elementor:** Formulário (Form)
- **Arquivos:** `formulario.html`, `formulario.css`, `formulario.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-form`, `data-ds-form-aviso`)
- **Depende de:** `botao`

## Quando usar
- Contato, orçamento, inscrição em lista, captura de e-mail

## Quando não usar
- Pagamento (use o checkout da plataforma de vendas)
- Pedir dado que não vai usar: cada campo a mais derruba a conversão

## Variações
- **Cartão com vários campos:** classe ds-form
- **Captura em linha (e-mail + botão):** classe ds-form--linha, só os campos necessários
- **Dentro de pop-up:** colocar o <form> dentro do ds-modal

## Conteúdo esperado
- Campos necessários (nome, e-mail, telefone...)
- Texto do botão
- Link da política de privacidade do projeto
- Destino configurado (action e method) e o atributo data-ds-form-sem-destino retirado

## Acessibilidade
- Todo campo tem <label> visível ligado por for/id
- autocomplete e inputmode certos (celular abre o teclado certo)
- Erro escrito em português, ligado ao campo por aria-describedby, com aria-invalid; o foco vai para o primeiro erro
- Aviso de envio com role="status"
- Campo opcional marcado no rótulo

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/formulario/formulario.css">
<script src="componentes/formulario/formulario.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cartao-padding`, `--ds-cor-acento`, `--ds-cor-borda`, `--ds-cor-destaque`, `--ds-cor-foco`, `--ds-cor-fundo`, `--ds-cor-superficie`, `--ds-cor-texto`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-espaco-1`, `--ds-espaco-2`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-espaco-6`, `--ds-fonte-texto`, `--ds-raio-cartao`, `--ds-raio-sm`, `--ds-sombra-md`, `--ds-tamanho-h3`, `--ds-tamanho-legenda`, `--ds-tamanho-pequeno`, `--ds-tamanho-texto`.

## Notas

A classe principal é ds-form. O formulário nunca envia sozinho: precisa de destino configurado por quem publica o site. Na HostGator dá para usar script PHP próprio (feito e testado à parte, com proteção contra spam) ou um serviço externo de formulário.