Visão geral dos formulários - Ajuda do Webflow
Os formulários são uma das ferramentas mais poderosas da web, permitindo capturar informações de forma eficiente, seja para inscrições em newsletters ou consultas de trabalho de potenciais clientes. Com o Webflow, você pode personalizar e otimizar totalmente seus formulários para atender às suas necessidades. Você pode adicionar um bloco de formulário ao seu site a partir de Painel de Adição → Elementos → Formulários.
Anatomia do formulário
O Bloco de Formulário herda a largura total de seu elemento pai e contém três elementos filhos:
- Formulário — contém todos os seus campos e elementos do formulário
- Mensagem de sucesso — a mensagem retornada quando o formulário é enviado com sucesso
- Mensagem de erro — a mensagem retornada quando há um problema com o envio do formulário
Estrutura do formulário
Você pode adicionar ou excluir qualquer um dos seguintes elementos dentro do formulário para personalizá-lo conforme necessário:
| Elemento do formulário | Finalidade |
|---|---|
| Rótulo do campo | Usado para descrever a função ou finalidade de um campo do formulário. Crucial para acessibilidade. |
| Entrada | Usada para coletar dados de uma única linha, como uma resposta curta a uma pergunta (ex.: nome ou e-mail) |
| Upload de arquivo | Permite que os visitantes do site anexem um arquivo ao envio do formulário |
| Área de texto | Permite que os visitantes do site insiram dados de várias linhas, como uma mensagem longa |
| Caixa de seleção | Usada para dados de entrada onde os visitantes do site podem escolher uma ou várias opções |
| Botão de rádio | Usado para dados de entrada onde os visitantes do site podem escolher apenas uma de muitas opções |
| Seleção | Usada para permitir que os visitantes do site selecionem opções de uma lista suspensa. Seleções múltiplas permitidas |
| reCAPTCHA | Serviço do Google que previne spam em formulários |
| Botão de envio | Envia todos os dados coletados em um formulário. Nenhum formulário está completo sem o Botão de envio |
Como configurar elementos de formulário
Você pode clicar duas vezes em um elemento de formulário (por exemplo, Entrada, Botão de envio) para abrir suas configurações. Cada elemento de formulário tem diferentes configurações de entrada com base em seu tipo:
| Configuração de entrada | Finalidade | Notas adicionais |
|---|---|---|
| Nome | Identifica o campo nas submissões de formulário | n/a |
| Obrigatório | Permite exigir que um campo de formulário seja preenchido para enviar o formulário | Bloqueia envios vazios |
| Placeholder | Mostra texto na entrada que desaparece ao digitar; NÃO deve substituir rótulos ou instruções cruciais | Não disponível para tecnologia assistiva ou ferramentas de tradução; estilizável no menu de estados |
| Tipo de texto | Especifica o tipo de entrada (por exemplo, email, telefone, senha) | Telefone aceita caracteres e mostra teclado; senha oculta caracteres digitados |
| Autofoco | Decide se o campo foca automaticamente quando a página carrega | Cuidado com problemas de rolagem/pulo ou campos ocultos bloqueando envios |
Botão de Envio
As configurações do botão de envio permitem definir:
- Texto do botão: O que aparece no botão (padrão: “Enviar”)
- Texto de espera: O que substitui o botão após ser clicado e antes da conclusão do envio (padrão: “Por favor, aguarde...”)
Como gerenciar configurações de formulário
Personalizar estados de sucesso e erro
Selecione o bloco de formulário e vá para Configurações do bloco de formulário para:
- Normal: Estado padrão
- Sucesso: Mensagem após um envio bem-sucedido
- Erro: Mensagem após um envio falho
Defina o nome do formulário
O nome que você define associa o formulário aos seus dados de envio. Se você não definir nomes exclusivos, todos os dados de envio aparecerão sob "Formulário de E-mail." Dê nomes descritivos para distinguir os formulários.
Gerencie envios de formulários e notificações
- Especifique os destinatários nas Configurações do bloco de formulário.
- Acesse notificações avançadas em Configurações do site → Formulários → Notificações de formulário.
- Para proprietários completos do site: acesse/gerencie dados de formulários em Configurações do site → Formulários → Envios de formulários.
Redirecione visitantes do site ao enviar o formulário
Adicione uma URL no campo Redirecionar para enviar os usuários para outro lugar após o envio.
Defina uma ação personalizada
Adicione uma ação personalizada para enviar envios para outro lugar (por exemplo, HubSpot). Quando você adiciona isso, o Webflow não processa ou envia a notificação. Você também pode conectar Apps para mais integrações.
Veja conexões de aplicativos
Os Apps conectados aparecerão em Conexões. Nota: Enviar dados do formulário para o Webflow sempre aparece, a menos que você ignore completamente o processamento do Webflow.
Dados de formulário e GDPR
- Se você coleta dados pessoais de residentes da UE (incluindo através de formulários), você é um controlador de dados sob o GDPR.
- Obtenha consentimento apropriado para a coleta de dados.
- Se estiver construindo para clientes, eduque-os sobre suas responsabilidades.
- Revise responsabilidades se conectar dados a terceiros (por exemplo, Zapier).
Saiba mais:
Solução de problemas
Se o seu formulário não puder ser enviado:
- Se você ativou o reCAPTCHA, certifique-se de que todos os formulários o incluam. Caso contrário, os envios falharão.
- Se você tiver campos ocultos, certifique-se de que o Autofoco esteja desativado para eles.
- Sites gratuitos/não hospedados estão limitados a 50 envios de formulários no total. Atualize seu plano de site para remover o limite.
Se os problemas persistirem, entre em contato com o suporte ao cliente.