Como personalizar formulários WordPress no Elementor [+ MODELOS]

Quer criar e personalizar seu próprio formulário WordPress no Elementor?

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

Neste artigo, mostraremos como personalizar seus formulários WordPress favoritos no Elementor. Além disso, apresentamos alguns de nossos modelos de formulário mais populares que você pode querer adquirir.

Crie seu formulário WordPress agora

Preciso do Elementor para WordPress?

Você não precisa necessariamente obter o plugin Elementor para o seu site WordPress, mas é extremamente útil.

Elementor é um plugin de criação de páginas que oferece uma interface de arrastar e soltar, tornando-o ideal para quem não tem grandes habilidades de codificação ou experiência em design. Ele oferece ampla personalização, permitindo que você crie os layouts e designs de site desejados.

Portanto, a necessidade 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 possui fortes habilidades de design, talvez não precise do Elementor.

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

Como personalizar formulários WordPress no Elementor

Instale e ative os plug-ins

Nem é preciso dizer que você precisará do WPForms e do Elementor para seguir essas etapas aqui.

Mas iremos em frente e diremos mesmo assim: certifique-se de instalar e ativar os plug-ins WPForms e Elementor em seu painel do WordPress.

Para obter instruções completas sobre como instalar plug-ins em seu site, consulte este guia prático.

Agora você está pronto para começar a personalizar. Mostraremos como fazer isso no Elementor, começando pelo essencial para o contato básico. Em seguida, desenvolveremos esses elementos (trocadilhos) 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 Elementor, primeiro navegue até o painel do WordPress. Clique em Páginas na barra lateral e em Adicionar novo .

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 personalizar 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.

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

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

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

Primeiro, dê um nome ao seu formulário digitando na caixa na parte superior da tela. Chamaremos nosso “Formulário de Contato” para sabermos onde e como utilizá-lo posteriormente.

Em seguida, selecione um modelo da galeria para construir seu formulário.

Você pode usar um modelo de formulário em branco para criar seu formulário do zero ou pode começar usando um modelo específico pré-fabricado com todos os campos necessários para você começar.

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

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

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

Este é um dos nossos modelos de formulário mais populares, por isso 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. Basta clicar e segurar o campo desejado e arrastá-lo para o formulário. Depois, 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 retransmite uma mensagem ou comentário dele para você.

Um elemento de personalização adicional a ser considerado em seu formulário é a mensagem de confirmação que seus usuários recebem quando enviam o formulário. Navegue até a seção Configurações do criador 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 formulário clica em “Enviar”.

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

Como observação, todos os modelos de formulário que oferecemos em nossa galeria já vêm prontos com uma mensagem de confirmação relevante para seus usuários, mas encorajamos você a editar esta mensagem da maneira que achar melhor!

Quando terminar de personalizar o 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 Elementor.

Com nosso modelo de formulário de contato incorporado na página, agora podemos personalizar os estilos do formulário. Podemos editar o estilo dos campos, rótulos, botões e muito mais.

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

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

Que tipo de estilo você criará?

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

Basta clicar no botão Publicar na barra de ferramentas inferior.

Agora, desenvolveremos essas etapas para personalizar mais páginas de formulário com Elementor.

Formulário de inscrição no boletim informativo

Outro tipo comum de formulário que você pode querer em seu site é o formulário de inscrição em boletim informativo.

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

Como este formulário é aquele que os visitantes do seu site usarão para se inscrever para receber seus boletins informativos, 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 em boletim informativo.

Em seguida, você pode usar o criador 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é recursos de geolocalização.

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

Como sempre, encorajamos você a escrever qualquer mensagem que gostaria que seus novos assinantes recebessem. Enquanto isso, diz: “Obrigado por se inscrever no boletim informativo! Entraremos em contato em breve.”

Não se esqueça de salvar o formulário de inscrição no boletim informativo sempre que terminar, antes de sair.

Então, de volta ao Elementor, podemos personalizar mais uma vez o estilo do formulário. Desta vez, vamos alterar Field Styles , Label Styles e Button Styles .

Iremos em frente e personalizaremos 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 focar também nos Label Styles. Para deixar os rótulos do formulário mais proeminentes, aumente seu tamanho. Vamos também escolher uma cor divertida para usar nas mensagens de erro. Você pode ver essa cor usada para os 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, junto com as cores de fundo e borda para combinar com o resto do nosso estilo.

E para obter uma combinação de cores perfeita, simplesmente copiamos a cor rosa que escolhemos com o seletor de cores em Label Styles e colamos no seletor de cores de fundo para Button Styles.

A seguir, seremos ainda mais criativos com todas as opções de estilo de formulário no Elementor.

Formulário de inscrição no acampamento

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

Vamos dar uma olhada na maioria das etapas que já abordamos aqui e ir direto para a seleção de um modelo de formulário em WPForms.

Para este formulário, vá em frente e pegue o modelo de formulário de inscrição no acampamento de escoteiras da seleção em nossa galeria.

Não nos preocuparemos muito com a edição dos campos do formulário ou da mensagem de confirmação, mas você pode personalizar o modelo para atender às necessidades da sua organização.

Então, dentro do construtor de páginas Elementor, vamos trabalhar nas configurações avançadas .

Esta guia 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 guia 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 em Classic .

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

Embora seja necessária alguma configuração do tamanho, posição e outros elementos da imagem de fundo, esse recurso de personalização vale o esforço.

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

Formulário de pedido do cliente

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

Mais uma vez, vamos pular as etapas que já abordamos e ir direto às personalizações. Para nosso formulário aqui, usaremos nosso modelo de formulário de pedido mais popular: o Modelo de formulário de pedido do cliente.

Agora, vamos voltar às configurações avançadas do bloco WPForms. Também estamos revisitando a aba Background , mas desta vez, o Background Type é Gradient .

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

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

Agora, isso é apenas um arranhão na superfície de todas as opções de personalização e estilo que você tem com WPForms e Elementor. Portanto, não deixe de dar uma olhada em nossos tutoriais e artigos adicionais do Elementor.

Crie seu formulário WordPress agora

Em seguida, conecte os formulários Elementor ao Planilhas Google

Parabéns! Você está no caminho certo para criar formulários incríveis no Elementor.

Agora, tente conectar esses formulários ao Planilhas Google. Embora o Elementor possa armazenar as entradas do formulário dentro do painel do WordPress, há momentos em que você pode querer manter uma cópia das entradas do formulário e leads em uma planilha do Google.

Então, confira nosso tutorial para saber como!

Pronto para construir 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 garantia de devolução do dinheiro em 14 dias.

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