Como Criar um Formulário de Contato Divi com WPForms

O módulo de formulário de contato integrado do Divi resolve o problema para mensagens simples. Mas se você já tentou adicionar uploads de arquivos, coletar pagamentos ou até mesmo apenas armazenar envios no seu painel do WordPress, provavelmente já encontrou suas limitações.

O Divi 5 trouxe melhorias reais para o módulo de formulário, incluindo lógica condicional e melhores opções de estilo. Dito isso, o formulário integrado ainda carece de recursos essenciais que a maioria dos sites de negócios precisa. Não há armazenamento de entradas, processamento de pagamentos e até mesmo os recursos de proteção contra spam são limitados.

WPForms é um construtor de formulários dedicado para WordPress que preenche todas essas lacunas e se integra diretamente ao Divi através de um módulo nativo. Você obtém um construtor real de arrastar e soltar com recursos de geração de formulários por IA, mais de 2.100 modelos e todos os formulários que você cria caem diretamente no construtor visual do Divi a partir de um simples menu suspenso.

Crie um Formulário de Contato Divi com WPForms! :)

Como Criar um Formulário de Contato Divi com WPForms

Abaixo, abordarei as principais diferenças entre o módulo de formulário do Divi e o WPForms, e depois mostrarei a configuração completa, desde a instalação do plugin até a publicação do seu formulário em uma página Divi.

Também mostrarei como personalizar a aparência do formulário usando os controles de design do Divi e explorarei alguns tipos avançados de formulários que você pode criar depois que tudo estiver conectado.

adicionar divi à página de contato wpforms no wordpress

Por que usar WPForms em vez do Formulário de Contato Integrado do Divi

O módulo de formulário de contato do Divi lida com o básico o suficiente. Você obtém campos de texto, campos de e-mail, menus suspensos e lógica condicional se estiver no Divi 5. Mas no momento em que você precisar de algo além de coletar um nome, e-mail e mensagem, as limitações começarão a se acumular.

Não há como aceitar uploads de arquivos, nenhum processamento de pagamento integrado e os envios de formulário vão direto para o e-mail sem nenhuma maneira de visualizá-los ou gerenciá-los dentro do WordPress. Aqui está uma rápida comparação lado a lado para mostrar onde as duas opções diferem.

RecursoFormulário Integrado do DiviWPForms
Campos de contato básicosSimSim
Lógica condicional inteligenteApenas Divi 5Todos os planos pagos
Campo de upload de arquivoNãoBásico e superior
Processamento de pagamentoNãoStripe, PayPal Commerce, Square (Pro)
Painel de gerenciamento de entradasNão (as entradas vão apenas para o e-mail)Sim
Formulários de várias páginasNão (requer plugin de terceiros)Sim
Proteção contra spamreCAPTCHA básicoreCAPTCHA, hCaptcha, Turnstile, CAPTCHA personalizado, anti-spam integrado
Modelos pré-criadosConstruir do zeroMais de 2.100 modelos de formulários
Construtor de Formulários com IANãoSim (grátis, mesmo no Lite)
Entradas do formulário salvas no WordPressNãoSim

Se um simples formulário de contato “Nome, E-mail, Mensagem” é tudo o que você precisa, o módulo do Divi cuida disso sozinho. Mas para algo mais complexo, o WPForms cobre todas essas lacunas em um único plugin, em vez de exigir que você adicione três ou quatro extras.

O Que Você Precisará

Para seguir este tutorial, você precisará de um site WordPress com o tema Divi instalado. Tanto o Divi 4 quanto o Divi 5 funcionam. Você também precisará do plugin WPForms.

O WPForms Lite é gratuito e cobre formulários de contato básicos. Para campos avançados como upload de arquivos, lógica condicional e gerenciamento de entradas, adquira o WPForms Basic ou superior.

Passo 1: Instale o Plugin WPForms

WPForms é um construtor de formulários de arrastar e soltar feito especificamente para WordPress. Ele vem com mais de 2.100 modelos de formulário cobrindo tudo, desde formulários de contato e de pagamento até pesquisas, formulários de registro e formulários de cálculo.

O que eu mais gosto no WPForms para sites Divi é a integração nativa do módulo. Configurei formulários em sites Divi e Elementor, e o módulo Divi é genuinamente a experiência mais suave.

Para um formulário de contato básico, o WPForms Lite (gratuito) te ajuda a começar. Se você precisa de uploads de arquivos, lógica condicional ou armazenamento de entradas, opte pelo plano Pro.

A página de preços do WPForms.

