Pular para o conteúdo
Faculdade PhorteDesign System

ContactForm

Em andamento

O formulário-padrão de contato, sobre as primitivas (E73): nome, e-mail, telefone, assunto (opcional), mensagem e o aceite de privacidade e contato (E154), em FormField, com o resumo de erros no topo quando o envio falha e a tela de sucesso em role="status".

Função
Formulário e ação
Também chamado de
fale conosco, formulário de contato, contato
Mora em
app/components/organisms/marketing/ContactForm.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com os links do aceite

Quando usar

Em página que precisa de um canal de contato genérico — e como o modelo de formulário que as equipes clonam.

Faça

  • Passe onEnviar: ele recebe { nome, email, telefone, assunto, mensagem, aceite } — o telefone só em dígitos, com o DDD — e, no segundo argumento, os sinais de spam (E153). Sem ele, o formulário simula o envio (1,5s) — é a vitrine do padrão.
  • Leia os sinais no serviço que recebe (E153): com campoIscaPreenchido, descarte; com rapidoDemais (menos de tempoMinimo, 3s por padrão), marque para revisão em vez de descartar.
  • Escreva cada erro dizendo como acertar: "Informe um e-mail com @ e domínio".
  • Marque o que não é obrigatório com "(opcional)", como o Assunto.
  • Passe hrefDaPolitica e hrefDosTermos: o aceite cita os dois, e os links abrem em nova aba — quem está no meio do formulário não perde o que escreveu.

Evite

  • Voltar para a validação do navegador: ela fala a língua do sistema e não liga o erro ao campo.
  • Avisar na tela que o envio parece spam: o robô aprende o que foi pego. O formulário segue o fluxo de sempre; quem decide é o serviço.
  • Deixar o aceite marcado de saída, ou juntar nele uma autorização que não seja para responder a mensagem (LGPD: o consentimento é da pessoa, e por finalidade).
  • Máscara no telefone: ela briga com quem cola o número e com o leitor de tela. O formulário aceita como a pessoa escreve e limpa no envio.

Quando não usar. Para só captar e-mail, a Newsletter ou a NewsletterStrip. Para conversa ao vivo, o ChatWindow.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Resumo de erros — Quando o envio falha: "Há N problemas no formulário", com um link para cada campo (padrão GOV.UK), `role="alert"`, que recebe o foco.
  2. Nome e e-mail — FormField obrigatórios com o Input, `autocomplete="name"` e `"email"`. O rótulo é "E-mail" (era "E-mail corporativo", E154).
  3. Telefone — FormField obrigatório com o Input `type="tel"` e `autocomplete="tel"` (E154), a dica "Com DDD." visível; aceita parênteses, traço, espaço e +55, e valida 10 ou 11 dígitos.
  4. Assunto — FormField "(opcional)" com o Select e a sugestão "Selecione o motivo do contato", ao lado do telefone a partir do tablet.
  5. Mensagem — FormField obrigatório com o Textarea.
  6. Aceite — Grupo "Privacidade e contato" (FormField `as="fieldset"`) com o Checkbox `aceite`, desmarcado: "Li e aceito a Política de Privacidade e os Termos de Uso, e autorizo a Faculdade Phorte a responder pelo e-mail e pelo telefone informados" (E154).
  7. Enviar — Button primário grande, com o ícone de envio.
  8. Campo-isca — Proteção contra spam (E153): um campo fora da tela e `inert` — fora do Tab e da árvore de acessibilidade —, que só robô preenche. Com o tempo de preenchimento, vira os sinais do envio.
  9. Sucesso — `role="status"`: o visto, "Mensagem enviada!" (que recebe o foco) e "Enviar nova mensagem".

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
ErroO resumo no topo e, em cada campo, o erro em pt-BR embaixo, aria-invalid e a borda vermelha — conferido no teste da ficha.
EnviandoO Button em isLoading ("Enviando mensagem…" para o leitor), aria-busy, focável.
EnviadoA tela de sucesso, com o foco no título (E102).
Sem o aceiteA caixa vermelha vazia; no envio, o erro do grupo e o link no resumo, que leva à caixa (E154).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Enviar com campos faltandoNão envia; o resumo aparece com o foco, e cada link leva ao campo — conferido no teste da ficha.
Enviar completoChama onEnviar (ou simula) e mostra o sucesso com o foco no título — conferido no teste da ficha.
"Enviar nova mensagem"Limpa o formulário, recomeça o relógio da proteção contra spam e devolve o foco ao primeiro campo (E102).
Envio de robôCampo-isca preenchido ou envio antes do tempo mínimo: o formulário segue igual, e os sinais acesos vão para onEnviar — conferido no teste da ficha.

Relacionados