Gostaria de adicionar um formulário WordPress ao seu site usando o Elementor? Pode utilizar facilmente o widget WPForms Elementor para adicionar formulários às suas páginas e editá-los para que tenham o aspeto que pretende. Melhor ainda, você pode fazer tudo isso diretamente do construtor de páginas Elementor.
Este tutorial irá mostrar-lhe como adicionar WPForms a uma página Elementor.
Antes de começar, certifique-se de que instalou e activou o plugin WPForms e verificou a sua chave de licença.
1. Ativar a marcação moderna
Nota: Se já tiver ativado o Modern Markup nas definições do WPForms, pode ignorar esta secção e avançar para a secção Incorporar o seu formulário neste guia.
Antes de estilizar os seus formulários no Elementor, terá de ativar a marcação moderna no WPForms. Para o fazer, aceda a WPForms " Definições e selecione o separador Geral.
Em seguida, desloque-se para a secção Geral e certifique-se de que a opção Incluir estilo do formulário está definida para Estilo do tema base e do formulário.
Depois disso, coloque o botão de alternância Utilizar marcação moderna na posição ON para o ativar.
Certifique-se de que guarda as suas alterações depois de ativar esta opção. Assim que a marcação moderna estiver activada, está pronto para estilizar os seus formulários utilizando o Elementor, conforme descrito nas secções seguintes.
2. Incorporar o seu formulário
Em primeiro lugar, tem de abrir a página ou publicação onde pretende incorporar o formulário.
Se não vir o construtor Elementor quando abrir pela primeira vez o editor de páginas ou de posts, clique no botão azul Editar com o Elementor.
Depois de abrir o construtor Elementor, olhe para a barra lateral esquerda. Na secção Widgets básicos, deverá ver um widget denominado WPForms.
Vá em frente e arraste o widget WPForms para a área de widgets no lado direito do ecrã.
Em seguida, terá de escolher entre adicionar um formulário existente ou criar um novo no Elementor.
Adicionar um formulário existente
Se quiser adicionar um formulário que já tenha criado a esta página, clique no menu suspenso dentro do widget WPForms. Verá todos os formulários que criou. Vá em frente e selecione o que pretende adicionar à sua página.
O Elementor mostrar-lhe-á uma pré-visualização em direto do seu formulário tal como aparecerá no seu sítio Web. Se precisar de fazer alterações ao formulário, clique no link Editar o formulário selecionado no painel à esquerda.
O construtor de formulários será aberto numa janela pop-up para que possa efetuar alterações ao formulário. Quando terminar de editar, clique em Guardar e, em seguida, clique no ícone X no canto superior direito para fechar o construtor.
Verá instantaneamente quaisquer alterações que tenha feito no construtor Elementor.
Criar um novo formulário
Se ainda não tiver quaisquer formulários, ou apenas pretender criar um novo para esta página, pode criar um novo formulário sem nunca fechar o construtor de páginas Elementor. Para o fazer, clique no botão + New Form (Novo formulário) no painel à esquerda.
O construtor de formulários WPForms aparecerá para que possa começar a criar o seu formulário, começando por adicionar um nome e escolher um modelo.
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.
Quando terminar de criar o formulário, clique no botão Guardar no canto superior direito do criador de formulários e, em seguida, clique no ícone X para o fechar.
Verá então o seu novo formulário no construtor de páginas Elementor. Se precisar de fazer mais alterações, basta clicar no link Editar o formulário selecionado no painel à esquerda.
3. Configurar as opções de ecrã
Para mostrar o título ou a descrição do formulário na página, clique para expandir as Opções de exibição do widget WPForms no painel do lado esquerdo do construtor de páginas.
Em seguida, alterne as definições para Mostrar o nome do formulário e Descrição do formulário de acordo com as suas preferências.
Também pode alterar o aspeto do formulário no frontend no separador Advanced (Avançado ) do construtor do Elementor.
Para saber como utilizar as definições aqui, consulte a documentação do Elementor sobre Opções avançadas do widget.
4. Personalizar o formulário
O WPForms integra-se com o Elementor e permite-lhe personalizar a aparência dos seus formulários. Para começar, navegue até a guia Estilo no menu da barra lateral do Elementor.
Nota: Se não vir o separador Estilo no ecrã do Elementor, terá de verificar se a opção de marcação moderna está activada no seu sítio. Consulte a secção Ativar a marcação moderna no início deste guia para saber como o fazer.
O separador Style (Estilo) no Elementor permite-lhe ajustar o estilo dos campos, etiquetas e botões do formulário sem necessitar de quaisquer conhecimentos de CSS. Encontrará também uma opção para copiar estas definições de estilo de um formulário para outro na secção Avançado.
Abordaremos cada uma destas opções com mais pormenor em seguida.
Estilos de campo
Na opção Estilos de campo, verá definições para Tamanho, Raio da margem e opções de cor para o Fundo, a margem e o Texto.
As definições de Tamanho controlam o tamanho de cada campo no seu formulário. As opções disponíveis incluem: Pequeno, Médio e Grande.
De seguida, encontra a definição Raio da margem. Isto altera o arredondamento dos cantos do campo - um número mais elevado significa cantos mais arredondados.
Em seguida, encontrará opções para atualizar as cores de Fundo, Borda e Texto dos campos do formulário. Para alterar as cores predefinidas, clique na cor adjacente à etiqueta.
Isto abre um seletor de cores, permitindo-lhe selecionar a cor pretendida. Se tiver uma cor de marca específica para os seus formulários, pode introduzir diretamente o código de cor no campo HEXA. Embora HEXA seja a unidade predefinida, também pode alterá-la para RGBA ou HSLA, conforme necessário.
Estilos de etiquetas
Em Estilos de etiqueta, verá opções para ajustar o tamanho e as cores das etiquetas do formulário. No menu pendente Tamanho, pode escolher entre Pequeno, Médio ou Grande, consoante a sua preferência.
Em seguida, encontrará opções para atualizar as cores da etiqueta, da subetiqueta e da sugestão e da mensagem de erro dos seus campos. Abaixo, explicamos as opções de cores disponíveis.
- Rótulo: Esta opção altera a cor do texto das suas etiquetas.
- Sublabel & Hint: Esta opção controla a cor dos subrótulos e dicas dos campos que aparecem quando o WPForms sugere valores aos utilizadores no frontend.
- Erro: A cor das mensagens de erro que aparecem se ocorrer um erro quando os utilizadores preenchem o formulário.
Estilos de botões
As definições de Estilos de botão permitem-lhe personalizar o estilo dos seus botões. Para alterar o tamanho do botão, clique no menu pendente Tamanho e selecione a opção que pretende utilizar.
Para dar ao botão bordas arredondadas, basta introduzir o valor no campo Raio da borda.
Em seguida, verá opções para atualizar as cores do fundo e do texto do seu botão.
Nota: A cor de fundo que definir para o seu botão também será utilizada como cor de destaque predefinida. Isto significa que a cor do estado de foco para campos, barras de progresso, botões de rádio e caixas de verificação utilizará a cor de fundo do botão.
Estilismo avançado
Nesta secção, pode adicionar quaisquer classes CSS ao seu formulário, escrevendo o nome da classe no campo Classes adicionais.
Em seguida, encontrará o código CSS que reflecte todos os estilos que adicionou ao formulário em Copiar / Colar definições de estilo.
Esta opção permite-lhe copiar estilos de um formulário para outro.
Se tiver copiado definições de estilo de outro formulário, poderá colá-las rapidamente aqui. Depois de colar o trecho de código, o formulário usará os estilos do formulário anterior.
Se pretender repor qualquer personalização que tenha adicionado ao seu formulário, clique no botão Repor definições de estilo . Isto repõe o formulário no seu estado original, sem qualquer estilo personalizado.
Depois de estilizar o seu formulário, certifique-se de que guarda as alterações, publicando a página ou guardando-a como rascunho.
5. Publicar o seu formulário
Antes de lançar o seu formulário, é uma boa ideia testá-lo e certificar-se de que funciona da forma esperada. O nosso guia sobre como testar corretamente os seus formulários WordPress antes do lançamento inclui uma lista de verificação completa para o ajudar neste processo.
Quando estiver pronto para publicar o seu formulário, clique no botão Publicar ou Atualizar na parte inferior do construtor de páginas Elementor.
É isso aí! Agora você sabe como incorporar o WPForms numa página usando o Elementor.
Em seguida, gostaria de mostrar ou ocultar campos com base nas escolhas ou entradas dos seus utilizadores nos seus formulários? Consulte o nosso guia fácil de utilização da lógica condicional inteligente para saber como implementá-la.