Como criar um formulário de contato Divi com WPForms

O módulo de formulário de contato integrado do Divi é suficiente para mensagens simples. Mas se você já tentou adicionar o envio de arquivos, receber pagamentos ou até mesmo armazenar os formulários preenchidos no painel do WordPress, provavelmente já se deparou com suas limitações.

O Divi 5 trouxe melhorias significativas ao módulo de formulários, incluindo lógica condicional e melhores opções de estilo. No entanto, o formulário integrado ainda carece de recursos essenciais de que a maioria dos sites empresariais necessita. Não há armazenamento de entradas, processamento de pagamentos e até mesmo os recursos de proteção contra spam são limitados.

O WPForms é um criador de formulários dedicado para WordPress que preenche todas essas lacunas e se integra diretamente ao Divi por meio de um módulo nativo. Você conta com um verdadeiro criador do tipo arrastar e soltar, com recursos de geração de formulários por IA e mais de 2.100 modelos; além disso, todos os formulários criados são inseridos diretamente no construtor visual do Divi a partir de um simples menu suspenso.

Crie um formulário de contato Divi com o WPForms! 🙂

Como criar um formulário de contato Divi com WPForms

A seguir, abordarei as principais diferenças entre o módulo de formulários do Divi e o WPForms e, em seguida, explicarei passo a passo todo o processo de configuração, desde a instalação do plugin até a publicação do seu formulário em uma página do Divi.

Também vou mostrar como personalizar a aparência do formulário usando os controles de design do Divi e explorar alguns tipos avançados de formulário que você poderá criar assim que tudo estiver conectado.

Por que usar o WPForms em vez do formulário de contato integrado do Divi

O módulo de formulário de contato do Divi lida bem com o básico. Você tem campos de texto, campos de e-mail, menus suspensos e lógica condicional, se estiver usando o Divi 5. Mas, assim que você precisa de algo além de coletar nome, e-mail e mensagem, as limitações começam a se acumular.

Não há como aceitar uploads de arquivos, não há processamento de pagamentos integrado e os envios de formulários vão diretamente para o e-mail, sem possibilidade de visualizá-los ou gerenciá-los dentro do WordPress. Aqui está uma rápida comparação lado a lado para mostrar em que pontos as duas opções diferem.

Se tudo o que você precisa é de um formulário de contato simples com “Nome, E-mail, Mensagem”, o módulo do Divi dá conta disso sozinho. Mas, para qualquer coisa mais complexa, o WPForms preenche todas essas lacunas em um único plugin, em vez de exigir que você tenha que instalar três ou quatro complementos.

Etapa 1: instalar o plug-in WPForms

O WPForms é um criador de formulários do tipo arrastar e soltar desenvolvido especificamente para o WordPress. Ele inclui mais de 2.100 modelos de formulários, abrangendo desde formulários de contato e de pagamento até pesquisas, formulários de inscrição e formulários com calculadoras.

O que mais gosto no WPForms para sites Divi é a integração nativa dos módulos. Já configurei formulários tanto em sites Divi quanto em sites Elementor, e o módulo do Divi oferece, sem dúvida, uma experiência muito mais fluida.

Para um formulário de contato básico, o WPForms Lite (gratuito) é uma boa opção para começar. Se você precisar de envio de arquivos, lógica condicional ou armazenamento de entradas, opte pelo plano Pro.

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 plug-in ao WordPress.

Faça o upgrade para o WPForms Pro agora! 🙂

Passo 2: Crie seu formulário de contato Divi

Com o WPForms ativado, acesse WPForms » Adicionar novo para criar seu primeiro formulário. Você tem duas maneiras de começar. A opção tradicional é a biblioteca de modelos, que oferece centenas de formulários pré-criados, organizados por categoria.

Pesquise por “Formulário de contato simples” e clique em “Usar modelo” para obter um modelo básico com os campos Nome, E-mail e Comentário/Mensagem já predefinidos.

A opção mais rápida é o gerador de formulários com IA, que permite que você descreva o que o formulário deve fazer, por exemplo: “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 cria para você.

A IA também ajuda a preencher as opções dos campos. Se você adicionar um menu suspenso com a pergunta “Como você ficou sabendo da nossa empresa?” e não quiser digitar todas as opções manualmente, o AI Choices irá gerar uma lista relevante que você poderá editar.

Depois de definir seus campos, o construtor do tipo arrastar e soltar permite reorganizar, renomear e configurar tudo visualmente. Você pode definir campos como obrigatórios, adicionar texto de preenchimento, ajustar o tamanho dos campos e usar lógica condicional para mostrar ou ocultar campos com base nas seleções do visitante.

Quando os campos estiverem prontos, clique na guia “Configurações” para definir as notificações do formulário. Isso determina qual endereço de e-mail receberá os envios e como será o e-mail de notificação.

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

Uma coisa a se ter em mente em relação ao envio de e-mails no WordPress. Por padrão, o WordPress usa a função de e-mail integrada do PHP, e muitos provedores de hospedagem bloqueiam ou limitam essa função.

Se você já teve envios de formulários que nunca apareceram na sua caixa de entrada, essa é quase certamente a causa. O plugin WP Mail SMTP resolve esse problema encaminhando seus e-mails por meio de um servidor SMTP autenticado.

Recomendo que você configure isso antes de publicar o formulário, pois resolver problemas relacionados a e-mails perdidos depois que tudo já estiver publicado é frustrante. Clique em “Salvar” no canto superior direito quando tudo estiver certo.

Etapa 3: Abra o Divi Builder

