Contexto e desafio

A landing Squad IAP (/squad-iap) apresenta o programa — boxes temáticas, cupons, bonificação e destaque nas redes — e precisa captar inscrições de forma confiável.

O desafio típico nesse cenário:

• Formulário alinhado ao layout da LP, sem depender só de blocos genéricos do tema.
• Persistência dos leads em um lugar que o time comercial/operações consiga consultar (não só e-mail ou planilha manual).
• Experiência clara no preenchimento: validação, feedback visual e confirmação de envio.
• Encaixe na VTEX IO: app versionado, instalável no store theme, customizável via CSS Handles.

A resposta foi um app VTEX IO dedicado (form-lp-squad), consumido pelo tema IAP no bloco da seção “formulário” da LP customizada.

O que foi construído

App VTEX IO

O tema IAP (iap), o app entra como dependência e o bloco é filho de container#lp-custom-form, na rota custom store.custom#lp-custom (Squad IAP, path /squad-iap).

Campos do formulário

• Nome completo
• @ Instagram / TikTok
• Nicho (orientação: Cabelo, Maquiagem ou Skincare)
• Localização (cidade + um dos 7 estados: CE, MA, PI, PB, BA, PA, AL)

UX e validação

• Validação no cliente: campos obrigatórios (trim não vazio).
• Estados por campo: idle → erro (vermelho) / sucesso (verde) no blur e no submit.
• Acessibilidade: aria-invalid, aria-describedby, role="alert" / role="status".
• Após sucesso: tela dedicada (“Enviado com sucesso!”), ícone SVG na cor da marca, botão VOLTAR para novo envio; formulário é resetado.
• urante envio: botão desabilitado (loading).
• Erros de API: mensagem exibida abaixo do formulário.

Visual e customização

• CSS Modules (RegisterForm.css) + CSS Handles (vtex.css-handles) para o tema sobrescrever estilos no Site Editor.
• Tipografia Geist Variable (CDN Fontsource).
• Paleta alinhada à LP: vermelho #B80001, inputs pill (border-radius: 100px), botão full width.

Stack e ferramentas

• Plataforma — VTEX IO (apps, workspaces, link/publish)
• UI — React 16, TypeScript 3.9
• Integração VTEX — vtex.css-handles, vtex.store-components, vtex.styleguide, vtex.list-context (dependências do manifest; o formulário em si usa principalmente css-handles + fetch nativo)
• Dados — Master Data (entidade 'SQ')
• Estilo — CSS Modules + CSS Handles
• Qualidade — ESLint (config VTEX), Prettier, Husky + lint-staged, commit message linter
• API HTTP — fetch no browser (sem Apollo/GraphQL no componente principal)

Como isso se encaixa na LP?

Na LP custom, a seção do formulário tem htmlId: "formulario" e o título em rich-text (“Preencha o formulário e complete sua inscrição!”). O app ocupa apenas o container do formulário; hero, benefícios e mapa de distribuição ficam no store theme.

Isso separa bem responsabilidades: tema = conteúdo e layout da página; app = lógica de inscrição e integração com Master Data.