Como Criar um Formulário de Inscrição Personalizado no Elementor

A maioria das pequenas empresas comete um erro crucial – utilizam formulários de inscrição bastante standard que se parecem com todos os outros formulários de inscrição na web.

Vemos repetidamente este padrão sempre que temos a oportunidade de verificar os formulários dos nossos clientes enquanto tratamos das suas questões.

Por isso, queríamos reunir um guia rápido para ajudar os nossos leitores a criar formulários de inscrição impressionantes para construir a sua lista de newsletters.

Neste guia, vamos guiá-lo através dos passos para criar o seu próprio formulário de inscrição personalizado utilizando a ferramenta de criação de páginas mais popular para WordPress – o Elementor.

Criar Formulários de Inscrição Personalizados no Elementor

Criar um Formulário de Inscrição Personalizado no Elementor

Utilize os links rápidos abaixo para saltar imediatamente para qualquer secção do tutorial:

Vamos começar.

Passo 1: Instalar Elementor e WPForms

Como a maioria das pessoas utiliza o Elementor para publicar as suas páginas, vamos mostrar-lhe como criar formulários de inscrição personalizados utilizando o Elementor.

Se ainda não o tem, prossiga e instale o Elementor no seu site.

Não precisará de uma licença premium do Elementor para este tutorial.  Em vez disso, pode usar o Elementor juntamente com o WPForms para criar formulários de inscrição gratuitamente! 😎

Se não sabe como instalar plugins, consulte este guia para iniciantes sobre instalação de plugins.

Embora possa criar formulários de inscrição personalizados com um aspeto apelativo utilizando uma combinação do Elementor e do WPForms completamente grátis, recomendamos que experimente a licença WPForms Pro para aceder a algumas ferramentas avançadas para obter melhores resultados.

Depois de ter instalado ambos os plugins, é hora de começar a criar o seu formulário de inscrição totalmente personalizado!

Passo 2: Criar ou Editar uma Página com Elementor

Pode adicionar um formulário de inscrição a uma página existente ou a uma página completamente nova. Normalmente, um formulário de newsletter é incorporado como uma das várias secções numa página de destino maior. Mas criaremos uma nova página contendo apenas um formulário de inscrição, por uma questão de simplicidade.

Para começar, abra o seu painel WordPress e clique em Páginas » Adicionar Nova Página.

Uma vez dentro do editor de blocos do WordPress, clique no botão Editar com Elementor na parte superior.

Após clicar no botão, o editor do Elementor será carregado em poucos segundos. Pode criar uma página de destino completa utilizando o editor de arrastar e soltar.

No próximo passo, utilizaremos o widget WPForms para criar um formulário de inscrição personalizado.

Passo 3: Criar um Novo Formulário de Inscrição

Como só precisamos de adicionar um formulário de inscrição personalizado aqui, vamos procurar o widget WPForms e arrastá-lo para a área do lado direito.

Quando tiver inserido o widget WPForms na sua página, pode selecionar qualquer formulário guardado que tenha criado com o WPForms ou criar um novo.

Criaremos um novo formulário de inscrição clicando no botão + Novo Formulário no painel esquerdo.

Neste ponto, o construtor de formulários WPForms começará a carregar como uma sobreposição. Aqui, pode criar o formulário de inscrição que precisa de incorporar na sua página.

Comece por dar um nome ao seu formulário. Isto é útil para que possa referenciá-lo e encontrá-lo mais tarde no seu painel WordPress.

Em seguida, percorra a página e utilize a barra de pesquisa por baixo do painel de seleção de modelos para encontrar um modelo adequado. Utilizaremos o modelo Formulário de Inscrição para Newsletter para este tutorial.

Após selecionar o modelo, o construtor de formulários será carregado no seu ecrã. Notará que este modelo já inclui os campos Nome e Email, que são basicamente tudo o que precisa para a inscrição na newsletter.

Mas a diversão não fica por aqui! Podemos levar este formulário para o próximo nível e dar-lhe um verdadeiro 'glow up'.

Uma das formas de o fazer é adicionar um título divertido que convide mais pessoas a inscreverem-se.

Pode fazer isto utilizando o campo Conteúdo disponível no WPForms Pro. Inseriremos o campo Conteúdo no topo do formulário.

Após adicionar o campo, clique nele para abrir as suas Opções de Campo associadas no painel esquerdo.

O editor de texto no painel esquerdo permite-lhe adicionar qualquer pedaço de texto sem qualquer código. Adicionaremos algum texto e formatá-lo-emos como Título 4. Vamos também adicionar um emoji para que o texto se destaque mais! 🕺

