Encontro 09 - Rede Daora

Formulários: a primeira entrega do MVP

Sair do plano e construir uma parte do site, testando com outra pessoa

O projeto já está desenhado

Ponto de partida

A aula 07 respondeu às perguntas de descoberta. A aula 08 transformou as respostas em specs e issues. Hoje começa a construção.

Descoberta

descoberta.md da aula 07

Plano

arquitetura.md, componentes.md, tecnologia.md

Design system

design.md e tokens.css da aula 06

Entrega pequena, testada de verdade

O ciclo de hoje

Escolher uma tarefa → Construir → Testar → Ajustar → Conferir

É como cozinhar provando o tempero. Você não faz o cardápio inteiro para descobrir que faltou sal.

O plano dá a direção. Quem descobre o que está errado é quem tenta usar.

O que precisa ser verdade

A entrega da aula

No ar

Formulário na página prevista no plano

Chegando

Mensagem de teste no destino escolhido

No celular

Preenchível sem dificuldade

Anotado

Um problema concreto e o ajuste feito

Em qual ação o formulário ajuda

Pergunta 4 da descoberta

A ação vem do plano

Projeto	Ação principal	O que o formulário serve
Padaria da Maria	Pedir pelo WhatsApp	Receber a encomenda por escrito
Fotógrafa	Pedir um orçamento	Nome, contato e tipo de ensaio
Oficina de bicicletas	Agendar atendimento	Contato e descrição do problema

O formulário não substitui a ação principal. Ele oferece um segundo caminho, na página que o mapa já previu.

A analogia

O papelzinho de encomenda

Na loja, a Maria anota o pedido num papel: nome, contato e o que a pessoa quer.

A diferença: no balcão ela está do lado e pode explicar uma pergunta confusa. No site, quem preenche está no sofá, no celular, sem ninguém por perto.

Por isso cada campo precisa se explicar sozinho.

A pergunta de cada campo

Só o necessário

Preciso dessa informação para dar o próximo passo?

Informação	Para que serve	Entra agora?
Nome	Saber com quem conversar	Geralmente, sim
E-mail ou WhatsApp	Responder o pedido	Sim
Mensagem	Entender o pedido	Sim
Endereço completo	Organizar entrega	Depois, no contato
CPF	Emitir documento	Não

Três campos é um bom ponto de partida, mas não é regra. O que não pode existir é um campo que você não consiga justificar.

A tarefa no quadro

GitHub Projects

Uma issue pequena

## Adicionar formulário de contato à página Contato

## Contexto
Complementa o botão de WhatsApp da Maria da Padaria.

## Pronto quando
- Pede nome, contato e mensagem
- Campos com nomes visíveis
- Visual usa os tokens do projeto
- Uma mensagem de teste chega
- A pessoa vê se o envio deu certo
- Dá para preencher no celular

O que separa uma boa issue

Critérios de conclusão

Não basta

"Ficou bonito" se o pedido não chega.

Não basta

"A mensagem chegou" se ninguém preenche no celular.

Mova a issue para Fazendo. Agenda automática e painel de pedidos vão para o Backlog.

Ao clicar em Enviar

A segunda é a que se esquece

Duas partes do formulário

O que a pessoa vê

Título, instruções, campos, botão e o retorno depois do envio.

Para onde o pedido vai

Um serviço que recebe as informações e entrega a quem cuida do site.

Um site estático mostra os campos com facilidade. Os campos por si só não guardam nem enviam nada.

Sem construir um sistema próprio

Serviços que recebem o pedido

Formulário HTML

Formspree, Web3Forms, Getform. Você configura a URL no action e o visual é do seu site.

Formulário pronto

Google Forms gera um bloco para colar na página. Rápido, mas com menos liberdade visual.

O que importa não é o nome da ferramenta. É saber responder: onde o pedido para e quem vai ver?

A parte mais esquecida

O retorno depois do envio

Situação	O que a página deve comunicar
Falta uma informação	Qual campo preencher ou corrigir
Envio concluído	Que foi enviada e o que acontece depois
O envio falhou	Que não chegou e como tentar de novo

Sucesso que não confirma nada faz a pessoa abrir a página de novo, e vem mensagem duplicada.

Para entender depois de digitar

Campos com nome visível

Mais difícil	Mais claro
Campo sem nome, com "Digite aqui"	Seu nome acima do campo
"Contato" sem explicação	WhatsApp para resposta
"Mensagem" sem contexto	Conte o que você gostaria de encomendar

O texto dentro da caixa é dica. O nome do campo é o que a pessoa precisa.

Aula 06 entra aqui

O visual já foi decidido

Use o design.md e o tokens.css. O formulário é um componente do mesmo site: mesma fonte, mesmo espaçamento, mesmo botão.

Não peça

Uma cor nova, outra borda, outro formato de botão.

Peça

Reaproveitar os componentes que já existem na página.

O botão tem um texto que descreve a ação: Enviar pedido. Botão com cara de link passa batido.

Persuasão com honestidade

O que fica perto dos campos

Ajudar a decidir

Ajuda

O que acontece depois do envio. Por qual canal a resposta chega. Um depoimento real do projeto.

Prejudica

Prazo que ninguém assumiu. Número inventado. Campo que a pessoa não consegue recusar.

Onde a persuasão vira manipulação

Dark patterns em formulários

O que é	Como se manifesta
Seleção pré-marcada	Uma opção que a pessoa não pediu já vem marcada
Escassez inventada	"Últimas 3 vagas" todo dia, mesmo quando há mais
Campo que não dá para recusar	Newsletter misturada ao botão de enviar

A pergunta que separa os dois: essa pessoa receberia a mesma informação se eu estivesse do outro lado?

Etapa 4 da prática

Teste com outra pessoa

Convide uma colega para fazer um pedido fictício e não explique onde clicar. Observe em silêncio.

Depois pergunte onde ela esperava encontrar o contato, se alguma pergunta ficou confusa e se ela soube que o envio deu certo.

Abrir o demo de Contato

Abre em uma nova aba para apresentar na sala.

Cinco etapas

Prática guiada

25 min - Escolher a tarefa e escrever os critérios na issue.
45 min - Construir uma primeira versão com a IA e os arquivos do projeto.
25 min - Primeiro teste no celular, incluindo o caminho dos erros.
30 min - Observar outra pessoa sem explicar nada.
40 min - Corrigir o problema encontrado e testar de novo.

O que costuma dar errado

Problemas comuns

O que aconteceu	O que conferir
Aparece, mas não chega	A URL no `action`
Chega, mas a pessoa não sabe	O retorno depois do envio
Alguém não entende um campo	Troque por palavras do seu público
Difícil no celular	Largura, espaçamento, tamanho do botão
O CTA principal sumiu	O fluxo e o CTA da aula 08

O que fica para as próximas aulas

O ciclo se repete

Plano do MVP → Uma entrega pequena → Teste com uma pessoa → Ajuste → Próxima tarefa

Um formulário que funciona porque você testou vale mais do que um formulário que funciona porque parece certo.