Como Personalizar Formulários WordPress no Elementor

Personalizar formulários WordPress no Elementor pode transformar completamente a forma como os seus formulários se apresentam, fazendo com que se integrem perfeitamente com o resto do seu website.

Com o WPForms e o construtor Elementor, pode obter controlo total sobre o estilo, ajustando tudo, desde cores e tipos de letra a espaçamento e layout.

Neste artigo, mostrarei como personalizar os seus formulários WordPress favoritos no Elementor. Além disso, apresentarei alguns dos nossos modelos de formulário mais populares que poderá querer adquirir.

Personalize Formulários WordPress no Elementor! :)

Como Personalizo um Formulário no Elementor?

Personalizar um formulário para o seu site é uma ótima maneira de mostrar a sua marca específica, personalização e intenção. E com os construtores intuitivos oferecidos pelo WPForms e Elementor, a personalização é uma brisa.

Instalar e Ativar os Plugins

É desnecessário dizer que precisará do WPForms e do Elementor para seguir estes passos.

Mas vamos dizê-lo na mesma: Certifique-se de que instala e ativa os plugins WPForms e Elementor no seu painel WordPress.

Para obter instruções completas sobre como instalar plugins no seu website, consulte este guia útil.

Agora, está pronto para começar a personalizar. Mostraremos como o fazer no Elementor, começando com os elementos essenciais necessários para contactos básicos. Em seguida, construiremos sobre estes elementos (trocadilho intencional) para cada exemplo de formulário à medida que se tornam um pouco mais complexos.

Quer ainda mais inspiração? Veja esta abordagem diferente para adicionar e personalizar formulários WordPress no Elementor.

Formulário de Contacto

Um Formulário de Contacto é um dos formulários mais necessários no seu website e continua a ser o nosso modelo de formulário mais popular.

Para criar um Formulário de Contacto com o Elementor, navegue primeiro para o seu painel WordPress. Clique em Páginas na barra lateral e, em seguida, em Adicionar Nova.

Em seguida, clique no botão azul Editar com Elementor para carregar o construtor de páginas Elementor, que lhe permite incorporar o seu formulário de contacto e adaptar vários elementos da página.

Agora, o construtor de páginas Elementor abrirá, onde pode arrastar e largar todo o tipo de blocos e elementos para incluir numa página.

Arraste o bloco WPForms e solte-o na página. Agora, pode selecionar um formulário num menu suspenso aqui, ou pode adicionar um novo formulário.

Vamos clicar em + Novo Formulário para colocar o nosso formulário no bloco.

O construtor WPForms será então carregado para que possa personalizar o formulário que deseja usar no Elementor.

Primeiro, Dê um Nome ao seu Formulário digitando na caixa no topo do ecrã. Daremos o nome "Formulário de Contacto" para sabermos onde e como usá-lo mais tarde.

Em seguida, Selecione um Modelo da galeria para construir o seu formulário.

Pode usar um modelo de formulário em branco para construir o seu formulário do zero, ou pode começar por usar um modelo específico que já está pré-feito com todos os campos necessários para começar.

Para o nosso Formulário de Contacto, usaremos um modelo.

Pode rolar a página para ver os modelos, ou pode procurar algo específico. Procurar por "Formulário de Contacto", por exemplo, apresentará todo o tipo de modelos de formulário de contacto à sua escolha.

Utilizaremos o modelo Formulário de Contacto Simples para criar o nosso formulário.

Este é um dos nossos modelos de formulário mais populares, pelo que recomendamos que também o utilize para usufruir dos seus benefícios!

E, como sempre, este modelo de formulário é fácil de personalizar com campos e definições adicionais. Basta clicar e segurar no campo desejado e arrastá-lo para o seu formulário. Em seguida, basta clicar no campo para o editar.

Com o modelo Formulário de Contacto Simples, o seu formulário recolhe o nome do seu utilizador, para que possa personalizar qualquer correspondência com ele, e também lhe transmite uma mensagem ou comentário dele.

Um elemento de personalização adicional a considerar no seu formulário é a mensagem de confirmação que os seus utilizadores recebem quando enviam o seu formulário. Navegue para a secção Definições do construtor de formulários e clique no separador Confirmações.

Aqui, pode editar a mensagem que aparece no ecrã depois de o utilizador do seu formulário clicar em "Enviar".

No nosso modelo Formulário de Contacto Simples, a mensagem de confirmação diz: "Obrigado por nos contactar! Entraremos em contacto consigo em breve."

