Como criar um formulário de contato Divi no WordPress

Publicados: 2022-01-20
how to create a divi contact form

Procurando uma maneira fácil de criar um formulário de contato Divi para o seu site WordPress?

Divi é um dos temas WordPress mais populares do mercado. Ele vem com um construtor fácil de usar que permite personalizar seu site desde o front-end. Você pode adicionar módulos de página como o botão de chamada para ação, formulário de contato e muito mais.

Com o módulo Divi Contact Form, você pode criar e inserir um formulário de contato sem nenhum serviço de terceiros. Isso é ótimo se você quiser uma maneira fácil de adicionar um formulário de contato básico ao seu site.

No entanto, você precisará de um poderoso plug-in de criação de formulários, como o WPForms, para recursos avançados, como envios de usuários, marketing por e-mail e muito mais.

É por isso que o Divi Builder também vem com um módulo WPForms para que você possa adicionar facilmente formulários de contato profissionais em apenas alguns cliques.

Neste post, mostraremos esses dois métodos de criação de um formulário de contato Divi no WordPress:

  • Crie um formulário de contato com o Divi Builder
  • Crie um contato Divi com WPForms

Criando um formulário de contato com o Divi Builder

Se você ainda não tiver o Divi, primeiro você precisará se inscrever em uma conta Divi . Em seguida, você poderá acessar o painel e baixar seu arquivo de tema.

Divi

Depois de instalar e ativar o Divi Theme em seu painel do WordPress, abra qualquer página ou postagem onde você deseja adicionar seu formulário de contato Divi.

No editor de postagem, você verá o botão Use Divi Builder . Clique no botão para iniciar o construtor no front-end do seu site.

divi builder post editor

Na próxima tela, você verá as opções para construir uma página do zero, escolher um layout pré-fabricado ou clonar uma página existente.

Para este tutorial, começaremos com a página nova e adicionaremos o formulário de contato.

build from scratch divi

Em seguida, você verá o construtor Divi, onde poderá escolher um modelo de linha que corresponda às suas necessidades.

add row divi builder

Depois de adicionar a linha, você pode ver o painel Inserir módulo que permite adicionar diferentes tipos de módulos de conteúdo.

Se você rolar para baixo, encontrará o módulo Formulário de contato . Basta clicar nele para inserir o formulário de contato Divi em seu site.

divi contact form module

Por padrão, o formulário de contato consiste em três campos de formulário: Nome, Email e Mensagem. Você pode clicar no botão Adicionar novo campo para adicionar outros campos de formulário conforme suas necessidades.

divi contact form editor

Além disso, você encontrará opções para editar o título, a mensagem de envio bem-sucedida e o texto do botão de envio nas configurações de texto .

divi form name and settings

O Divi também permite enviar mensagens de e-mail para que você seja notificado sobre novos envios de formulários.

Além disso, você encontrará outras opções úteis, como links de redirecionamento, proteção contra spam, configurações de segundo plano e muito mais.

divi contact form settings

Com o módulo de formulário de contato Divi, você pode adicionar facilmente um formulário de contato simples ao seu site WordPress. Existem muitas opções de personalização para que você possa combinar com o estilo da sua marca.

Se você deseja adicionar recursos mais avançados ao seu formulário de contato Divi, precisará usar um bom plug-in de criação de formulários.

E é exatamente isso que vamos fazer no próximo método. Mostraremos como criar um contato Divi usando o construtor de formulários WordPress mais poderoso, o WPForms.

Crie um formulário de contato Divi com WPForms

WPForms

WPForms é o melhor plugin construtor de formulários de arrastar e soltar para WordPress. Ele permite que você crie qualquer tipo de formulário, como formulários de contato, formulários de registro, formulários de download e muito mais com apenas alguns cliques.

O WPForms vem com mais de 100 modelos de formulário pré-criados para que você não precise criar um formulário de contato do zero. Você pode adicionar ou remover quaisquer campos de formulário e personalizá-los como desejar. E você nem precisa de nenhum conhecimento de codificação para isso.

