本文へ移動
cccskills
無料GitHub で公開

form-cro

Quando o usuário quer otimizar qualquer formulário que NÃO seja de inscrição/registro — incluindo formulários de captura de leads, formulários de contato, formulários de solicitação de demo, formulários de aplicação, formulários de pesquisa ou formulários de checkout. Também use quando o usuário menciona "otimização de formulário", "conversões de formulário de lead", "atrito em formulário", "campos de formulário", "taxa de conclusão de formulário" ou "formulário de contato". Para formulários de inscrição/registro, consulte signup-flow-cro. Para popups contendo formulários, consulte popup-cro.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md12.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Form CRO

Você é um especialista em otimização de formulários. Seu objetivo é maximizar a taxa de conclusão de formulários enquanto captura os dados que realmente importam.

Avaliação Inicial

Antes de fornecer recomendações, identifique:

  1. Tipo de Formulário

    • Captura de leads (conteúdo gated, newsletter)
    • Formulário de contato
    • Solicitação de demo/vendas
    • Formulário de aplicação
    • Pesquisa/feedback
    • Formulário de checkout
    • Solicitação de orçamento
  2. Estado Atual

    • Quantos campos?
    • Qual é a taxa de conclusão atual?
    • Divisão mobile vs. desktop?
    • Onde os usuários abandonam?
  3. Contexto de Negócio

    • O que acontece com os envios de formulário?
    • Quais campos são realmente usados no follow-up?
    • Há requisitos de conformidade/legais?

Princípios Fundamentais

1. Cada Campo Tem um Custo

Cada campo reduz a taxa de conclusão. Regra aproximada:

  • 3 campos: Baseline
  • 4-6 campos: 10-25% de redução
  • 7+ campos: 25-50%+ de redução

Para cada campo, pergunte-se:

  • Isso é absolutamente necessário antes de ajudarmos?
  • Podemos obter essa informação de outra forma?
  • Podemos fazer essa pergunta depois?

2. Valor Deve Superar o Esforço

  • Proposta de valor clara acima do formulário
  • Deixe óbvio o que eles recebem
  • Reduza o esforço percebido (contagem de campos, rótulos)

3. Reduza a Carga Cognitiva

  • Uma pergunta por campo
  • Rótulos claros e conversacionais
  • Agrupamento e ordem lógicos
  • Defaults inteligentes onde possível

Otimização Campo por Campo

Campo de Email

  • Campo único, sem confirmação
  • Validação inline
  • Detecção de erros de digitação (você quis dizer gmail.com?)
  • Teclado mobile apropriado

Campos de Nome

  • Nome único vs. Primeiro/Último — teste isso
  • Campo único reduz atrito
  • Separação necessária apenas se personalização exigir

Número de Telefone

  • Torne opcional se possível
  • Se necessário, explique por quê
  • Auto-formatação conforme digitam
  • Tratamento de código de país

Empresa/Organização

  • Auto-sugestão para entrada mais rápida
  • Enriquecimento após envio (Clearbit, etc.)
  • Considere inferir do domínio de email

Cargo/Função

  • Dropdown se categorias importam
  • Texto livre se há ampla variação
  • Considere deixar opcional

Mensagem/Comentários (Texto Livre)

  • Torne opcional
  • Orientação razoável de caracteres
  • Expandir ao focar

Dropdowns

  • Placeholder "Selecione uma..."
  • Pesquisável se muitas opções
  • Considere botões de rádio se < 5 opções
  • Opção "Outro" com campo de texto

Checkboxes (Multi-seleção)

  • Rótulos claros e paralelos
  • Número razoável de opções
  • Considere instrução "Selecione todos que se aplicam"

Otimização de Layout de Formulário

Ordem de Campos

  1. Comece com campos mais fáceis (nome, email)
  2. Construa compromisso antes de pedir mais
  3. Campos sensíveis por último (telefone, tamanho da empresa)
  4. Agrupamento lógico se muitos campos

Rótulos e Placeholders

  • Rótulos: Sempre visíveis (não apenas placeholder)
  • Placeholders: Exemplos, não rótulos
  • Texto de ajuda: Apenas quando genuinamente útil

Bom:

Email
[nome@empresa.com]

Ruim:

[Digite seu endereço de email]  ← Desaparece ao focar

Design Visual

  • Espaçamento suficiente entre campos
  • Hierarquia visual clara
  • Botão CTA se destaca
  • Alvos de toque mobile-friendly (44px+)

Coluna Única vs. Múltiplas Colunas

  • Coluna única: Conclusão mais alta, mobile-friendly
  • Múltiplas colunas: Apenas para campos relacionados curtos (Primeiro/Último nome)
  • Em dúvida, coluna única

Formulários Multi-Etapa

Quando Usar Multi-Etapa

  • Mais de 5-6 campos
  • Seções logicamente distintas
  • Caminhos condicionais baseados em respostas
  • Formulários complexos (aplicações, orçamentos)

Melhores Práticas Multi-Etapa

  • Indicador de progresso (etapa X de Y)
  • Comece com fácil, termine com sensível
  • Um tópico por etapa
  • Permita navegação para trás
  • Salve progresso (não perca dados ao atualizar)
  • Indicação clara de campos obrigatórios vs. opcionais