Como nota, todos os modelos de formulário que oferecemos na nossa galeria vêm prontos com uma Mensagem de Confirmação relevante para os seus utilizadores, mas encorajamo-lo a editar esta mensagem como bem entender!

Quando terminar quaisquer personalizações no formulário, clique no botão Guardar no topo. Pode fechar o construtor de formulários clicando no X no canto direito da janela do construtor de formulários.

Agora, voltaremos ao construtor de páginas Elementor.

Com o nosso Modelo de Formulário de Contacto incorporado na página, podemos agora personalizar os estilos do formulário.

Clique no separador Estilo para abrir todas as opções do menu. Podemos editar o estilo dos campos, rótulos, botões e muito mais.

Ou, simplesmente utilize um dos muitos Temas fornecidos aqui que têm a imagem de fundo, cores e outros estilos pré-feitos para si.

É uma forma fácil de obter um aspeto coeso e personalizado sem gastar muito esforço a estilizar!

No nosso formulário, utilizámos as definições de Estilo do Campo para aumentar o raio e a cor da borda com apenas alguns cliques.

Pode ver como apenas algumas personalizações rápidas têm um efeito considerável no estilo desta página de formulário.

Que tipos de estilo irá criar?

Certifique-se de publicar a sua página de formulário quando terminar de personalizar os estilos do formulário.

Simplesmente clique no botão Publicar na barra de ferramentas inferior.

Agora, iremos aprofundar estes passos para personalizar mais páginas de formulário com o Elementor.

Crie o seu Formulário de Contacto no Elementor! :)

Formulário de Inscrição na Newsletter

Outro tipo comum de formulário que pode querer no seu website é um Formulário de Inscrição para Newsletter.

Para personalizar este formulário no Elementor, começará com os primeiros passos acima: adicionar e editar uma nova página com o Elementor, usar o bloco WPForms para adicionar um novo formulário e selecionar um modelo para usar como formulário.

Como este formulário é um que os visitantes do seu site usarão para se inscrever para receber newsletters suas, você vai querer um modelo que inclua campos para recolher os seus nomes e endereços de e-mail.

Portanto, usaremos o Modelo de Formulário de Inscrição para Newsletter.

Em seguida, pode usar o construtor de formulários para incluir campos adicionais como uma caixa de seleção de termos e condições, CAPTCHA personalizado para prevenir inscrições de spam e até funcionalidades de geolocalização.

Quanto à mensagem de confirmação, é mais uma vez tratada por si graças ao modelo.

Como sempre, encorajamo-lo a escrever a mensagem que desejar que os seus novos subscritores recebam. Entretanto, diz: "Obrigado por se inscrever na newsletter! Entraremos em contacto em breve."

Não se esqueça de guardar o seu Formulário de Inscrição para Newsletter sempre que terminar, antes de sair.

Depois, de volta ao Elementor, podemos mais uma vez personalizar o estilo do formulário. Desta vez, vamos alterar os Estilos de Campo, os Estilos de Rótulo e os Estilos de Botão.

Vamos personalizar os Estilos de Campo aqui, como fizemos no formulário de contacto acima: aumentando o raio da borda para 10 píxeis e mudando a sua cor para preto.

Agora, vamos também focar-nos nos Estilos de Rótulo. Para tornar os rótulos do formulário mais proeminentes, aumente o seu tamanho. Vamos também escolher uma cor divertida para usar nas mensagens de erro. Pode ver esta cor usada nos asteriscos nos rótulos dos campos.

Em seguida, volte a sua atenção para o botão de Envio.

Como pode ver no nosso formulário, usámos os Estilos de Botão para aumentar o tamanho do botão, juntamente com as cores do fundo e da borda para combinar com o resto do nosso estilo.

E para obter uma correspondência de cor perfeita, simplesmente copiámos a cor rosa que escolhemos com o seletor de cores nos Estilos de Rótulo, e colámo-la no seletor de cor de Fundo para os Estilos de Botão.

Em seguida, vamos ser ainda mais criativos com todas as opções de estilo de formulário no Elementor.

Crie um Formulário de Newsletter no Elementor! :)

Formulário de Inscrição em Eventos

Os formulários de registo são alguns dos nossos modelos mais procurados, com modelos de formulários para registos de acampamento a serem os mais procurados, recentemente.

Vamos passar rapidamente pela maioria dos passos que já cobrimos aqui, e saltar diretamente para a seleção de um modelo de formulário do WPForms.