Todos os formulários de contato que você cria com o WPForms serão 100% responsivos para que sejam exibidos lindamente em qualquer tamanho de tela. Existe até uma opção de proteção contra spam integrada para que você possa evitar envios de formulários de spam e fraude em seu site.

Com mais de 5 milhões de instalações ativas, o WPForms é adorado por todos os tipos de empresas em todo o mundo. Se você é um usuário do Divi e deseja adicionar formulários de contato incríveis ao seu site, também pode ir em frente com o WPForms.

Aqui estão algumas das razões pelas quais você deve criar seu formulário de contato Divi com WPForms:

  • Fácil de usar e configurar
  • Notificações e confirmações de formulário avançado
  • Funcionalidade de upload de arquivos e envio de conteúdo
  • Sistema integrado de gerenciamento de envio de formulários
  • Integração de e-mail marketing para aumentar sua lista de e-mail
  • Opção de abandono de formulário para capturar entradas parciais de formulário
  • Campos de formulário para opções de comércio eletrônico e pagamento

E a grande notícia é que existe um módulo WPForms no Divi Builder. Assim, você pode adicionar facilmente o formulário de contato criado com o WPForms em seu site.

Além disso, você pode usar WPForms em qualquer site WordPress, com ou sem Divi. Se você decidir parar de pagar pelo Divi, os formulários criados com o WPForms permanecerão intactos em seu site.

Dito isso, vamos aprender como criar um formulário de contato com WPForms + Divi.

Etapa 1: instalar e ativar o plug-in WPFroms

Primeiro, você precisará se inscrever para uma conta WPForms.

O WPForms oferece planos de preços flexíveis projetados para atender aos requisitos de todos os tipos de negócios. Você pode escolher um plano adequado ao seu negócio. E há uma versão lite que está disponível gratuitamente.

Depois de se inscrever, você poderá acessar seu painel WPForms. Você encontrará o arquivo de plug-in junto com sua licença na guia Downloads .

WPForms license key

Você precisa instalar este arquivo de plugin em seu site WordPress. Para mais detalhes sobre isso, você pode conferir nosso guia sobre como instalar um plugin WordPress.

Depois de instalar e ativar o WPForms em seu site, navegue até a guia WPForms »Configurações no seu painel de administração.

Aqui, você precisará inserir a chave de licença e clicar no botão Verificar chave .

verify wpforms license

Em seguida, você verá a mensagem de verificação bem-sucedida. Agora você pode começar a criar seu formulário de contato usando o WPForms.

Etapa 2: criar um formulário de contato

Para criar um novo formulário, vá para a guia Adicionar novo no painel do WordPress. Isso iniciará a biblioteca de modelos onde você pode procurar um modelo de formulário de contato adequado para o seu site.

Para este tutorial, vamos começar com o modelo de formulário de contato simples . Este modelo inclui todos os campos de formulário básicos necessários para um formulário de contato, como nome, email e mensagem. Você também pode visualizar qualquer outro modelo para ver qual é o melhor para você.

Digite um nome para seu formulário de contato e clique no botão Usar modelo no modelo de formulário de sua escolha.

create divi contact form in wpforms

Na próxima tela, você verá o construtor de formulários de arrastar e soltar do WPForm. Todos os campos do formulário estão no lado esquerdo e a visualização do formulário está no lado direito da página.

Você encontrará uma ampla variedade de campos de formulário úteis, como números, lista suspensa, múltipla escolha, upload de arquivos, classificação, rich text e muito mais.

wpforms form fields

Para inserir um campo de formulário, basta arrastá-lo do lado esquerdo e colocá-lo na visualização do formulário.

wpforms drag and drop

Se você quiser personalizar qualquer um desses campos de formulário, clique neles e verá as opções de campo. Existem opções para alterar o rótulo do formulário, descrição, obrigatório e outras opções adicionais dependendo do campo do formulário.

add file upload to divi contact form

Depois de adicionar todos os campos obrigatórios ao seu formulário de contato Divi, clique no botão Salvar na parte superior do construtor de formulários.

Em seguida, você precisará definir configurações de formulário, notificações e confirmações.

Etapa 3: definir as configurações do formulário