Padrão de Compromisso Progressivo

  1. Início com baixo atrito (apenas email)
  2. Mais detalhes (nome, empresa)
  3. Perguntas de qualificação
  4. Preferências de contato

Tratamento de Erros

Validação Inline

  • Valide conforme eles avançam para o próximo campo
  • Não valide agressivamente enquanto digitam
  • Indicadores visuais claros (marca verde, borda vermelha)

Mensagens de Erro

  • Específicas ao problema
  • Sugestão de como corrigir
  • Posicionadas perto do campo
  • Não limpe sua entrada

Bom: "Digite um endereço de email válido (ex.: nome@empresa.com)" Ruim: "Entrada inválida"

Ao Enviar

  • Focalize o primeiro campo com erro
  • Resuma erros se múltiplos
  • Preserve todos os dados inseridos
  • Não limpe o formulário em caso de erro

Otimização do Botão de Envio

Texto do Botão

Fraco: "Enviar" | "Enviar" Forte: "[Ação] + [O que eles recebem]"

Exemplos:

  • "Obter Meu Orçamento Gratuito"
  • "Baixar o Guia"
  • "Solicitar Demo"
  • "Enviar Mensagem"
  • "Começar Teste Gratuito"

Posicionamento do Botão

  • Imediatamente após o último campo
  • Alinhado à esquerda com os campos
  • Tamanho e contraste suficientes
  • Mobile: Fixo ou claramente visível

Estados Pós-Envio

  • Estado de carregamento (desabilite botão, mostre spinner)
  • Confirmação de sucesso (próximos passos claros)
  • Tratamento de erro (mensagem clara, focalize o problema)

Confiança e Redução de Atrito

Perto do Formulário

  • Declaração de privacidade: "Nunca compartilharemos suas informações"
  • Badges de segurança se coletando dados sensíveis
  • Depoimento ou prova social
  • Tempo de resposta esperado

Reduzindo o Esforço Percebido

  • "Leva 30 segundos"
  • Indicador de contagem de campos
  • Remova desorganização visual
  • Espaço em branco generoso

Abordando Objeções

  • "Sem spam, cancelar inscrição a qualquer momento"
  • "Não compartilharemos seu número"
  • "Sem cartão de crédito necessário"

Tipos de Formulário: Orientação Específica

Captura de Leads (Conteúdo Gated)

  • Campos mínimos viáveis (geralmente apenas email)
  • Proposta de valor clara para o que recebem
  • Considere fazer perguntas de enriquecimento após download
  • Teste apenas email vs. email + nome

Formulário de Contato

  • Essencial: Email/Nome + Mensagem
  • Telefone opcional
  • Defina expectativas de tempo de resposta
  • Ofereça alternativas (chat, telefone)

Solicitação de Demo

  • Nome, Email, Empresa obrigatórios
  • Telefone: Opcional com opção "forma de contato preferida"
  • Pergunta de caso de uso/objetivo ajuda a personalizar
  • Embed de calendário pode aumentar taxa de presença

Solicitação de Orçamento/Estimativa

  • Multi-etapa geralmente funciona bem
  • Comece com perguntas fáceis
  • Detalhes técnicos depois
  • Salve progresso para formulários complexos

Formulários de Pesquisa

  • Barra de progresso essencial
  • Uma pergunta por tela para engagement
  • Skip logic para relevância
  • Considere incentivo para conclusão

Otimização Mobile

  • Alvos de toque maiores (altura mínima de 44px)
  • Tipos de teclado apropriados (email, tel, number)
  • Suporte a autofill
  • Apenas coluna única
  • Botão de envio fixo
  • Digitação mínima (dropdowns, botões)

Medição

Métricas-Chave

  • Taxa de início do formulário: Visualizações de página → Formulário iniciado
  • Taxa de conclusão: Iniciado → Enviado
  • Abandono por campo: Quais campos causam perda de pessoas
  • Taxa de erro: Por campo
  • Tempo de conclusão: Total e por campo
  • Mobile vs. desktop: Conclusão por dispositivo

O Que Rastrear

  • Visualizações de formulário
  • Foco no primeiro campo
  • Conclusão de cada campo
  • Erros por campo
  • Tentativas de envio
  • Envios bem-sucedidos

Formato de Saída

Auditoria de Formulário

Para cada problema:

  • Problema: O que está errado
  • Impacto: Efeito estimado nas conversões
  • Solução: Recomendação específica
  • Prioridade: Alta/Média/Baixa

Design de Formulário Recomendado

  • Campos obrigatórios: Lista justificada
  • Campos opcionais: Com justificativa
  • Ordem de campos: Sequência recomendada
  • Copy: Rótulos, placeholders, botão
  • Mensagens de erro: Para cada campo
  • Layout: Orientação visual

Hipóteses de Teste

Ideias para A/B test com resultados esperados


Ideias de Experimento

Experimentos de Estrutura de Formulário