Certifique-se de que pressiona o botão Atualizar Pré-visualização por baixo do editor para ver as alterações a ocorrerem no seu formulário à direita.

E já agora, vamos também alterar o texto do botão de envio e torná-lo mais relevante para a natureza do formulário.

A partir da barra lateral no construtor de formulários, clique em Definições » Geral. Percorra a página até encontrar o campo Texto do Botão de Envio. Pode substituir o texto predefinido simplesmente digitando aqui.

Ótimo! O formulário já está a ficar bem. Este é um bom momento para guardar o formulário pressionando Guardar no topo.

Mas um formulário de inscrição para newsletter seria inútil sem ser integrado com a sua ferramenta de email marketing.

No próximo passo, vamos mostrar-lhe como integrar o seu formulário com a sua aplicação de marketing para que novos subscritores sejam automaticamente copiados para a sua lista de subscritores.

Passo 4: Ligar o Formulário de Inscrição a uma Plataforma de Marketing

O WPForms suporta várias integrações de marketing a partir dos planos Plus e acima. Se estiver a usar o WPForms Lite, ainda pode aceder à integração Constant Contact gratuitamente.

Para este exemplo, vamos mostrar-lhe rapidamente como conectar o seu formulário de inscrição com o Brevo.

Simplesmente vá ao separador Marketing na barra lateral.

Em seguida, selecione o serviço com o qual deseja conectar o seu formulário. Com exceção do Constant Contact, todas as integrações de marketing suportadas exigem que instale primeiro o complemento apropriado.

Se ainda não tiver o complemento, o WPForms irá instalá-lo para si quando clicar nele.

Neste caso, estamos a usar o Brevo. Clicando em Brevo dentro do separador Marketing, recebemos um pedido para o instalar. Após pressionarmos Sim, instalar e ativar, demorou apenas cerca de 5 segundos para o complemento Brevo ser instalado e pronto.

Em seguida, com o Brevo selecionado no painel esquerdo, clique em Adicionar Nova Conta no canto superior direito.

Agora, basta introduzir a sua Chave API Brevo e o apelido da conta. Se precisar de mais ajuda para encontrar a sua chave API Brevo, consulte a nossa documentação do add-on Brevo para obter detalhes.

Após introduzir as informações necessárias, clique em Adicionar.

Assim que estiver ligado à sua conta Brevo, uma nova lista de definições será preenchida no painel direito.

Utilize os campos de menu suspenso para configurar como o seu formulário deve funcionar com a sua conta Brevo. Pode definir coisas como a ação a realizar no Brevo quando o formulário é submetido, a lista onde novos subscritores devem ser adicionados ou removidos, mapear os campos de e-mail e muito mais.

Quando terminar, certifique-se de que pressiona Guardar no topo.

A integração de marketing está agora completa. Foi fácil, não foi!?

Passo 5: Estilizar o seu Formulário de Inscrição e Publicar

Neste ponto, terminámos de configurar as funcionalidades necessárias para o formulário de inscrição. Mas, como enfatizámos no início deste tutorial, um formulário impactante precisa de ser mais do que apenas funcional – também precisa de ser visualmente impressionante.

Embora já tenhamos tornado o nosso formulário muito mais interessante adicionando algum texto e emojis com o campo Conteúdo, podemos ir ainda mais longe com o poder combinado do WPForms e do Elementor.

Após o seu formulário estar pronto, saia simplesmente do WPForms pressionando o botão de fechar. Deverá agora ter o editor Elementor com o seu formulário recém-criado incorporado como um widget.

Clique no formulário e, em seguida, selecione o separador Estilos localizado no painel esquerdo.

 

Neste separador, encontrará opções para personalizar os estilos de diferentes componentes do formulário. Por exemplo, pode personalizar os estilos dos seus campos, rótulos e botões sem qualquer código.

No nosso formulário, as bordas dos campos são retangulares com cantos retos por defeito. Mas se precisar de bordas de campo mais arredondadas, pode fazê-lo simplesmente aumentando o valor do raio da borda em Estilos de Campo.

Da mesma forma, pode alterar a cor dos seus campos, rótulos e botões com um único clique. Usaremos as cores padrão porque combinam perfeitamente com o nosso tema. Mas sinta-se à vontade para experimentar cores diferentes no seu formulário.

No Elementor, também pode alterar os estilos do contentor do seu formulário. Para o fazer, clique no separador Avançado.