Para alterar as configurações do formulário, abra a guia Configurações »Geral no painel do menu esquerdo no construtor de formulários. Aqui, você pode alterar o nome do formulário, a descrição do formulário, o texto do botão de envio e muito mais.

Há também a opção de ativar a proteção antispam em seu site. Isso configurará o Google reCAPTCHA para seu formulário de contato.

general settings wpforms

Para ir para a guia Configurações » Notificações para configurar notificações por e-mail para o seu formulário de contato Divi. Você verá que há uma notificação padrão que é enviada para o endereço de e-mail do administrador.

Você pode adicionar vários endereços de e-mail ou clicar no botão Adicionar nova notificação para enviar mais de uma notificação de formulário.

Com isso, você pode notificar você e os membros de sua equipe sobre novos envios de formulários, enviar aos clientes seus detalhes de envio e muito mais.

form notificaitons wpforms

Se você quiser mais informações sobre isso, consulte nosso guia sobre Como configurar as notificações e confirmações de formulário corretas.

Da mesma forma, o WPForms permite que você decida o que acontece depois que um usuário envia suas informações de contato em seu site. Vá para a guia Configurações »Confirmações e você verá a opção de escolher a ação de confirmação.

wpforms-confirmations

Assim, você pode mostrar uma mensagem de agradecimento personalizada no frontend depois que o usuário clicar no botão enviar. Ou escolha as opções de redirecionamento para direcionar os usuários a uma página diferente em seu site ou a um URL externo.

Depois de concluir as configurações do formulário, certifique-se de clicar no botão Salvar .

Agora que seu formulário de contato está pronto, você pode inseri-lo em seu site usando o Divi Builder.

Etapa 4: adicionar o módulo WPForms no Divi

Para adicionar este formulário de contato em qualquer página ou postagem, abra o Divi Builder e escolha um layout de linha como fizemos para o módulo de formulário de contato Divi.

A única diferença aqui é que você precisará procurar o módulo WPForms .

divi wpforms contact form

Após inserir o bloco WPForms, você verá as configurações para escolher o formulário de contato que acabou de criar. Também há opções para mostrar o título e a descrição do seu formulário de contato.

choose wpforms contact form

Você pode até alterar o design e o estilo do seu formulário de contato com o Divi Builder. Quando estiver satisfeito com a aparência do seu formulário de contato Divi, clique no botão da marca de seleção à direita.

Etapa 5: publique seu formulário de contato Divi

A etapa final é publicar seu formulário de contato. Para isso, clique no botão de 3 pontos na parte inferior do Divi Builder.

publish divi contact form

Em seguida, você verá as diferentes opções, como zoom, visualização responsiva e muito mais. No lado direito, há dois botões: Salvar Rascunho e Publicar.

Clique no botão Publicar para publicar sua página e formulário de contato em seu site WordPress.

publish your divi contact form

Você criou com sucesso um formulário de contato usando Divi e WPForms. Embora o Divi ofereça um módulo de formulário de contato, ele não possui alguns recursos, como upload de arquivos, gerenciamento de entradas e integração de lista de e-mail.

Com o WPForms, você pode resolver esses problemas facilmente. Está repleto de recursos e funcionalidades que ajudam você a criar todos os tipos de formulários de contato, do básico ao profissional.

O WPForms também permite criar formulários do WordPress para qualquer finalidade, dependendo de seus requisitos. Você pode criar formulários de pedidos, formulários de registro de eventos, formulários de inscrição e muito mais.

E é isso por hoje! Esperamos que este tutorial tenha ajudado você a aprender como criar um formulário de contato Divi no WordPress com facilidade.

Se você quiser mais ajuda com os formulários do WordPress, confira estes recursos:

  • Como criar um formulário de registro de evento no WordPress
  • 8 melhores ferramentas de captura de e-mail e construtores de formulários para WordPress
  • Como reduzir facilmente o abandono de formulários

Essas postagens ajudarão você a registrar usuários em seus formulários do WordPress e aumentar suas listas de e-mail. O último ajudará você a reduzir as taxas de abandono em seu formulário e melhorar suas conversões.