Para começar, compre a licença Pro. Em seguida, instale o WPForms em seu site. Se precisar de ajuda, siga estas instruções sobre como adicionar um plugin ao WordPress.

Atualize para o WPForms Pro Agora! :)

Etapa 2: Crie seu Formulário de Contato Divi

Com o WPForms ativo, vá para WPForms » Adicionar Novo para criar seu primeiro formulário. Você tem duas maneiras de começar aqui. A rota tradicional é a biblioteca de modelos, que carrega com centenas de formulários pré-criados organizados por categoria.

Adicionar Novo Formulário

Procure por “Formulário de Contato Simples” e clique em Usar Modelo para obter um ponto de partida limpo com os campos Nome, E-mail e Comentário/Mensagem já no lugar.

Modelo de formulário de contato simples

A opção mais rápida é o gerador de formulários com IA, que permite descrever o que seu formulário deve fazer, como “Preciso de um formulário de contato com nome, e-mail, telefone, um menu suspenso para departamento e um campo de mensagem” e o WPForms o constrói para você.

construtor de IA do WPForms

A IA também funciona para preencher as opções de campos. Se você adicionar um menu suspenso para “Como você soube de nós?” e não quiser digitar todas as opções, a IA de Opções gerará uma lista relevante que você pode editar.

Gerar opções de IA para usar em um formulário

Depois de ter seus campos no lugar, o construtor de arrastar e soltar permite reorganizar, renomear e configurar tudo visualmente. Você pode definir campos como obrigatórios, adicionar texto de espaço reservado, ajustar tamanhos de campo e usar lógica condicional para mostrar ou ocultar campos com base no que o visitante seleciona.

Habilitar lógica condicional para campo suspenso

Quando seus campos estiverem prontos, clique na guia Configurações para configurar suas notificações de formulário. Isso controla qual endereço de e-mail recebe envios e como é o e-mail de notificação.

Reserve um minuto para verificar essas configurações antes de publicar, pois o padrão envia notificações para o seu e-mail de administrador do WordPress, que pode não ser a caixa de entrada correta.

configurações de notificações

Uma coisa a ter em mente com a entrega de e-mails do WordPress. O WordPress usa a função de e-mail integrada do PHP por padrão, e muitos provedores de hospedagem a bloqueiam ou limitam.

Se você teve envios de formulário que nunca apareceram na sua caixa de entrada, essa é quase certamente a causa. O plugin WP Mail SMTP corrige isso roteando seus e-mails através de um servidor SMTP autenticado.

Eu recomendaria configurá-lo antes que seu formulário entre no ar, porque solucionar problemas de e-mails ausentes depois é frustrante. Clique em Salvar no canto superior direito quando tudo parecer bom.

salvar o formulário

Etapa 3: Abra o Construtor Divi

Depois de criar sua nova Página de Contato (ou qualquer página que você queira que seu formulário de contato esteja), você vai querer clicar no botão Editar com o Divi Builder para iniciar o criador de páginas do Divi WordPress.

editar com o construtor divi

Se for uma página existente, pode parecer um pouco diferente. Se for o caso, basta clicar em Usar o Divi Builder para iniciá-lo. Qualquer um deles te leva para o mesmo editor visual.

usar botão do construtor divi para formulário de contato

Assim que o construtor estiver aberto, você será perguntado sobre o layout da sua página.

Etapa 4: Escolha o Layout da sua Página de Formulário de Contato Divi

Assim que o construtor carregar, clique em Começar a Construir para abrir uma tela em branco. O Divi solicitará que você escolha um layout de linha para sua primeira seção. Eu iria com a linha de coluna única aqui.

Isso dá ao formulário de contato largura total e mantém a atenção do visitante focada em preenchê-lo, em vez de dividir o layout com outro conteúdo que compete pela atenção.

começar a construir formulário de contato com divi e wpforms

Em seguida, você verá uma página em branco aparecer. Este é o seu espaço para criar! E é assim que você decidirá como quer que sua página Divi fique e onde você quer que seu formulário de contato WPForms esteja.

Você verá um pop-up que pergunta qual tipo de layout (usando linhas) você gostaria de adicionar à sua página Divi. Para este post, vamos escolher a 1ª opção.

Isso fará com que o formulário de contato seja o único 'objeto' que entra nessa linha, para que receba muita atenção e as pessoas o preencham. Vá em frente e selecione a primeira opção (a linha única) para suas linhas.

Inserir Linha Única Divi

Agora, você será convidado a inserir um módulo. Vamos colocar seu incrível formulário WPForms lá em seguida.

