Os formulários são essenciais para qualquer site—desde formulários de contato simples até fluxos de registro complexos em várias etapas. O Elementor Pro inclui um widget de Formulário embutido que elimina a necessidade de um plugin de formulário separado em muitos casos. Neste guia, abordamos como criar formulários de contato, formulários de registro e formulários em várias etapas usando o Elementor Pro, juntamente com opções de integração para serviços de email marketing e CRM.
Este tutorial requer Elementor Pro. A versão gratuita do Elementor não inclui o widget de Formulário.
Visão Geral do Widget de Formulário do Elementor
O widget de Formulário do Elementor suporta os seguintes tipos de campo:
| Tipo de Campo | Caso de Uso | Notas |
|---|---|---|
| Texto | Nome, empresa, linha de assunto | Entrada de texto em uma linha |
| Coleta de endereços de email | Inclui validação de formato de email | |
| Textarea | Corpo da mensagem, comentários, descrições | Texto em várias linhas com linhas configuráveis |
| Tel | Números de telefone | Aciona teclado numérico em dispositivos móveis |
| Número | Quantidades, orçamentos, classificações | Validação de min/max/passo |
| URL | Endereços de sites | Validação de formato de URL |
| Select | Seleções de dropdown (país, categoria) | Seleção única ou múltipla |
| Radio | Escolha única entre opções (tipo de serviço) | Opções visíveis sem dropdown |
| Checkbox | Múltiplas seleções (interesses, serviços) | Múltiplas seleções permitidas |
| Data | Datas de compromissos, datas de eventos | Selecionador de data nativo |
| Hora | Agendamento de compromissos | Controle de seleção de hora |
| Upload de Arquivo | Envio de currículo, documento, imagem | Tipos de arquivo e limites de tamanho configuráveis |
| Aceitação | Termos e condições, consentimento do GDPR | Checkbox obrigatório com link |
| Oculto | Dados de rastreamento (URL da página, referenciador) | Não visível para o usuário |
| reCAPTCHA | Proteção contra spam | Checkbox v2 ou invisível v3 |
| Honeypot | Anti-spam (invisível para humanos) | Campo oculto que captura bots |
Criando um Formulário de Contato
Passo 1: Adicionar o Widget de Formulário
- Abra qualquer página no editor do Elementor
- Pesquise por "Formulário" no painel de widgets
- Arraste o widget de Formulário para o seu layout
- O formulário padrão inclui campos de Nome, Email e Mensagem
Passo 2: Configurar os Campos do Formulário
Para um formulário de contato padrão, esta configuração de campo funciona bem:
- Nome (Campo de texto, obrigatório) – Placeholder: "Seu nome"
- Email (Campo de email, obrigatório) – Placeholder: "[email protected]"
- Assunto (Campo de texto, opcional) – Placeholder: "Como podemos ajudar?"
- Mensagem (Campo de textarea, obrigatório) – Placeholder: "Conte-nos sobre seu projeto...", Linhas: 5
- reCAPTCHA ou Honeypot para proteção contra spam
Passo 3: Configurar Ações Após o Envio
Na seção "Ações Após o Envio", configure o que acontece quando um usuário envia o formulário: For related information, see our guide on Elementor complete guide.
- Email: Enviar dados do formulário para seu endereço de email (ou múltiplos endereços)
- Redirecionar: Enviar o usuário para uma página de agradecimento após o envio
- Popup: Exibir um popup de confirmação
- Webhook: Enviar dados do formulário para uma URL externa (Zapier, Make, API personalizada)
- Mailchimp / ConvertKit / Drip: Adicionar assinantes às listas de email marketing
- Slack: Enviar notificações para um canal do Slack
- Discord: Enviar notificações para um webhook do Discord
Passo 4: Estilizar o Formulário
Na aba Estilo, personalize a aparência visual: For related information, see our guide on Elementor templates and kits.
- Layout do formuláriout: Campos empilhados (largura total) ou em linha (lado a lado)
- Estilo do campo: Borda, cor de fundo, preenchimento, raio da borda, cor do estado de foco
- Estilo do rótulo: Família da fonte, tamanho, cor, espaçamento
- Estilo do botão: Cor de fundo, cor do texto, borda, efeitos de hover, opção de largura total
- Mensagens: Cores e tipografia das mensagens de sucesso e erro
Criando um Formulário de Múltiplas Etapas
Formulários de múltiplas etapas são úteis para formulários longos (inscrições, aplicações, pesquisas) onde mostrar todos os campos de uma vez pode sobrecarregar os usuários. O Elementor Pro suporta formulários de múltiplas etapas nativamente. For related information, see our guide on creating landing pages with Elementor.
Como Configurar Etapas
- Adicione um widget de Formulário à sua página
- Na lista de campos do formulário, adicione um campo do tipo "Etapa" entre grupos de campos
- Cada campo de Etapa cria uma nova etapa com um botão "Próximo" e "Anterior"
- Exemplo de estrutura:
- Etapa 1: Nome, Email, Telefone (Informações Pessoais)
- Etapa 2: Empresa, Orçamento, Cronograma (Detalhes do Projeto)
- Etapa 3: Mensagem, Upload de Arquivo (Informações Adicionais)
Formulários de múltiplas etapas exibem um indicador de progresso mostrando em qual etapa o usuário está. Isso reduz a complexidade percebida e melhora as taxas de conclusão em comparação a mostrar todos os campos de uma vez.
Criando um Formulário de Registro de Usuário
O Elementor Pro pode criar formulários de registro de usuário do WordPress sem um plugin separado:
- Adicione um widget de Formulário e configure os campos (Nome de Usuário, Email, Senha)
- Em "Ações Após o Envio", adicione a ação "Registrar"
- Mapeie cada campo do formulário para o campo correspondente do usuário do WordPress
- Defina o papel padrão do usuário para novos registros
- Opcionalmente, redirecione os usuários para a página da conta após o registro
Nota: O WordPress requer que um administrador aprove novos usuários por padrão. Você pode alterar isso em Configurações → Geral → Membros se quiser que os usuários se registrem livremente.
Integração com Serviços de Email Marketing
O Elementor Pro se integra diretamente com plataformas populares de email marketing:
| Serviço | Tipo de Integração | Passos de Configuração |
|---|---|---|
| Mailchimp | Nativo (embutido) | Adicionar chave API → Selecionar lista → Mapear campos |
| ConvertKit | Nativo (embutido) | Adicionar chave API → Selecionar formulário → Mapear campos |
| ActiveCampaign | Nativo (embutido) | Adicionar credenciais API → Selecionar lista → Mapear campos |
| Drip | Nativo (embutido) | Adicionar token API → Selecionar conta → Mapear campos |
| GetResponse | Nativo (embutido) | Adicionar chave API → Selecionar campanha → Mapear campos |
| MailerLite | Nativo (embutido) | Adicionar chave API → Selecionar grupo → Mapear campos |
| HubSpot | Via Webhook | Criar conexão Zapier/Make com ação de webhook |
Para cada integração, o processo é: insira a chave API do seu serviço nas configurações de integração do Elementor, em seguida, selecione o serviço como uma "Ação Após o Envio" no seu formulário. Mapeie os campos do seu formulário para os campos do serviço, e os assinantes serão adicionados automaticamente quando o formulário for enviado.
Estratégias de Proteção contra Spam
Formulários de contato atraem bots de spam. O Elementor Pro fornece várias opções de prevenção de spam:
- Google reCAPTCHA v3: Detecção de spam invisível que pontua envios sem interação do usuário. Recomendado para a maioria dos formulários
- reCAPTCHA v2: A caixa de seleção "Não sou um robô". Mais visível, mas pode reduzir as conclusões do formulário
- Campo Honeypot: Um campo invisível que os bots preenchem. Se o campo contiver dados, a submissão é rejeitada. Nenhuma interação do usuário é necessária
- Campo de Aceitação: Uma caixa de seleção obrigatória (consentimento GDPR, aceitação de termos) que também atua como um dissuasor de bots
Recomendamos o uso do reCAPTCHA v3 combinado com um campo Honeypot. Isso fornece duas camadas de proteção contra spam sem qualquer impacto visível.
na experiência do usuário.
Elementor Forms vs Plugins de Formulário Dedicados
| Recurso | Elementor Forms | Gravity Forms | WPForms |
|---|---|---|---|
| Construtor Visual | Dentro do editor do Elementor | Arrastar e soltar separado | Arrastar e soltar separado |
| Lógica Condicional | Básica (mostrar/ocultar campos) | Avançada | Avançada |
| Integração de Pagamento | Botão do PayPal | Stripe, PayPal, Square | Stripe, PayPal, Square |
| Cálculos | Não | Sim | Sim (Pro) |
| Múltiplas Etapas | Sim | Sim | Sim |
| Envio de Arquivo | Sim | Sim | Sim |
| Gerenciamento de Entradas | Através de envios do Elementor | Gerenciador de entradas completo | Gerenciador de entradas completo |
| Requer Construtor de Páginas | Sim (Elementor Pro) | Não | Não |
Elementor Forms é suficiente para formulários de contato, inscrições em newsletters e formulários de registro simples. Para formulários complexos que exigem processamento de pagamento, lógica condicional avançada ou gerenciamento sofisticado de entradas, plugins de formulário dedicados como Gravity Forms ou WPForms são mais apropriados.
Perguntas Frequentes
Posso usar formulários do Elementor sem o Elementor Pro?
Não. O widget de Formulário é exclusivo do Elementor Pro. Se você precisa de formulários com a versão gratuita do Elementor, use um plugin de formulário separado como Contact Form 7 (gratuito), WPForms Lite (gratuito) ou Gravity Forms (premium).
Onde são armazenados os envios de formulários do Elementor?
Os envios de formulários são armazenados no banco de dados do WordPress e acessíveis em Elementor → Envios no painel administrativo. Você pode visualizar, exportar (CSV) e excluir envios. Os envios também são enviados para os endereços de e-mail que você configura na ação de E-mail.
Os formulários do Elementor podem aceitar envios de arquivos?
Sim. Adicione um campo de tipo Envio de Arquivo ao seu formulário. Você pode configurar os tipos de arquivos aceitos (PDF, JPG, PNG, DOCX, etc.) e o tamanho máximo do arquivo. Os arquivos enviados são armazenados na biblioteca de mídia do WordPress e vinculados ao envio do formulário.
Como adiciono lógica condicional aos formulários do Elementor?
O Elementor Pro suporta lógica condicional básica: mostrar ou ocultar campos com base no valor de outro campo. Nas configurações do campo, ative "Condicional" e defina as condições (por exemplo, mostrar o campo "Empresa" apenas quando o botão de opção "Sou uma empresa" estiver selecionado). Para lógica condicional avançada (cálculos, condições de múltiplos níveis), um plugin de formulário dedicado pode ser mais adequado.
Posso criar formulários pop-up com o Elementor?
Sim. Crie um modelo de pop-up no Elementor, adicione um widget de Formulário dentro dele e defina as condições de disparo (clique, porcentagem de rolagem, intenção de saída, atraso de tempo). Isso é útil para inscrições em newsletters, iscas de leads e ofertas promocionais sem adicionar um formulário ao layout da página principal.
Como posso prevenir spam nos formulários do Elementor?
Use o Google reCAPTCHA v3 (invisível) combinado com um campo Honeypot para proteção em duas camadas. Isso bloqueia bots automatizados sem adicionar fricção para usuários reais. Para formulários com alto volume de spam, considere adicionar um campo de Aceitação (caixa de seleção obrigatória) como uma terceira camada.
Adquira o Elementor Pro com o Construtor de Formulários
Acesse o widget de Formulário, Construtor de Temas, Construtor WooCommerce e mais de 100 widgets Pro. Crie formulários visualmente sem plugins adicionais.
Explore o Elementor Pro →