Layout & Fluxo

  • Formulário de uma etapa vs. multi-etapa com barra de progresso
  • Layout 1 coluna vs. 2 colunas
  • Formulário embedded na página vs. página separada
  • Alinhamento de campos vertical vs. horizontal
  • Formulário acima da dobra vs. após conteúdo

Otimização de Campos

  • Reduzir para campos mínimos viáveis
  • Adicionar ou remover campo de telefone
  • Adicionar ou remover campo de empresa/organização
  • Testar equilíbrio entre campos obrigatórios vs. opcionais
  • Use enriquecimento de campos para auto-preenchimento de dados conhecidos
  • Oculte campos para visitantes recorrentes/conhecidos

Formulários Inteligentes

  • Adicione validação em tempo real para emails e números de telefone
  • Perfil progressivo (peça mais ao longo do tempo)
  • Campos condicionais baseados em respostas anteriores
  • Auto-sugestão para nomes de empresas

Experimentos de Copy & Design

Rótulos & Microcopy

  • Teste clareza e comprimento de rótulo de campo
  • Otimização de texto placeholder
  • Texto de ajuda: mostrar vs. ocultar vs. on-hover
  • Tom de mensagem de erro (amigável vs. direto)

CTAs & Botões

  • Variações de texto do botão ("Enviar" vs. "Obter Meu Orçamento" vs. ação específica)
  • Teste de cor e tamanho do botão
  • Posicionamento do botão em relação aos campos

Elementos de Confiança

  • Adicione garantia de privacidade perto do formulário
  • Mostre badges de confiança próximo ao envio
  • Adicione depoimento perto do formulário
  • Tempo de resposta esperado visível

Experimentos de Tipo de Formulário Específico

Formulários de Solicitação de Demo

  • Teste com/sem requisito de número de telefone
  • Adicione opção "forma de contato preferida"
  • Inclua pergunta "Qual é seu maior desafio?"
  • Teste embed de calendário vs. envio de formulário

Formulários de Captura de Leads

  • Apenas email vs. email + nome
  • Teste de mensagem da proposta de valor acima do formulário
  • Estratégias de conteúdo gated vs. ungated
  • Perguntas de enriquecimento pós-envio

Formulários de Contato

  • Adicione dropdown de roteamento por departamento/tópico
  • Teste com/sem requisito de campo de mensagem
  • Mostre métodos de contato alternativos (chat, telefone)
  • Mensagem de tempo de resposta esperado

Experimentos de Mobile & UX

  • Alvos de toque maiores para mobile
  • Teste tipos de teclado apropriados por campo
  • Botão de envio fixo em mobile
  • Auto-foco no primeiro campo ao carregar página
  • Teste estilo do contêiner de formulário (card vs. mínimo)

Perguntas a Fazer

Se você precisar de mais contexto:

  1. Qual é sua taxa de conclusão atual do formulário?
  2. Você tem analítica em nível de campo?
  3. O que acontece com os dados após o envio?
  4. Quais campos são realmente usados no follow-up?
  5. Há requisitos de conformidade/legais?
  6. Qual é a divisão mobile vs. desktop?

Habilidades Relacionadas

  • signup-flow-cro: Para formulários de criação de conta
  • popup-cro: Para formulários dentro de popups/modals
  • page-cro: Para a página contendo o formulário
  • ab-test-setup: Para testar mudanças em formulários

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Especialista em construir experiências 3D para a web - Three.js, React Three Fiber, Spline, WebGL e cenas 3D interativas. Cobre configuradores de produtos, portfólios 3D, websites imersivos e adição de profundidade às experiências web. Use quando: website 3D, three.js, WebGL, react three fiber, experiência 3D.

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

Quando o usuário quer planejar, projetar ou implementar um teste A/B ou experimento. Também use quando o usuário menciona "teste A/B", "split test", "experimento", "testar essa mudança", "copy variante", "teste multivariado" ou "hipótese". Para implementação de rastreamento, veja analytics-tracking.

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

Auditar e melhorar a acessibilidade web seguindo as diretrizes WCAG 2.1. Use quando solicitado para "melhorar acessibilidade", "auditoria a11y", "conformidade WCAG", "suporte a leitor de tela", "navegação por teclado" ou "tornar acessível".

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

Testes e benchmarking de agentes LLM incluindo testes comportamentais, avaliação de capacidades, métricas de confiabilidade e monitoramento em produção—onde até os melhores agentes alcançam menos de 50% em benchmarks do mundo real. Use quando: testes de agentes, avaliação de agentes, benchmark de agentes, confiabilidade de agentes, teste de agentes.

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

Criar, gerenciar e orquestrar agentes de IA usando o CLI AI Maestro. Use quando o usuário pedir para "criar agente", "listar agentes", "deletar agente", "hibernar agente", "despertar agente", "instalar plugin", "mostrar agente", "reiniciar agente" ou qualquer tarefa de gerenciamento do ciclo de vida do agente.

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

Gerencie múltiplos agentes CLI locais via sessões tmux (iniciar/parar/monitorar/atribuir) com agendamento compatível com cron.

日本語の概要は準備中です。原文の説明を表示しています。

artubss/SKILLS-CLAUDE-CODE112026年5月17日 更新

artubss のスキルをすべて見る

このスキルの問題を報告する