Resumo de IA
Gostaria de adicionar um formulário WordPress ao seu site usando o Elementor? Pode usar facilmente o widget WPForms Elementor para adicionar formulários às suas páginas e editá-los para que fiquem com o aspeto que deseja. Melhor ainda, pode fazer tudo diretamente no 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 ativou o plugin WPForms e verificou a sua chave de licença.
1. Ativar Marcação Moderna
Nota: Se já ativou a Marcação Moderna nas suas definições do WPForms, pode saltar esta secção e prosseguir 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, vá a WPForms » Definições e selecione o separador Geral.
Em seguida, navegue até à secção Geral e certifique-se de que a opção Incluir Estilo do Formulário está definida como Estilo base e tema do formulário.
Depois disso, coloque o botão de alternância Usar Marcação Moderna na posição ATIVADO para o ativar.
Certifique-se de guardar as suas alterações depois de ativar esta opção. Assim que a marcação moderna estiver ativada, estará pronto para estilizar os seus formulários usando o Elementor, conforme descrito nas secções seguintes.
2. Incorporar o seu Formulário
Primeiro, terá de abrir a página ou publicação onde gostaria de incorporar o seu formulário.
Se não vir o construtor Elementor quando abrir pela primeira vez o editor de página ou publicação, clique no botão azul Editar com Elementor.
Depois de abrir o construtor Elementor, olhe para a barra lateral esquerda. Na secção de widgets Básicos, deverá ver um widget chamado WPForms.
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 desejar adicionar um formulário que já criou a esta página, clique na lista pendente dentro do widget WPForms. Verá todos os formulários que criou. Selecione o que deseja adicionar à sua página.
O Elementor mostrar-lhe-á uma pré-visualização em tempo real do seu formulário, tal como aparecerá no seu site. Se precisar de fazer alterações ao formulário, clique na ligação Editar o formulário selecionado no painel à esquerda.
O construtor de formulários abrirá numa janela pop-up para que possa fazer alterações ao seu formulário. Quando terminar de editar, clique em Guardar, depois clique no ícone X no canto superior direito para fechar o construtor.
Verá instantaneamente quaisquer alterações que fez no construtor Elementor.
Criar um Novo Formulário
Se ainda não tem formulários, ou apenas quer 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 + 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. Consulte também o nosso modelo de formulário Elementor de várias páginas se desejar usar um modelo de formulário pré-criado.
Quando terminar de criar o seu formulário, clique no botão Guardar no canto superior direito do construtor 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 na ligação Editar o formulário selecionado no painel do lado esquerdo.
3. Configurar Opções de Exibição
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, ative as definições para Mostrar o Nome do Formulário e a Descrição do Formulário de acordo com as suas preferências.
Também pode alterar a forma como o formulário é exibido no frontend no separador Avançadas do construtor do Elementor.
Para saber como usar as definições aqui, consulte a documentação do Elementor sobre opções de widgets avançados.
4. Personalizar o seu 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é ao separador Estilo no menu lateral do Elementor.
Nota: Se não vir o separador Estilo no seu ecrã Elementor, terá de verificar se a opção de marcação moderna está ativada no seu site. Consulte a secção Ativar Marcação Moderna no início deste guia sobre como fazê-lo.
O separador Estilo no Elementor permite-lhe ajustar o estilo dos campos do formulário, rótulos e botões sem necessidade de conhecimento 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çadas.
Abordaremos cada uma destas opções em mais detalhe abaixo.
Temas
A definição Temas permite-lhe escolher um tema de cores predefinido para atualizar automaticamente o estilo dos campos, rótulos, botões, recipiente e fundo do seu formulário.
Para aplicar, basta clicar no seu tema preferido, e este ajustará instantaneamente as cores dos campos, rótulos, botões, recipiente ou fundo do seu formulário.
Se personalizar definições individuais após selecionar um tema, estas alterações serão guardadas como um novo tema de formulário personalizado. Este novo tema será adicionado à sua lista de temas disponíveis e poderá ser aplicado a qualquer formulário, tal como faria com qualquer outro tema de formulário.
Também pode renomear este tema para fácil identificação no campo Nome do Tema.
Para eliminar um tema de formulário personalizado, basta clicar no botão ELIMINAR TEMA abaixo do nome do tema.
Estilos de Campo
Na opção Estilos de Campo, verá definições para Tamanho, Raio da Borda e opções de cor para o Fundo, Borda e 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.
Em seguida, encontrará a definição de Raio da Borda. Isto altera a arredondamento dos cantos dos seus campos – um número maior significa cantos mais arredondados.
Em seguida, encontrará opções para atualizar as cores de Fundo, Borda e Texto dos seus campos de formulário. Para alterar as cores predefinidas, clique na cor adjacente ao rótulo.
Isto abre um seletor de cores, permitindo que selecione a cor desejada. Se tiver uma cor de marca específica para os seus formulários, pode introduzir diretamente o código da cor no campo HEXA. Embora HEXA seja a unidade padrão, também pode alterá-la para RGBA ou HSLA conforme necessário.
Estilos de Rótulo
Em Estilos de Rótulo, verá opções para ajustar o tamanho e as cores dos seus rótulos de formulário. No menu suspenso Tamanho, pode escolher entre Pequeno, Médio ou Grande, dependendo da sua preferência.
Em seguida, encontrará opções para atualizar as cores do Rótulo, Sub-rótulo e Dica e 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 dos seus rótulos.
- Sub-rótulo e Dica: Esta opção controla a cor dos sub-rótulos e dicas de campo 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 seu formulário.
Estilos de Botão
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 suspenso Tamanho e selecione a opção que gostaria de usar.
Para dar ao botão cantos arredondados, basta introduzir o valor no campo Raio da Borda.
Em seguida, verá opções para atualizar as cores de fundo e de 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 padrão. Isto significa que a cor do estado de foco para campos, barras de progresso, botões de rádio e caixas de seleção utilizará a cor de fundo do botão.
Estilos do Recipiente
As definições de Estilos de Container permitem-lhe personalizar o preenchimento, o estilo da borda, o tamanho da borda, o raio da borda, a sombra e as cores para o container do seu formulário. Abaixo detalhámos as opções de container disponíveis.
- Preenchimento: Esta opção define o espaço dentro das bordas do container do formulário. Pode aumentar ou diminuir este valor para ajustar o espaçamento em torno do conteúdo do seu formulário.
- Borda (estilo): Esta definição permite-lhe escolher o contorno do seu contentor, com opções para uma borda Sólida, Tracejada ou Pontilhada.
- Tamanho da Borda: Determina a espessura da borda do seu contentor. A unidade padrão é píxeis (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
- Raio da Borda: Ajusta o quão arredondados são os cantos do seu contentor, adicionando uma margem mais suave ou mais definida à aparência do seu formulário. A medição padrão é em píxeis (px), mas pode ser alterada para se adequar ao seu estilo.
- Sombra: Escolha o tamanho do efeito de sombra para o seu contentor para adicionar profundidade ao design do seu formulário, com opções que variam de nenhuma a grande.
- Borda (cor): Atualize a cor da borda do seu contentor para alinhar com o seu tema visual, melhorando a estética geral do formulário.
Estilos de Fundo
As definições de Estilos de Fundo dão-lhe controlo sobre a imagem e a cor de fundo do seu formulário.
Para começar, selecione uma fonte de imagem no menu suspenso Imagem. Para imagens já carregadas no seu website ou para carregar novas, selecione a opção Biblioteca de Média. Para explorar uma seleção mais ampla de imagens profissionais, selecione a opção Fotografias de Stock.
Após fazer a sua seleção, clique na secção Escolher Imagem para prosseguir.
Se selecionar Biblioteca de Média no menu suspenso Imagem, a galeria de média do seu website será aberta, permitindo-lhe escolher uma imagem ou carregar uma nova. Se Fotografias de Stock for selecionado, ser-lhe-á apresentada uma seleção de fotografias de stock para escolher para o fundo do seu formulário.
Assim que tiver selecionado a sua imagem, a secção Estilos de Fundo oferece opções de personalização adicionais:
- Posição: Esta definição permite alinhar a sua imagem de fundo dentro do formulário selecionando opções como Topo Centro, Fundo Centro, e mais para obter a colocação perfeita.
- Repetir: Escolha como a sua imagem de fundo se repete. As opções são Sem Repetição para uma única imagem, Mosaico para repetir a imagem em todo o fundo, Repetir Horizontalmente para repetir na largura, e Repetir Verticalmente para repetir no comprimento.
- Tamanho: Isto ajusta como a sua imagem de fundo se encaixa no formulário. Cobrir garante que a imagem cobre todo o fundo, adaptando-se ao tamanho do formulário. Se Dimensões for selecionado, pode especificar a largura e altura exatas para a sua imagem.
- Cores: Esta opção permite selecionar uma cor de fundo, que será visível quando nenhuma imagem for utilizada.
Estilização Avançada
Nesta secção, pode adicionar quaisquer classes CSS ao seu formulário, digitando o nome da classe no campo Classes Adicionais.
Em seguida, encontrará o código CSS que reflete 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 copiou definições de estilo de outro formulário, poderá colá-las rapidamente aqui. Após colar o trecho de código, o formulário usará os estilos do formulário anterior.
Se desejar reverter qualquer personalização que adicionou ao seu formulário, clique no botão Redefinir Definições de Estilo. Isto restauraria o seu formulário ao seu estado original sem qualquer estilo personalizado.
Após estilizar o seu formulário, certifique-se de guardar as suas alterações publicando a página ou guardando-a como rascunho.
5. Publicar o seu Formulário
Antes de colocar o seu formulário online, é uma boa ideia testá-lo e garantir que funciona como espera. O nosso guia sobre como testar corretamente os seus formulários WordPress antes de os lançar 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.
É tudo! Agora sabe como incorporar o WPForms numa página usando o Elementor.
Em seguida, pretende mostrar ou ocultar campos com base nas escolhas ou introduções dos seus utilizadores nos seus formulários? Dê uma vista de olhos ao nosso guia fácil para usar lógica condicional inteligente para obter passos sobre como implementá-la.