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

A maioria das pequenas empresas comete um erro crucial – elas usam formulários de inscrição bastante padrão que se parecem com qualquer outro formulário de inscrição na web.

Vemos repetidamente esse padrão sempre que temos a chance de verificar os formulários de nossos clientes ao responder às suas perguntas.

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

Neste guia, vamos guiá-lo pelas etapas para criar seu próprio formulário de inscrição personalizado usando a ferramenta de construtor de páginas mais popular para WordPress – Elementor.

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

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

Use os links rápidos abaixo para pular imediatamente para qualquer seção do tutorial:

Vamos começar.

Etapa 1: Instale o Elementor e o WPForms

Como a maioria das pessoas usa o Elementor para publicar suas páginas, mostraremos como criar formulários de inscrição personalizados usando o Elementor.

Se você ainda não o tem, instale o Elementor em seu site.

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

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

Embora você possa criar formulários de inscrição personalizados com aparência bonita usando uma combinação de Elementor e WPForms completamente grátis, recomendamos experimentar a licença WPForms Pro para acessar algumas ferramentas avançadas para obter melhores resultados.

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

Etapa 2: Crie ou Edite uma Página com Elementor

Você pode adicionar um formulário de inscrição a uma página existente ou a uma página totalmente nova. Geralmente, um formulário de newsletter é incorporado como uma das várias seções em uma página de destino maior. Mas criaremos uma nova página contendo apenas um formulário de inscrição para simplificar.

Para começar, abra seu painel do 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 carregará em alguns segundos. Você pode criar uma página de destino completa usando o editor de arrastar e soltar.

Na próxima etapa, usaremos o widget WPForms para criar um formulário de inscrição personalizado.

Etapa 3: Crie um Novo Formulário de Inscrição

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

Quando você inserir o widget WPForms em sua página, poderá selecionar qualquer formulário salvo que você criou 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, você pode criar o formulário de inscrição que precisa incorporar em sua página.

Mas um formulário de inscrição para newsletter seria inútil sem ser integrado à sua ferramenta de marketing por e-mail.

Em seguida, role para baixo e use a barra de pesquisa sob o painel de seleção de modelos para encontrar um modelo adequado. Usaremos o modelo Formulário de Inscrição para Newsletter para este tutorial.

Após selecionar o modelo, o construtor de formulários será carregado em sua tela. Você notará que este modelo já inclui os campos Nome e E-mail, que é basicamente tudo o que você precisa para a inscrição em newsletters.

Mas a diversão não para por aí! Podemos levar este formulário para o próximo nível e dar a ele um verdadeiro brilho.

Uma das maneiras de fazer isso é adicionando um título divertido que convida mais pessoas a se inscreverem.

Você pode fazer isso usando 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 suas Opções de Campo associadas no painel esquerdo.

O editor de texto no painel esquerdo permite adicionar qualquer trecho de texto sem nenhum código. Adicionaremos algum texto e o formataremos como Título 4. Vamos também adicionar um emoji para fazer o texto se destacar mais! 🕺

Certifique-se de pressionar o botão Atualizar Visualização abaixo do editor para ver as alterações acontecerem em seu formulário à direita.

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

Na barra lateral do construtor de formulários, clique em Configurações » Geral. Role para baixo até encontrar o campo Texto do Botão de Envio. Você pode substituir o texto padrão simplesmente digitando aqui.

Ótimo! O formulário já está tomando forma. Este é um bom momento para salvar o formulário pressionando Salvar no topo.

Mas um formulário de inscrição de newsletter seria inútil sem ser integrado à sua ferramenta de marketing por e-mail.

Na próxima etapa, mostraremos como integrar seu formulário ao seu aplicativo de marketing para que novos assinantes sejam automaticamente copiados para sua lista de assinantes.

Etapa 4: Conecte 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 você estiver usando o WPForms Lite, ainda poderá acessar a integração Constant Contact gratuitamente.

Para este exemplo, mostraremos rapidamente como conectar seu formulário de inscrição com o Brevo.

Simplesmente vá para a aba Marketing na barra lateral.

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

Se você ainda não tem o complemento, o WPForms o instalará para você quando você clicar nele.

Neste caso, estamos usando o Brevo. Clicando em Brevo na aba Marketing, recebemos um prompt para instalá-lo. Depois de pressionarmos Sim, instalar e ativar, levou 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 inserir sua Chave de API do Brevo e um apelido para a conta. Se precisar de mais ajuda para encontrar sua Chave de API do Brevo, consulte a documentação do nosso add-on Brevo para obter detalhes.

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

