Como adicionar o formulário de gravidade ao site Elementor

Você não pode imaginar um site sem formulários. A maioria dos sites usa formulários únicos ou múltiplos para atender a seus diferentes propósitos. Portanto, é essencial aprender também como adicionar formulários ao seu site Elementor.

Se você tiver a ferramenta certa em mãos, poderá fazer todo o processo em alguns minutos sem tocar em uma linha de código.

Hoje, compartilhamos como criar/adicionar formulários ao site da Elementor, usando o widget Gravity Forms gratuito do Happy Addons.

Também compartilhamos os outros widgets de formulário Happy Addons que são compatíveis com plugins de formulário populares.

Como usar o widget Gravity Forms do Happy Addons para criar formulários para o site Elementor

Você pode criar facilmente diferentes formulários usando o widget Gravity Forms.

No segmento a seguir, mostraremos como usar o widget Gravity Forms e criar formulários evergreen para o seu site Elementor gratuitamente.

Siga estes quatro passos simples –

1. Instalar e ativar plug-ins necessários
2. Criar um novo formulário de gravidade
3. Adicionar widget de formulários de gravidade do Happy Addons
4. Personalize o formulário em seu próprio estilo

Vamos começar:

Etapa um: instalar e ativar os plug-ins necessários

Primeiro, precisamos instalar e ativar os plugins necessários em nosso site. Aqui, já instalamos e ativamos os seguintes plugins. Você pode usar os seguintes links para baixar os plugins.

1. Elementor (Gratuito)
2. Complementos felizes (grátis)
3. Formas de gravidade (Pro)

Nota: Para sua preocupação, o plugin Gravity Forms não oferece uma versão gratuita. Você tem que comprar sua versão pro.

Etapa dois: criar um novo formulário de gravidade

Após instalar o plugin, você precisa ir para a área de Formulários ou Novos Formulários . Em seguida, clique no botão Adicionar novo para criar um novo formulário.

No pop-up modal a seguir, você terá a opção de criar o formulário. Você adiciona o título do formulário e a descrição do formulário aqui. Por fim, clique no botão Criar formulário para criar um novo formulário.

Bem feito! Você criou um novo formulário. Agora, você precisa adicionar os campos de formulário necessários ao formulário. No plug-in Gravity Forms, você pode adicionar facilmente campos de formulário obrigatórios usando o recurso de arrastar e soltar.

Primeiro, você precisa digitar o nome do campo na barra de pesquisa. Em seguida, arraste e solte o campo na área do lado esquerdo.

Aqui, você vê que estamos procurando o campo de formulário Nome na barra de pesquisa e o arrasta para o lugar certo.

Também adicionamos três outros campos de formulário em nossos formulários, como E-mail, Site e Mensagem , para criar um formulário completo. Após adicionar os campos de formulário essenciais, clique no botão Atualizar para salvar o formulário.

Etapa três: adicionar o widget de formulários de gravidade do Happy Addons

É hora de exibir o formulário em seu site Elementor.

Primeiro, encontre o widget Gravity Forms do Happy Addons no menu da barra lateral esquerda e arraste e solte-o no local adequado do seu site.

Segundo, você escolhe o nome do formulário na lista suspensa. Aqui, selecionamos o formulário de amostra que você criou antes.

Você também pode mostrar o título do formulário e habilitar o envio do Ajax aqui na seção Conteúdo .

Nota: Ao fazer uma alteração no painel do editor Elementor, você precisa clicar no botão Aplicar para atualizar as alterações na página de front-end.

Etapa quatro: personalize o formulário em seu próprio estilo

Na seção Estilo , você obterá as opções de estilo essenciais para uma melhor personalização do formulário.

Aqui estão eles.

• Campos de formulários
• Rótulo de campos de formulários
• Botão de envio
• Pausa
• Lista

Neste blog, usaremos os três primeiros campos de formulário, rótulo de campos de formulário e configurações de botão de envio, que são frequentemente usados ​​para criar o formulário.

Campos de formulário

Na área Estilo-> Campos de formulário , você encontrará muitas opções de estilo para alterar o estilo padrão dos campos de formulário. Estas são as opções Largura do campo grande, Espaçamento do campo, Preenchimento, Raio da borda, Tipografia, Cor do texto do campo, Cor do espaço reservado para o campo, Tipo de borda, Sombra da caixa e Cor de fundo que você pode usar para personalizar os campos.