Para este formulário, vá em frente e pegue o modelo de Formulário de Registo de Acampamento de Escuteiras da seleção na nossa galeria.

Não nos preocuparemos muito em editar os campos do formulário ou a mensagem de confirmação, embora seja mais do que bem-vindo para personalizar o modelo para corresponder às necessidades da sua organização.

Em seguida, dentro do construtor de páginas Elementor, vamos trabalhar nas configurações Avançadas.

Este separador de configurações permite-nos fazer muito em termos de estilo com o bloco WPForms, incluindo o carregamento de uma imagem para um fundo personalizado.

Clique no separador Background abaixo das definições Avançadas para criar o seu fundo. e certifique-se de que o Tipo de Fundo está definido como Clássico.

Em seguida, pode carregar uma imagem para ser o fundo exibido no bloco WPForms.

Embora exija alguma configuração do tamanho da imagem de fundo, posição e outros elementos, esta funcionalidade de personalização vale o esforço.

Com o nosso exemplo acima, por exemplo, provavelmente gostaríamos de editar as cores do texto, margens e alinhamento, e outros elementos do formulário antes de publicar.

Crie um Formulário de Registo no Elementor! :)

Formulário de Encomenda de Cliente

Não podemos escrever um artigo com modelos de formulários e não mencionar os nossos modelos de formulários de encomenda.

Vamos novamente saltar os passos que já cobrimos e ir diretamente para as personalizações. Para o nosso formulário aqui, usaremos o nosso modelo de formulário de encomenda mais popular: o Modelo de Formulário de Encomenda do Cliente.

Agora, voltamos às definições Avançadas do bloco WPForms. Estamos também a revisitar o separador Background, mas desta vez, o Tipo de Fundo é Gradiente.

Com as definições de Gradiente, pode misturar e combinar qualquer tipo de combinação de cores que consiga imaginar, que será aplicada num gradiente no fundo do seu formulário de encomenda.

O resultado final é deslumbrante e as opções de personalização são infinitas.

Agora, isto é apenas arranhar a superfície de todas as opções de personalização e estilo que tem com WPForms e Elementor. Por isso, certifique-se de dar uma vista de olhos nos nossos tutoriais e artigos adicionais sobre Elementor.

Crie um Formulário de Encomenda no Elementor! :)

FAQs sobre Como Personalizar Formulários WordPress no Elementor

Personalizar formulários no Elementor é um tópico popular de interesse entre os nossos leitores. Aqui estão respostas a algumas perguntas comuns sobre o assunto:

Preciso do Elementor para WordPress?

Não precisa necessariamente de obter o plugin Elementor para o seu site WordPress, mas é incrivelmente útil.

Elementor é um plugin construtor de páginas que oferece uma interface de arrastar e soltar, tornando-o ideal para aqueles sem fortes competências de codificação ou experiência em design. Oferece personalização extensiva, permitindo-lhe criar os layouts e designs de site desejados.

Portanto, precisar dele para o seu site WordPress depende dos seus requisitos e preferências específicas. Se se sente confortável com HTML, CSS e tem fortes competências de design, pode não precisar do Elementor.

Elementor está disponível em versões gratuitas e premium, pelo que pode sempre começar com a versão gratuita e atualizar se necessário, tornando-o adaptável às suas necessidades.

Como personalizo um formulário no WordPress?

Para personalizar um formulário no WordPress, pode usar o WPForms com o Elementor. Primeiro, crie o seu formulário no WPForms, depois abra o editor Elementor, adicione o widget WPForms e escolha o formulário que criou. A partir daí, use as ferramentas de design do Elementor para alterar cores, fontes e layout para corresponder ao estilo do seu site.

Como aceder aos formulários do Elementor?

Para aceder aos formulários Elementor, adicione o widget WPForms no editor Elementor. Abra uma página no Elementor, arraste o widget WPForms para a página e selecione o formulário que pretende exibir. Isto permite-lhe personalizar a aparência do formulário diretamente no Elementor.

Em seguida, Conecte os Formulários Elementor ao Google Sheets

Parabéns! Está bem encaminhado para criar formulários incríveis no Elementor. Embora o Elementor possa armazenar as suas submissões de formulário no seu painel WordPress, há momentos em que pode querer manter uma cópia das suas submissões de formulário e leads numa folha do Google. Tente conectar estes formulários ao Google Sheets. 

Crie o Seu Formulário WordPress Agora

Pronto para construir o seu formulário? Comece hoje com o plugin construtor 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 o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.