Como Personalizar Formulários WordPress no Elementor

Personalizar formulários WordPress no Elementor pode transformar completamente a aparência e a sensação dos seus formulários, fazendo com que eles se integrem perfeitamente ao restante do seu site.

Com o WPForms e o construtor Elementor, você pode ter controle total sobre a estilização, ajustando tudo, desde cores e fontes até espaçamento e layout.

Neste artigo, mostrarei como personalizar seus formulários WordPress favoritos no Elementor. Além disso, apresentarei alguns de nossos modelos de formulário mais populares que você pode 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 exibir sua marca específica, personalização e intenção. E com os construtores intuitivos oferecidos pelo WPForms e Elementor, a personalização é muito fácil.

Instale e Ative os Plugins

É desnecessário dizer que você precisará do WPForms e do Elementor para seguir estas etapas.

Mas vamos dizer mesmo assim: certifique-se de instalar e ativar os plugins WPForms e Elementor no seu painel do WordPress.

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

Agora, você está pronto para começar a personalizar. Mostraremos como fazer isso no Elementor, começando com o essencial para um contato básico. Em seguida, construiremos sobre esses elementos (trocadilho intencional) para cada exemplo de formulário à medida que eles se tornam um pouco mais complexos.

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

Formulário de Contato

Um Formulário de Contato é um dos formulários mais necessários em seu site e continua sendo nosso modelo de formulário mais popular.

Para criar um Formulário de Contato com o Elementor, primeiro navegue até o painel do seu 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 permite incorporar seu formulário de contato e ajustar vários elementos da página.

Agora, o construtor de páginas Elementor será aberto, onde você pode arrastar e soltar todos os tipos de blocos e elementos para incluir em uma página.

Continue e arraste o bloco WPForms e solte-o na página. Agora, você pode selecionar um formulário em um menu suspenso aqui, ou pode adicionar um novo formulário.

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

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

Primeiro, Nomeie Seu Formulário digitando na caixa na parte superior da tela. Daremos o nome "Formulário de Contato" para sabermos onde e como usá-lo mais tarde.

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

Você pode usar um modelo de formulário em branco para construir seu formulário do zero, ou pode ter um começo rápido usando um modelo específico que já vem pronto com todos os campos necessários para você começar.

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

Você pode rolar a página para navegar pelos modelos ou pesquisar algo específico. Pesquisar por um "Formulário de Contato", por exemplo, retornará todos os tipos de modelos de formulário de contato para você escolher.

Usaremos o modelo de Formulário de Contato Simples para construir nosso formulário.

Este é um dos nossos modelos de formulário mais populares, então recomendamos que você o use para aproveitar seus benefícios também!

E, como sempre, este modelo de formulário é fácil de personalizar com campos e configurações adicionais. Simplesmente clique e segure no campo desejado e arraste-o para o seu formulário. Em seguida, basta clicar no campo para editá-lo.

Com o modelo de Formulário de Contato Simples, seu formulário coleta o nome do seu usuário, para que você possa personalizar qualquer correspondência com ele, e também encaminha uma mensagem ou comentário dele para você.

Um elemento adicional de personalização a ser considerado em seu formulário é a mensagem de confirmação que seus usuários recebem ao enviar o formulário. Navegue até a seção Configurações do construtor de formulários e clique na guia Confirmações.

Aqui, você pode editar a mensagem que aparece na tela depois que o usuário do seu formulário clica em "Enviar".

Em nosso modelo de Formulário de Contato Simples, a mensagem de confirmação diz: "Obrigado por entrar em contato! Entraremos em contato em breve."

Como observação, todos os modelos de formulário que oferecemos em nossa galeria vêm prontos com uma Mensagem de Confirmação relevante para seus usuários, mas nós o incentivamos a editar esta mensagem como achar melhor!

Quando terminar qualquer personalização do formulário, clique no botão Salvar na parte superior. Você 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 do Elementor.

Com nosso Modelo de Formulário de Contato incorporado à página, podemos agora personalizar os estilos do formulário.

Clique na guia 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 já vêm com imagem de fundo, cores e outros estilos pré-definidos para você.

É uma maneira fácil de obter um visual coeso e personalizado sem gastar muito esforço na estilização!

Em nosso formulário, usamos as configurações de Estilo do Campo para aumentar o raio e a cor da borda com apenas alguns cliques.

Você pode ver como algumas personalizações rápidas têm um grande efeito na estilização desta página de formulário.

