Resumo de IA
Gostaria de adicionar um formulário WordPress ao seu site usando o Elementor? Você pode usar facilmente o widget WPForms Elementor para adicionar formulários às suas páginas e editá-los para que fiquem com a aparência desejada. Melhor ainda, você pode fazer tudo isso diretamente no construtor de páginas Elementor.
Este tutorial mostrará como adicionar o WPForms a uma página do Elementor.
Antes de começar, certifique-se de ter instalado e ativado o plugin WPForms e verificado sua chave de licença.
1. Habilitando a Marcação Moderna
Observação: Se você já habilitou a Marcação Moderna nas configurações do WPForms, pode pular esta seção e prosseguir para a seção Incorporando seu Formulário neste guia.
Antes de estilizar seus formulários no Elementor, você precisará habilitar a marcação moderna no WPForms. Para fazer isso, vá para WPForms » Configurações e selecione a aba Geral.
Em seguida, role até a seção Geral e certifique-se de que a opção Incluir Estilização do Formulário esteja definida como Estilização base e do tema do formulário.
Depois disso, defina o botão de alternância Usar Marcação Moderna para a posição LIGADO para habilitá-lo.
Certifique-se de salvar suas alterações após habilitar esta opção. Assim que a marcação moderna estiver habilitada, você estará pronto para estilizar seus formulários usando o Elementor, conforme descrito nas seções a seguir.
2. Incorporando seu Formulário
Primeiro, você precisará abrir a página ou post onde deseja incorporar seu formulário.
Se você não vir o construtor do Elementor ao abrir o editor de páginas ou posts pela primeira vez, clique no botão azul Editar com Elementor.
Depois de abrir o construtor do Elementor, olhe para a barra lateral esquerda. Na seção de widgets Básicos, você deverá ver um widget chamado WPForms.
Arraste o widget WPForms para a área de widgets no lado direito da tela.
Em seguida, você precisará escolher entre adicionar um formulário existente ou criar um novo no Elementor.
Adicionando um Formulário Existente
Se você deseja adicionar um formulário que já criou a esta página, clique no menu suspenso dentro do widget WPForms. Você verá todos os formulários que criou. Selecione o que deseja adicionar à sua página.
O Elementor mostrará uma prévia ao vivo do seu formulário como ele aparecerá em seu site. Se precisar fazer alterações no formulário, clique no link Editar o formulário selecionado no painel à esquerda.
O construtor de formulários será aberto em uma janela pop-up para que você possa fazer alterações em seu formulário. Quando terminar de editar, clique em Salvar e, em seguida, clique no ícone X no canto superior direito para fechar o construtor.
Você verá instantaneamente quaisquer alterações feitas no construtor do Elementor.
Criando um Novo Formulário
Se você ainda não tem nenhum formulário ou quer criar um novo para esta página, pode criar um novo formulário sem fechar o construtor de páginas do Elementor. Para fazer isso, clique no botão + Novo Formulário no painel à esquerda.
O construtor de formulários do WPForms será aberto para que você possa começar a criar seu formulário, começando por adicionar um nome e escolher um modelo.
Observação: Se precisar de ajuda para criar seu formulário, confira nosso guia sobre como criar seu primeiro formulário. Além disso, confira 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 seu formulário, clique no botão Salvar no canto superior direito do construtor de formulários e, em seguida, clique no ícone X para fechá-lo.
Você verá seu novo formulário no construtor de páginas do Elementor. Se precisar fazer mais alterações, basta clicar no link Editar o formulário selecionado no painel à esquerda.
3. Configurando 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 à esquerda do construtor de páginas.
Em seguida, ative as configurações para Mostrar o Nome do Formulário e a Descrição do Formulário de acordo com suas preferências.
Você também pode alterar a aparência do formulário no frontend na aba Avançado do construtor do Elementor.
Para saber como usar as configurações aqui, consulte a documentação do Elementor sobre opções avançadas de widgets.
4. Personalizando seu Formulário
O WPForms se integra ao Elementor e permite personalizar a aparência dos seus formulários. Para começar, navegue até a aba Estilo no menu lateral do Elementor.
Observação: Se você não vir a aba Estilo na sua tela do Elementor, precisará verificar se a opção de marcação moderna está habilitada em seu site. Por favor, consulte a seção Habilitando Marcação Moderna no início deste guia sobre como fazer isso.
A aba Estilo no Elementor permite ajustar o estilo dos campos, rótulos e botões do formulário sem a necessidade de conhecimento em CSS. Você também encontrará uma opção para copiar essas configurações de estilo de um formulário para outro na seção Avançado.
Abordaremos cada uma dessas opções em mais detalhes abaixo.
Temas
A configuração Temas permite que você escolha um tema de cores predefinido para atualizar automaticamente o estilo dos campos, rótulos, botões, contêiner e fundo do seu formulário.
Para aplicar, basta clicar no seu tema preferido, e ele ajustará instantaneamente as cores dos campos, rótulos, botões, contêiner ou fundo do seu formulário.
Se você personalizar configurações individuais após selecionar um tema, essas alterações serão salvas 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, assim como qualquer outro tema de formulário.
Você também pode renomear este tema para fácil identificação no campo Nome do Tema.
Para excluir um tema de formulário personalizado, basta clicar no botão EXCLUIR TEMA abaixo do nome do tema.
Estilos de Campo
Na opção Estilos de Campo, você verá configurações para Tamanho, Raio da Borda e opções de cores para o Fundo, Borda e Texto.
As configurações de Tamanho controlam o tamanho de cada campo em seu formulário. As opções disponíveis incluem: Pequeno, Médio e Grande.
Em seguida, você encontrará a configuração de Raio da Borda. Isso altera o arredondamento dos cantos dos seus campos – um número maior significa cantos mais arredondados.
Em seguida, você encontrará opções para atualizar as cores de Fundo, Borda e Texto dos seus campos de formulário. Para alterar as cores padrão, clique na cor adjacente ao rótulo.
Isso abre um seletor de cores, permitindo que você selecione a cor desejada. Se você tiver uma cor de marca específica para seus formulários, poderá inserir diretamente o código da cor no campo HEXA. Embora HEXA seja a unidade padrão, você também pode alterá-la para RGBA ou HSLA, conforme necessário.
Estilos de Rótulo
Em Estilos de Rótulo, você verá opções para ajustar o tamanho e as cores dos seus rótulos de formulário. No menu suspenso Tamanho, você pode escolher entre Pequeno, Médio ou Grande, dependendo da sua preferência.
Em seguida, você encontrará opções para atualizar as cores de Rótulo, Sub-rótulo e Dica e mensagens 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 usuários no frontend.
- Erro: A cor das mensagens de erro que aparecem se ocorrer um erro quando os usuários preencherem seu formulário.
Estilos de Botão
As configurações de Estilos de Botão permitem 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 você gostaria de usar.
Para dar ao botão bordas arredondadas, basta inserir o valor no campo Raio da Borda.
Em seguida, você verá opções para atualizar as cores de fundo e de texto do seu botão.
Observação: A cor de fundo que você define para o seu botão também será usada como cor de destaque padrão. Isso significa que a cor do estado de foco para campos, barras de progresso, botões de rádio e caixas de seleção usará a cor de fundo do botão.
Estilos de Contêiner
As configurações de Estilos do Contêiner permitem personalizar o preenchimento, o estilo da borda, o tamanho da borda, o raio da borda, a sombra e as cores do contêiner do seu formulário. Abaixo, detalhamos as opções de contêiner disponíveis.
- Preenchimento: Esta opção define o espaço dentro das bordas do contêiner do formulário. Você pode aumentar ou diminuir esse valor para ajustar o espaçamento ao redor do conteúdo do seu formulário.
- Borda (estilo): Esta configuração permite escolher o contorno do seu contêiner, com opções de borda Sólida, Tracejada ou Pontilhada.
- Tamanho da Borda: Determina a espessura da borda do seu contêiner. A unidade padrão é pixels (px), mas você pode selecionar a unidade que melhor se adapta às suas necessidades de design.
- Raio da Borda: Isso ajusta o quão arredondados são os cantos do seu contêiner, adicionando uma borda mais suave ou mais definida à aparência do seu formulário. A medida padrão é em pixels (px), mas pode ser alterada para se adequar ao seu estilo.
- Sombra: Escolha o tamanho do efeito de sombra para o seu contêiner 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 contêiner para alinhar com seu tema visual, aprimorando a estética geral do formulário.
Estilos de Fundo
As configurações de Estilos de Fundo oferecem controle 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 em seu site 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 Fotos de Banco.
Após fazer sua seleção, clique na seção Escolher Imagem para prosseguir.
Se você selecionar Biblioteca de Mídia no menu suspenso Imagem, a galeria de mídia do seu site será aberta, permitindo que você escolha uma imagem ou carregue uma nova. Se Fotos de Banco for selecionado, você verá uma seleção de fotos de banco para escolher como fundo do seu formulário.
Depois de selecionar sua imagem, a seção Estilos de Fundo oferece opções de personalização adicionais:
- Posição: Esta configuração permite alinhar sua imagem de fundo dentro do formulário selecionando opções como Topo Centralizado, Base Centralizada e outras para obter o posicionamento perfeito.
- Repetir: Escolha como 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 Horizontal para repetir na largura, e Repetir Vertical para repetir no comprimento.
- Tamanho: Isso ajusta como sua imagem de fundo se encaixa no formulário. Cobrir garante que a imagem cubra todo o fundo, adaptando-se ao tamanho do formulário. Se Dimensões for selecionado, você pode especificar a largura e altura exatas para sua imagem.
- Cores: Esta opção permite selecionar uma cor de fundo, que será visível quando nenhuma imagem for usada.
Estilização Avançada
Nesta seção, você pode adicionar quaisquer classes CSS ao seu formulário digitando o nome da classe no campo Classes Adicionais.
Em seguida, você encontrará o código CSS refletindo todos os estilos que você adicionou ao formulário em Copiar / Colar Configurações de Estilo.
Esta opção permite copiar estilos de um formulário para outro.
Se você copiou configuraçõ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 redefinir qualquer personalização que você adicionou ao seu formulário, clique no botão Redefinir Configurações de Estilo. Isso restauraria seu formulário ao seu estado original, sem qualquer estilo personalizado.
Após estilizar seu formulário, certifique-se de salvar suas alterações publicando a página ou salvando-a como rascunho.
5. Publicando seu Formulário
Antes de colocar seu formulário no ar, é uma boa ideia testá-lo e garantir que ele funcione como você espera. Nosso guia sobre como testar corretamente seus formulários WordPress antes de lançar inclui uma lista de verificação completa para ajudá-lo neste processo.
Quando estiver pronto para publicar seu formulário, clique no botão Publicar ou Atualizar na parte inferior do construtor de páginas do Elementor.
É isso! Agora você sabe como incorporar o WPForms em uma página usando o Elementor.
Em seguida, você gostaria de mostrar ou ocultar campos com base nas escolhas ou entradas dos seus usuários em seus formulários? Dê uma olhada em nosso guia fácil de usar lógica condicional inteligente para obter etapas sobre como implementá-la.