Gostaria de adicionar os seus formulários WordPress a um popup Elementor? Se já estiver a executar o Elementor Pro no seu sítio, poderá querer utilizar a sua ferramenta pop-up integrada para apresentar um formulário.
Este tutorial irá mostrar-lhe como configurar e utilizar um popup Elementor com WPForms.
Neste artigo
Requisitos: O construtor de pop-ups Elementor só está disponível com o Elementor Pro.
Se não tiver o Elementor Pro, mas ainda assim quiser criar um formulário pop-up, consulte o nosso guia sobre como criar um formulário de contacto pop-up.
Antes de começar, certifique-se de que instala e ativa o WPForms no seu site WordPress e verifica a sua chave de licença.
Criar um popup
Para criar um novo popup com o Elementor, terá de aceder a Templates " Popups na barra lateral da sua área de administração do WordPress. Em seguida, clique no botão verde Adicionar novo pop-up.
Isto abrirá uma sobreposição que lhe permitirá dar um nome ao seu popup. Para o nosso exemplo, vamos chamar ao nosso modelo Contact Us.
Em seguida, clique no botão verde Criar modelo.
Incorporar o seu formulário
A seguir, verá outra sobreposição com a biblioteca de modelos do Elementor, onde pode escolher um modelo pré-fabricado para o seu pop-up.
Para este exemplo, vamos clicar no botão X para sair da biblioteca de modelos e construir manualmente o nosso popup a partir do zero.
No construtor de modelos principal, procure nos widgets da barra lateral esquerda o widget WPForms. Em seguida, clique e arraste-o para o construtor.
Depois de ter adicionado o widget WPForms ao seu popup, pode incorporar um formulário existente ou criar um novo.
Incorporar um formulário existente
No widget WPForms Elementor, verá um menu pendente onde pode selecionar o nome do formulário existente que gostaria de incorporar.
Se pretender fazer alterações a este formulário, pode fazê-lo diretamente a partir do criador de pop-ups, clicando na ligação Editar o formulário selecionado na barra lateral.
Isto abrirá um popup com o construtor de formulários WPForms para que possa editar e guardar as alterações ao seu formulário.
Criar um novo formulário
Se pretender criar um novo formulário para o seu popup, clique no botão + Novo formulário no painel do lado esquerdo.
Isso abrirá um pop-up com o construtor de formulários WPForms, onde você pode nomear seu formulário, selecionar um modelo e começar a personalizá-lo.
Certifique-se de que guarda o formulário antes de fechar o construtor. Se decidir voltar atrás e fazer alterações ao novo formulário, clique na ligação Editar o formulário selecionado na barra lateral esquerda para reabrir o construtor de formulários.
Nota: Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre como criar o seu primeiro formulário. Além disso, consulte o nosso modelo de formulário Elementor de várias páginas se pretender utilizar um modelo de formulário pré-construído.
Personalização do formulário
Depois de adicionar um formulário ao seu pop-up, também pode ajustar o seu aspeto para corresponder ao aspeto do seu sítio Web a partir do separador Estilo do construtor do Elementor.
O separador Estilo permite-lhe ajustar o estilo dos campos, etiquetas e botões do formulário sem necessitar de quaisquer conhecimentos de CSS.
Para saber mais, consulte o nosso guia sobre como personalizar os seus formulários.
Ativar o envio de formulários AJAX
Quer adicione um formulário existente ao seu popup ou crie um novo, é uma boa ideia verificar se a submissão de formulários AJAX está activada. Isto evitará que o seu popup feche após a submissão e oculte a mensagem de confirmação do formulário.
O envio AJAX é ativado por predefinição para todos os novos formulários. No entanto, pode verificar se esta opção está activada clicando na ligação Editar o formulário selecionado na barra lateral do construtor de pop-ups e indo a Definições " Geral no construtor de formulários.
Em seguida, na secção Avançadas, certifique-se de que a definição Ativar envio de formulário AJAX está activada.
Guarde as suas alterações antes de fechar o criador de formulários.
Ativar Prevenir fecho na sobreposição
Depois de ter escolhido e incorporado o seu formulário, terá de configurar uma opção para o seu popup para evitar que o formulário feche se incluir um campo de Carregamento de Ficheiro ou de Data/Hora.
Clique no ícone de engrenagem na barra de menu inferior do Elementor para abrir as definições do pop-up. No separador Advanced (Avançado ), active a opção Prevent Closing on Overlay (Impedir fecho em sobreposição ).
Quando terminar de configurar o popup, clique no botão Publicar no canto inferior esquerdo do ecrã.
Configurar definições de popup
Antes de o Elementor publicar o seu popup, terá de configurar as definições para Condições, Accionadores e Regras Avançadas. Essas opções aparecerão quando você clicar no botão Publicar no construtor de pop-ups.
Para este exemplo, vamos definir as condições para mostrar o nosso popup em todo o nosso sítio.
Também definiremos o acionador do pop-up para a configuração No carregamento da página.
Desta forma, os nossos utilizadores verão o nosso popup, independentemente da página que visitarem, assim que esta carregar.
Não adicionaremos nenhuma regra avançada ao nosso exemplo. Quando terminar de configurar as definições do seu popup, clique no botão Guardar e fechar .
Nota: Se quiser saber mais sobre o que cada definição de pop-up faz, consulte a documentação completa do Elementor.
O seu popup será então publicado. Pode visitar o frontend do seu sítio para o ver.
É isso mesmo! Agora pode adicionar o seu formulário WordPress a um popup Elementor.
A seguir, gostaria de saber como captar leads, mesmo quando os utilizadores não terminam totalmente os seus formulários? Não deixe de conferir nosso guia sobre o addon Abandono de formulário.