Que tipos de estilização você criará?

Certifique-se de publicar 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, vamos aprofundar esses passos para personalizar mais páginas de formulário com o Elementor.

Crie Seu Formulário de Contato no Elementor! :)

Formulário de Inscrição em Newsletter

Outro tipo comum de formulário que você pode querer em seu site é um Formulário de Inscrição para Newsletter.

Para personalizar este formulário no Elementor, você começará com os primeiros passos acima: adicionando e editando uma nova página com o Elementor, usando o bloco WPForms para adicionar um novo formulário e selecionando um modelo para usar no formulário.

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

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

Em seguida, você 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 evitar inscrições de spam e até mesmo recursos de geolocalização.

Quanto à mensagem de confirmação, ela é mais uma vez cuidada para você graças ao modelo.

Como sempre, encorajamos você a escrever a mensagem que desejar que seus novos assinantes recebam. Enquanto isso, diz: "Obrigado por se inscrever na newsletter! Entraremos em contato em breve."

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

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

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

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

Em seguida, volte sua atenção para o botão Enviar.

Como você pode ver em nosso formulário, usamos 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 restante da nossa estilização.

E para obter uma correspondência de cor perfeita, simplesmente copiamos a cor rosa que escolhemos com o seletor de cores nos Estilos de Rótulo e a colamos no seletor de cor de Fundo para os Estilos de Botão.

Em seguida, vamos ficar 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 para Acampamento

Formulários de inscrição são alguns dos nossos modelos mais procurados, com modelos de formulários para inscrições em acampamentos sendo os de maior demanda, recentemente.

Vamos passar rapidamente pela maioria das etapas que já cobrimos aqui e pular direto 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 Inscrição para Acampamento de Escoteiras da seleção em nossa galeria.

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

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

Esta aba de configurações nos permite fazer muito em termos de estilo com o bloco WPForms, incluindo o upload de uma imagem para um plano de fundo personalizado.

Clique na aba Plano de Fundo abaixo das configurações Avançadas para criar seu plano de fundo. e certifique-se de que o Tipo de Plano de Fundo esteja definido como Clássico.

Em seguida, você pode fazer o upload de uma imagem para ser o plano de fundo exibido no bloco WPForms.

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

Com 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 Inscrição no Elementor! 🙂

Formulário de Pedido do Cliente

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

Mais uma vez, vamos pular as etapas que já cobrimos e ir direto para as personalizações. Para o nosso formulário aqui, usaremos nosso modelo de formulário de pedido mais popular: o Modelo de Formulário de Pedido do Cliente.

Agora, voltaremos às configurações Avançadas do bloco WPForms. Também revisitaremos a aba Plano de Fundo, mas desta vez, o Tipo de Plano de Fundo é Gradiente.

Com as configurações de Gradiente, você pode misturar e combinar qualquer tipo de combinação de cores que possa imaginar, que será aplicada em um gradiente no plano de fundo do seu formulário de pedido.

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

Agora, isso é apenas arranhar a superfície de todas as opções de personalização e estilo que você tem com WPForms e Elementor. Portanto, certifique-se de dar uma olhada em nossos tutoriais e artigos adicionais sobre Elementor.

Crie um Formulário de Pedido no Elementor! 🙂

Perguntas frequentes sobre como personalizar formulários do WordPress no Elementor

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

Preciso do Elementor para WordPress?

Você não precisa necessariamente do plugin Elementor para o seu site WordPress, mas ele é incrivelmente útil.

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

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

O Elementor está disponível em versões gratuita e premium, então você sempre pode começar com a versão gratuita e fazer o upgrade se necessário, tornando-o adaptável às suas necessidades.

Como personalizo um formulário no WordPress?

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

Como acessar formulários do Elementor?

Para acessar os formulários do Elementor, adicione o widget WPForms no editor do Elementor. Abra uma página no Elementor, arraste o widget WPForms para a página e selecione o formulário que deseja exibir. Isso permite personalizar a aparência do formulário diretamente no Elementor.

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

Parabéns! Você está a caminho de criar formulários incríveis no Elementor. Embora o Elementor possa armazenar as entradas do seu formulário no seu painel do WordPress, há momentos em que você pode querer manter uma cópia das entradas e leads do seu formulário em uma Planilha Google. Tente conectar esses formulários ao Google Sheets. 

Crie seu formulário WordPress agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.