Etapa 5: Insira o Módulo Divi WPForms

Esta etapa é extra fácil porque o WPForms tem sua própria integração Divi e um módulo de formulário de contato! Para adicioná-lo, procure por WPForms na caixa de pesquisa e, em seguida, selecione o módulo que aparece.

escolher módulo wpforms para formulário de contato da página divi

Na aba Conteúdo, escolha seu formulário de contato no menu suspenso Formulário. Isso lista todos os formulários que você construiu no WPForms.

Você também pode ativar ou desativar o título e a descrição do formulário, embora a maioria das pessoas desative esses para um visual mais limpo na página.

configurações do módulo wpforms no divi

O formulário é renderizado na página imediatamente, para que você possa ver exatamente como ele se encaixa no seu layout antes de publicar. Se tudo parecer certo, clique no sinal de visto verde para salvar o módulo.

Salvar formulário de contato no Divi

Bom trabalho, seu formulário de contato está incorporado e pronto. Agora, você pode publicá-lo da mesma forma que publica qualquer página no Divi. Clique nos 3 pontos na parte inferior do construtor de páginas para exibir algumas configurações adicionais do Divi.

Salvar Opções no Divi

Em seguida, selecione o botão Publicar para vê-lo ao vivo. Seu formulário de contato Divi está no ar. Os envios fluirão para o seu e-mail de notificação e para o painel WPForms » Entradas.

visualização de entradas wpforms

É aqui que você pode visualizar, pesquisar, marcar, exportar e gerenciar todas as submissões de dentro do WordPress. Isso por si só já é uma grande melhoria em relação ao formulário integrado do Divi, que envia as entradas por e-mail e depois elas desaparecem.

formulário de contato divi finalizado

Indo Além de um Formulário de Contato

O módulo Divi do WPForms funciona para qualquer tipo de formulário que você criar, não apenas formulários de contato. Assim que o plugin for instalado e o módulo estiver disponível no Divi, aqui estão alguns dos tipos de formulário mais populares que os usuários do Divi costumam configurar.

Formulários de pagamento e pedidos

Você pode aceitar pagamentos com Stripe, PayPal Commerce ou Square diretamente de qualquer formulário. Já vi freelancers usarem isso para coletar depósitos de projetos e pequenas empresas usarem para formulários de pedidos simples com seletores de quantidade e códigos de cupom. Se você administra um site Divi para uma empresa de serviços, esta é uma das atualizações mais práticas que você pode fazer.

pagamentos wpforms

Formulários de upload de arquivos

O WPForms inclui um campo de formulário de upload de arquivos com arrastar e soltar que suporta vários tipos de arquivo, captura de câmera ao vivo, limites de tamanho configuráveis e sincronização automática de armazenamento em nuvem com Google Drive ou Dropbox.

O formulário integrado do Divi não tem nenhuma capacidade de upload de arquivos, o que é um dos motivos mais comuns pelos quais os usuários do Divi acabam procurando um plugin de formulário separado em primeiro lugar.

Formulários de leads em várias etapas

Formulários longos com uma dúzia de campos em uma página tendem a ser abandonados. Com formulários em várias etapas, você pode dividir esses campos em várias páginas com uma barra de progresso para que os visitantes vejam uma seção gerenciável por vez.

Preparei um guia completo sobre como criar um formulário em várias etapas com quebras de página, indicadores de progresso e lógica de página condicional, se você quiser se aprofundar na configuração.

formulário de várias partes publicado

Formulários de Pesquisa e Feedback

O WPForms Pro inclui pontuação NPS, campos de escala Likert e relatórios de pesquisa interativos que fornecem análises visuais de cada resposta.

Se você está coletando feedback de clientes, realizando pesquisas de satisfação ou fazendo pesquisas de mercado em um site com tecnologia Divi, isso substitui a necessidade de uma ferramenta de pesquisa separada.

configurações de pesquisas e enquetes do WPForms

Perguntas frequentes sobre formulários de contato do Divi

WPForms e Divi são uma combinação popular para criar formulários WordPress. Aqui estão as respostas para as perguntas que surgem com mais frequência sobre o uso deles juntos.

O WPForms funciona com o Divi 5?

Sim. O WPForms tem um módulo Divi nativo que funciona com o Divi 4 e o Divi 5. Você procura por WPForms na biblioteca de módulos do Divi, seleciona seu formulário em um menu suspenso e ele é incorporado diretamente no construtor visual. Nada extra é necessário para compatibilidade com o Divi 5.

O WPForms é gratuito para Divi?