Assim que você estiver conectado à sua conta Brevo, uma nova lista de configurações será preenchida no painel direito.

Use os campos suspensos para configurar como seu formulário deve funcionar com sua conta Brevo. Você pode definir ações como a ação a ser executada no Brevo quando o formulário for enviado, a lista onde novos assinantes devem ser adicionados ou removidos, o mapeamento dos campos de e-mail e muito mais.

Quando terminar, certifique-se de pressionar Salvar no topo.

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

Etapa 5: Estilize seu Formulário de Inscrição e Publique

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

Embora já tenhamos tornado nosso formulário muito mais interessante adicionando 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, simplesmente saia do WPForms pressionando o botão de fechar. Agora você deve ter o editor do Elementor com seu formulário recém-criado incorporado como um widget.

Clique no formulário e, em seguida, selecione a aba Estilos localizada no painel esquerdo.

 

Nesta aba, você encontrará opções para personalizar os estilos de diferentes componentes do formulário. Por exemplo, você pode personalizar os estilos de seus campos, rótulos e botões sem nenhum código.

Em nosso formulário, as bordas dos campos são retangulares com cantos retos por padrão. Mas se você precisar de bordas de campo mais arredondadas, faça isso simplesmente aumentando o valor do raio da borda em Estilos de Campo.

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

No Elementor, você também pode alterar os estilos do contêiner do seu formulário. Para fazer isso, clique na aba Avançado.

Você encontrará um monte de configurações fascinantes aqui, incluindo ajustes de layout, efeitos de animação, personalizações de fundo e muito mais.

Vamos adicionar uma cor de fundo ao contêiner do formulário para dar a ele um visual mais vibrante. Clique na opção Fundo para expandir o menu com configurações adicionais.

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

A ferramenta de seleção de cores permite que você selecione convenientemente qualquer cor com um clique.

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

No entanto, os elementos dentro do formulário estão tocando as bordas do contêiner, o que não parece muito bom.

Esta é uma correção fácil!

Clique na opção Layout no menu Avançado, no painel esquerdo, para acessar as configurações de margem e preenchimento. Nós simplesmente adicionamos um preenchimento e os resultados estão ótimos!

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

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

Você verá imediatamente uma mensagem aparecer perguntando se você deseja ver sua página publicada agora.

Vá em frente e veja sua página após a publicação.

E é isso!

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

Com isso, você pode garantir que seu formulário tenha uma aparência única para seu site e esteja equipado com integrações que economizam tempo para ajudá-lo a aumentar seus assinantes de e-mail sem qualquer complicação!

Perguntas Frequentes sobre Formulários de Inscrição do Elementor

Você ainda tem algumas dúvidas sobre a criação de formulários de inscrição no Elementor? Aqui estão algumas perguntas que nossos clientes nos fizeram antes.

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

Não, você não precisa do Elementor Pro para criar um formulário de inscrição, desde que tenha o WPForms instalado. Você pode acessar o widget WPForms no Elementor sem precisar fazer upgrade para a versão Pro. No entanto, o Elementor também tem seu próprio construtor de formulários. Se você 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 construtor 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 meu formulário de inscrição para combinar com a identidade visual do meu site?

A maneira mais fácil de combinar seus formulários de inscrição com a identidade visual do site é usar as cores do tema do seu site para diferentes aspectos do seu formulário. O WPForms seleciona automaticamente as cores primárias e secundárias do seu tema, para que você possa usar facilmente essas cores para diferentes componentes do seu formulário, como bordas, rótulos e botões.

Você pode acessar essas configurações de personalização de estilo no widget WPForms do Elementor clicando na guia Estilo. Lá, você encontrará a opção de alterar a cor de diferentes partes do seu formulário escolhendo entre as cores de tema disponíveis para combinar com sua identidade visual. Não é necessário codificar!

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

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

Como posso criar um formulário de inscrição de várias etapas?

O WPForms oferece várias maneiras de criar um formulário de inscrição de várias etapas. Você pode adicionar quebras de página para dividir seu formulário em várias páginas, ou pode usar o addon Formulários de Leads, que transforma automaticamente um formulário regular em um formulário de inscrição de várias etapas com quebras de página entre elas.

Em seguida, Crie um Formulário ConvertKit Personalizado

O WPForms se integra a várias plataformas de marketing, incluindo o ConvertKit. Temos um guia dedicado mostrando como criar um formulário personalizado do ConvertKit. Não deixe de conferi-lo!

Você também pode comparar opções gratuitas de formulário de pedido se estiver vendendo produtos online.

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

Pronto para criar seu formulário de inscrição personalizado? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. O 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.