Depois de criar a nova página de contato (ou a página em que deseja colocar o formulário de contato), clique no botão Edit With The Divi Builder (Editar com o Divi Builder ) para iniciar o criador de páginas Divi WordPress.

Se for uma página já existente, ela pode ter uma aparência um pouco diferente. Nesse caso, basta clicar em “Usar o Divi Builder ” para abri-la. Qualquer uma das opções leva você ao mesmo editor visual.

Quando o construtor estiver aberto, você será questionado sobre o layout da sua página.

Etapa 4: escolha o layout da página do formulário de contato da 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 recomendaria a linha de coluna única neste caso.

Isso permite que o formulário de contato ocupe toda a largura da página e mantém a atenção do visitante voltada para o preenchimento do formulário, em vez de dividir o layout com outros conteúdos que disputam a atenção do usuário.

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

Você verá uma janela pop-up perguntando que tipo de layout (com linhas) deseja adicionar à sua página Divi. Para este post, vamos escolher a primeira opção.

Isso fará com que o formulário de contato seja o único “elemento” nessa linha, de modo que ele receba bastante destaque e as pessoas o preencham. Vá em frente e selecione a primeira opção (a linha única) para suas linhas.

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

Passo 5: Insira o módulo WPForms Divi

Essa etapa é muito fácil, pois o WPForms possui sua própria integração com o Divi e um módulo de formulário de contato! Para adicioná-lo, procure por WPForms na caixa de pesquisa e selecione o módulo que aparecer.

Na guia “Conteúdo ”, selecione seu formulário de contato no menu suspenso “Formulário ”. Lá estão listados todos os formulários que você criou no WPForms.

Você também pode ativar ou desativar o título e a descrição do formulário, embora a maioria das pessoas prefira desativá-los para deixar a página com uma aparência mais organizada.

O formulário é exibido na página imediatamente, para que você possa ver exatamente como ele se encaixa no seu layout antes de publicar. Se tudo estiver correto, clique na marca de seleção verde para salvar o módulo.

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

Em seguida, clique no botão “Publicar” para ver o formulário em funcionamento. Seu formulário de contato Divi já está no ar. Os envios serão recebidos tanto no seu e-mail de notificação quanto no painel “WPForms » Entradas ”.

É aqui que você pode visualizar, pesquisar, marcar com estrela, exportar e gerenciar todas as inscrições diretamente no WordPress. Só isso já representa uma grande melhoria em relação ao formulário integrado do Divi, que envia as inscrições por e-mail e depois elas simplesmente desaparecem.

Indo além de um formulário de contato

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

Formulários de pagamento e de pedido

Você pode aceitar pagamentos via Stripe, PayPal Commerce ou Square diretamente a partir de qualquer formulário. Já vi freelancers usando isso para receber adiantamentos de projetos e pequenas empresas utilizando-o em formulários de pedido simples, com seletores de quantidade e códigos de cupom. Se você administra um site Divi para uma empresa de serviços, essa é uma das atualizações mais práticas que você pode fazer.

Formulários de upload de arquivos

O WPForms inclui um campo de formulário para envio de arquivos por arrastar e soltar que suporta vários tipos de arquivos, captura de imagem em tempo real, limites de tamanho configuráveis e sincronização automática com o armazenamento em nuvem no Google Drive ou no Dropbox.

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

Formulários de captura de leads em várias etapas

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

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

Formulários de pesquisa e feedback

O WPForms Pro inclui pontuação NPS, campos com escala de Likert e relatórios interativos de pesquisa que oferecem uma análise visual de cada resposta.

Se você estiver coletando feedback de clientes, realizando pesquisas de satisfação ou fazendo pesquisas de mercado em um site desenvolvido com o Divi, isso elimina totalmente a necessidade de usar uma ferramenta de pesquisa separada.

Perguntas frequentes sobre os formulários de contato do Divi

O WPForms e o Divi são uma combinação popular para a criação de formulários no WordPress. Aqui estão as respostas às perguntas mais frequentes sobre como usá-los em conjunto.

O WPForms é compatível com o Divi 5?

Sim. O WPForms possui um módulo nativo para o Divi que funciona tanto com o Divi 4 quanto com o Divi 5. Basta procurar pelo WPForms na biblioteca de módulos do Divi, selecionar seu formulário no menu suspenso e ele será incorporado diretamente no construtor visual. Não é necessário nada adicional para garantir a compatibilidade com o Divi 5.

O WPForms é gratuito para o Divi?

O WPForms Lite é totalmente gratuito e inclui o construtor de arrastar e soltar, o gerador de formulários com IA, o recurso AI Choices, pagamentos básicos via 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 envio de arquivos, lógica condicional, gerenciamento de entradas e formulários com várias páginas, os planos pagos custam a partir de US$ 49,50 por ano.

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

Por padrão, o WordPress utiliza a função de e-mail integrada do PHP, e muitos provedores de hospedagem bloqueiam essa função, limitam sua velocidade ou a redirecionam por servidores que acabam acionando filtros de spam no lado do destinatário.

A instalação de um plugin SMTP, como o WP Mail SMTP, resolve esse problema ao enviar os e-mails dos formulários por meio 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 a um novo patamar

Agora que seu formulário de contato do Divi está no ar, talvez você queira ajustar sua aparência no site. Confira nosso guia sobre como personalizar 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 aqui como criar um pop-up de formulário de contato no WordPress. Isso mantém suas páginas organizadas e, ao mesmo tempo, torna o formulário acessível a partir de qualquer página do seu site por meio de um botão ou link.

Crie agora o seu formulário de contato Divi

Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.