Lst's aumentam os campos do formulário Preenchimento .

Você pode alterar a cor do texto do campo à sua maneira.

Rótulo de campos de formulário

Você também pode redefinir a Margem, Preenchimento do rótulo, Margem do subrótulo, Tipografia do rótulo, Tipografia do subrótulo, Cor do texto do rótulo, Cor do texto do subrótulo e Cor do rótulo obrigatório do estilo Rótulo dos campos de formulário .

Aqui, alteramos a Cor do rótulo obrigatório padrão e definimos a cor vermelha.

Botão de envio

Na área Estilo-> Enviar botão , você obterá as opções de design possíveis, como largura total do botão, largura do botão, margem, preenchimento, tipografia, tipo de borda, raio da borda, sombra da caixa, cor do texto e cor de fundo para estilizar o envio botão.

Ativar a largura total do botão e definir a largura do botão

Se você precisar de um botão de envio de largura total, poderá fazê-lo ativando o Button Full Width . Então você pode definir a largura do botão à sua maneira.

Definir Margem, Preenchimento e Raio de Broder

Também definimos Margin, Padding e Broder Radius do botão Submit.

Alterar a cor do cursor do botão

Para tornar o botão mais visível, alteramos a cor de foco do botão Enviar.

Visualização final do widget Gravity Forms do Happy Addons

A aparência final do nosso formulário Elementor Gravity é semelhante à imagem a seguir.

Você também pode conferir o vídeo.

Mais 6 widgets de formulário de complementos felizes que você pode usar

Assim como o widget Gravity Forms, o Happy Addons oferece 6 outros widgets de formulário. Você também pode usá-los para integrar formulários ao seu site Elementor.

Vamos falar sobre esses widgets um por um.

1. Formulário de contato 7

O Contact Form 7 é um dos plugins de formulário proeminentes para WordPress que a maioria dos usuários usa. Por esse motivo, Happy Addons permite que seus usuários adicionem formulários usando o widget gratuito Contact Form 7.

Com este widget, você pode adicionar e personalizar facilmente diferentes tipos de formulários ao seu site Elementor.

Confira a documentação.

2. Formas Ninja

Agora você também pode usar seu plugin favorito do Ninja Forms. Usando o widget Happy Addons Ninja Forms, você pode inserir seus formulários necessários no seu site Elementor.

Leia a documentação passo a passo do Ninja Forms.

3. WeForms

Com o novo e exclusivo widget weForms do Happy Addons, você pode adicionar formulários pré-criados ao seu site de uma forma mais organizada.

Dê uma olhada rápida nesta documentação e saiba como funciona este widget.

4. Formas de Caldeira

Experimente o widget gratuito Happy Addons Caldera Forms para adicionar formulários impressionantes ao seu site Elementor. Vamos dar uma olhada no guia do usuário.

5. Formulários WP

Deseja adicionar formulários ao seu site usando o popular plugin WPForms? No Happy Addons, você pode adicionar e personalizar facilmente os formulários pré-criados usando o widget WPForms. Para mais detalhes, aqui está um guia rápido para você.

Formulários Fluentes

Por último, mas não menos importante. Você também pode usar o widget Happy Addons Fluent Forms para integrar formulários em seu site. Acompanhe a documentação completa do Fluent Forms.

Você está pronto para usar o widget de formulários de gravidade do Happy Addons

Você pode facilitar o processo de design de formulários usando os widgets de formulário Happy Addons. Esperamos que você tenha seguido todas as etapas acima e aprendido o processo de integração de formulários.

Agora, é sua hora de adicionar o Gravity Form ao site Elementor.

Você está pronto para ir?

Se você ainda tiver dúvidas sobre este blog ou os formulários Elementor Gravity, você pode aumentar sua voz na caixa de comentários abaixo.

Confira alguns outros tutoriais essenciais…

• Como personalizar o design do seu formulário no Elementor usando widgets de formulário feliz GRATUITAMENTE!
• O guia definitivo para criar um formulário de contato Elementor
• 7 Melhor Construtor de Formulários WordPress Comparado (Prós e Contras)
• Formulário de contato 7: Revisão de recursos e verificação de desempenho (comparado com WPForms)
• Revisão honesta do WPForms para profissionais de marketing

Não se esqueça de participar das nossas newsletters. Também é totalmente GRÁTIS !