O WPForms Lite é totalmente gratuito e inclui o construtor de arrastar e soltar, gerador de formulários com IA, Escolhas de IA, pagamentos básicos com Stripe e integração completa com o módulo Divi.

Você pode criar e incorporar um formulário de contato funcional sem gastar nada. Para recursos avançados como uploads de arquivos, lógica condicional, gerenciamento de entradas e formulários de várias páginas, os planos pagos começam em R$ 49,50/ano.

Por que meu formulário de contato do Divi não está enviando e-mails?

O WordPress depende da função de e-mail integrada do PHP por padrão, e muitos provedores de hospedagem a bloqueiam, limitam ou a roteiam através de servidores que acabam acionando filtros de spam no lado do destinatário.

Instalar um plugin SMTP como o WP Mail SMTP resolve isso enviando os e-mails do seu formulário através de um servidor de e-mail autenticado. Isso resolve o problema tanto para o formulário integrado do Divi quanto para o WPForms.

Em seguida, Leve seus formulários Divi adiante

Agora que seu formulário de contato Divi está no ar, você pode querer ajustar a aparência dele em seu site. Confira nosso guia sobre como estilizar formulários de contato no WordPress para obter dicas sobre como combinar o design do seu formulário com as cores, fontes e espaçamento do seu tema Divi.

Se você preferir que seu formulário de contato apareça como uma sobreposição em vez de ficar em uma página dedicada, veja como criar um pop-up de formulário de contato no WordPress. Isso mantém suas páginas limpas, ao mesmo tempo que torna o formulário acessível de qualquer página do seu site através de um botão ou link.

Crie seu formulário de contato Divi agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso importa e como você pode nos apoiar.

Hamza Shahid

Hamza é Redator da equipe WPForms, que também se especializa em tópicos relacionados a marketing digital, segurança cibernética, plugins do WordPress e sistemas ERP. Saiba Mais

O Melhor Plugin Construtor de Formulários de Arrastar e Soltar para WordPress

Fácil, Rápido e Seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

8 comentários em “Como Criar um Formulário de Contato Divi com WPForms

  1. Minha primeira experiência combinando WPForms com Divi é decepcionante. Não consigo estilizar o tamanho ou a cor do texto, não consigo fazer os campos terem cantos arredondados, nem controlar a cor dos campos. Tentarei novamente amanhã, mas até agora não atende às minhas expectativas de controle de design.

    1. Olá Ed! Peço desculpas por qualquer mal-entendido. O Módulo Divi tem o objetivo de garantir que os formulários WPForms possam ser incorporados em sites criados com Divi sem problemas. Ele não tem a capacidade de conceder os recursos de estilização do Divi para serem aplicados aos formulários incorporados.

      Para estilizar seus formulários, consulte nosso guia aqui: https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/

      Espero que isso ajude! Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se você tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.

  2. Olá, sou administradora de um site de caridade e não a hospedagem, mas estou tendo problemas para receber e-mails vazios de "Fale Conosco" repetidamente todos os dias. Sei que o tema do WordPress é 'DIVI ativo' e o e-mail vazio recebido é exibido como: Consulta por e-mail do site Canal Trust:

    Nome: %%Name%%
    E-mail: %%Email%%

    Mensagem: %%Message%%

    Isso parece as configurações de configuração do formulário.
    Nosso site está sendo atingido por BOTS ou há algo que eu possa fazer para parar esses e-mails de incômodo, por favor?
    Sua ajuda e conselho são muito apreciados.
    Julie K
    https://.nwdct.org/contact-us/

    1. Olá Julie — Lamentamos qualquer problema. Para garantir que respondamos à sua pergunta da maneira mais completa possível e evitemos qualquer confusão, você poderia entrar em contato com nossa equipe?

      Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.

      Obrigado.

    1. Olá Wac, — Lamentamos qualquer transtorno. Para garantir que respondamos à sua pergunta da forma mais completa possível e evitar qualquer confusão, você poderia entrar em contato com nossa equipe?

      Se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, portanto, envie um ticket de suporte. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.

      Obrigado.

  3. Olá, existe alguma maneira de usar o WP Forms configurado em um modelo de produto em temas onde as pessoas possam pedir mais informações sobre um produto e você seja notificado sobre qual produto elas clicaram no momento? No momento, ele envia a mesma mensagem de qualquer produto que enviam?

    Muito obrigado

Adicionar um comentário

Ficamos felizes que você tenha escolhido deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de privacidade, e todos os links são nofollow. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e Termos de Serviço da Cloudflare.