Encontrará aqui um monte de definições fascinantes, incluindo ajustes de layout, efeitos de animação, personalizações de fundo e muito mais.

Vamos adicionar uma cor de fundo ao contentor do formulário para lhe dar um aspeto mais vibrante. Clique na opção Fundo para expandir o menu com definições adicionais.

Adicionaremos uma cor sólida clicando no ícone de seleção de cor à direita.

A ferramenta de seleção de cores permite-lhe selecionar convenientemente qualquer cor com um clique.

Após selecionar a cor, o formulário fica imediatamente muito mais apelativo visualmente!

No entanto, os elementos dentro do formulário estão a tocar nas bordas do contentor, o que não fica muito bem.

Isto é uma correção fácil!

Clique na opção Layout no menu Avançado, no painel esquerdo, para aceder às definições de margem e preenchimento. Adicionámos simplesmente algum preenchimento e os resultados estão ótimos!

Neste ponto, estamos prontos para publicar o seu formulário. Mas se desejar experimentar personalizações adicionais, sinta-se à vontade para passar mais tempo aqui e explorar diferentes opções.

Quando estiver pronto, prima o botão Publicar na parte inferior.

Verá imediatamente uma mensagem a surgir a perguntar se deseja ver a sua página publicada agora.

Prossiga e veja a sua página após a publicação.

E é tudo!

Acabou de adicionar um formulário de inscrição personalizado usando Elementor e WPForms.

Com isto, pode garantir que o seu formulário tem um aspeto único para o seu website e está equipado com integrações que poupam tempo para o ajudar a aumentar os seus subscritores de e-mail sem qualquer problema!

FAQs sobre Formulários de Inscrição no Elementor

Ainda tem algumas questões sobre a criação de formulários de inscrição no Elementor? Aqui estão algumas perguntas que os nossos clientes nos fizeram antes.

Preciso do Elementor Pro para criar um formulário de inscrição?

Não, não precisa do Elementor Pro para criar um formulário de inscrição, desde que tenha o WPForms instalado. Pode aceder ao widget WPForms no Elementor sem precisar de atualizar para a versão Pro. No entanto, o Elementor também tem o seu próprio construtor de formulários. Se quiser criar formulários de inscrição apenas com o Elementor, precisará de uma licença Pro.

Embora o Elementor seja uma ferramenta fantástica de construção de páginas, o construtor de formulários do Elementor é mais básico e tem várias limitações em comparação com construtores de formulários avançados como o WPForms.

Como posso estilizar o meu formulário de inscrição para corresponder à marca do meu website?

A forma mais fácil de fazer com que os seus formulários de inscrição correspondam à marca do website é usar as cores do tema do seu site para diferentes aspetos do seu formulário. O WPForms seleciona automaticamente as cores primárias e secundárias do seu tema, para que possa facilmente usar estas cores para diferentes componentes do seu formulário, como as bordas, rótulos e botões.

Pode aceder a estas definições de personalização de estilo no widget WPForms do Elementor clicando no separador Estilo. Lá, encontrará a opção de alterar a cor de diferentes partes do seu formulário escolhendo entre as cores de tema disponíveis para corresponder à sua marca. Não é necessário qualquer código!

Posso usar CSS personalizado para estilizar o meu formulário de inscrição?

Sim, pode adicionar classes CSS personalizadas ao seu formulário de inscrição se estiver a usar o WPForms. Para fazer isto, clique em Estilo após selecionar o widget WPForms no Elementor, depois clique em Avançado. Pode então inserir CSS personalizado para estilizar o seu formulário de inscrição.

Como posso criar um formulário de inscrição de vários passos?

O WPForms oferece várias formas de criar um formulário de inscrição de vários passos. Pode adicionar quebras de página para dividir o seu formulário em várias páginas, ou pode usar o suplemento Formulários de Captura que transforma automaticamente um formulário normal num formulário de inscrição de vários passos com quebras de página entre eles.

Em seguida, Crie um Formulário de Conversão Personalizado

O WPForms integra-se com v acriar um formulário ConvertKit personalizado. Certifique-se de consultá-lo!

Tamb formulários de encomenda gratuitos se estiver a vender produtos online.

Criar Formulários de Inscrição Personalizados no Elementor

Pronto para criar o seu formulário de inscrição personalizado? Comece hoje mesmo com o plugin construtor de formulários WordPress mais f formulários gratuitos e oferece uma garantia de devolu 14 dias.

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