Como alterar um estilo de formulário de contato do WordPress

Publicados: 2023-02-16

Deseja alterar o estilo do formulário de contato do WordPress? Então este guia é para você! Você aprenderá como o estilo de formulário do WordPress pode ser super fácil! Descubra mais.

Como alterar um estilo de formulário de contato do WordPress

Tempo aproximado de leitura : 6 minutos

Você só tem uma chance de causar uma primeira impressão.

E chamar a atenção dos seus visitantes com uma forma bonita é uma forma de causar uma excelente impressão.

Também é a maneira perfeita de fazê-los preencher seu formulário. Afinal, como eles podem preenchê-lo se não o veem?

Formidable Forms é o melhor plugin do WordPress Form Builder. Obtenha gratuitamente!

Então, se você está pronto para ir do básico ao bonito com seus formulários, este guia é para você.

Mostraremos duas maneiras de alterar facilmente o estilo do formulário de contato do WordPress!

Vamos entrar nisso.

Como alterar o estilo do formulário de contato do WordPress

Como mencionamos, existem duas maneiras de personalizar o estilo do seu formulário

Edite o código do seu formulário no WordPress
Use um construtor de formulários com um estilizador visual

Qual deles você escolherá dependerá do seu nível de conforto com a codificação. Mas mostraremos os dois métodos, para que você conheça todas as opções disponíveis.

Método 1: Edite o código do seu formulário no WordPress

Então, você quer mergulhar de cabeça nas águas de codificação, hein?

Presumimos que você já tenha um formulário criado e queira personalizá-lo. Se você não tiver um formulário, acesse nosso guia sobre como criar um formulário para começar.

Passo 1: Obter o ID ou classe do seu formulário

Para começar, você precisa obter o ID ou Classe do seu formulário.

Uma maneira fácil de fazer isso é ir ao seu site, clicar com o botão direito do mouse no formulário e clicar em Inspecionar . Aqui, veremos o modelo HTML do formulário dentro do seu tema filho.

A barra lateral das ferramentas do desenvolvedor do Google deslizará para fora e você poderá visualizar as diferentes seções de código do seu formulário.

O mais importante é encontrar a área que deseja personalizar e acompanhar o ID ou o nome da turma . Você usará isso para fazer alterações.

Por exemplo, se quiséssemos alterar a cor de fundo do nosso modelo de formulário Fale Conosco, encontraríamos a parte externa do código. Neste caso, é um div com a classe api-form-box .

Podemos até testar como seria a partir deste console.

Se clicarmos com o botão direito do mouse no div e clicarmos em Add Attribute , podemos adicionar um estilo de cor de fundo.

Pressione Enter e as alterações são mostradas imediatamente na janela.

Mas não se preocupe. Sempre que você atualizar a página, o formulário voltará ao normal.

Em seguida, acesse o administrador do WordPress para fazer as alterações necessárias no código CSS.

Etapa 2: altere o CSS no painel de administração do WordPress

Agora que você anotou algumas coisas que deseja alterar em nosso formulário, vá para o administrador do WordPress para começar.

Em seguida, na barra lateral do WordPress, escolha Aparência → Personalizar → CSS adicional para estilizar o formulário.

Aqui é onde você pode inserir as classes CSS para o seu formulário.

Por exemplo, decidimos mudar algumas coisas em nosso formulário, então aqui está o código que inserimos:

Para marcar uma classe , você deve incluir um arquivo . antes do nome da classe. Para um ID , você coloca um # .

No entanto, se você estiver usando esse método, recomendamos aprender mais sobre as regras CSS para entender melhor suas alterações.

Para o nosso exemplo, seria dividido assim:

.api-form-box está mudando a cor de fundo para azul claro
.frm-button-submit está alterando o plano de fundo do botão enviar para amarelo e o texto para preto
.frm-submit está centralizando o botão no formulário

Com essas alterações, nosso formulário ficaria assim:

A partir daqui, seu poder é ilimitado. Você pode personalizar seu formulário como quiser se aprender a usar CSS.

Existem algumas desvantagens para este método, no entanto.

Uma atualização pode interromper o design do seu formulário e fazer com que você o faça novamente. Sem falar que é demorado. Se você tiver vários formulários de contato, precisará editar o código HTML e adicionar CSS personalizado a cada um.

Mas se você quiser algo mais direto e inquebrável, recomendamos verificar o seguinte método.

Método 2: Use um construtor de formulários com um estilizador visual

A codificação é uma habilidade que leva tempo para aprender.

E muitas pessoas não têm tempo para aprender. Se for você, um construtor de formulários é sua melhor opção.

E um que recomendamos é Formidable Forms .

É o plug-in WordPress do construtor de formulários mais avançado do WordPress, o que significa que a criação de formulários é simples e economiza tempo, o que significa mais tempo para dedicar a outras áreas do seu site.

Não importa o tipo de formulário em seu site, o Formidable pode lidar com tudo rapidamente.

Sem codificação, sem problemas - apenas construção fácil de formulários.

Existem outros construtores de formulários para escolher (WPForms, Gravity Forms e mais), mas eles não oferecem as habilidades de estilo que acompanham o Formidable. E isso significa que você obtém mais poder sobre a aparência do seu formulário.

Recomendamos verificar também os planos premium do Formidable.

Embora eles não sejam necessários para estilizar seu formulário, você obtém muitos recursos excelentes:

Acesso a modelos de design de formulário
Capacidade de personalizar sua imagem de plano de fundo
Mais modelos de formulário para iniciar seu formulário mais rapidamente
E muito mais

Portanto, assim que instalar e ativar o Formidable, você estará pronto para começar.

Obtenha formulários formidáveis agora!

São apenas três etapas simples para estilizar seu formulário e torná-lo ativo em seu site:

Criar um formulário
Estilizar o formulário
Exibir o formulário

Formidable Forms Plugin WordPress Gratuito

Passo 1: Criar um formulário

Para estilizar um formulário, você precisa de um formulário para estilizar, certo?

Então, vá para o administrador do WordPress e vá para Formidável → Formulários → Adicionar novo .

Você pode escolher um de nossos muitos modelos pré-construídos (recurso premium) ou um formulário em branco para começar.

Em seguida, dê um nome ao seu formulário e clique em Criar .

O plug-in o levará ao construtor de arrastar e soltar, onde você poderá editar facilmente seu formulário.

Construtor de arrastar e soltar Formidable Forms

Adicione os campos de formulário que desejar, personalize os rótulos dos campos, altere o tipo de entrada e muito mais no menu da barra lateral.

Se você estiver criando um formulário de contato, é melhor adicionar o seguinte:

Campo de texto para o nome do visitante
E-mail para uma maneira de contatá-los
Parágrafo para uma mensagem que eles desejam adicionar

Depois que seu formulário de contato estiver configurado, clique em Atualizar para salvar suas alterações.

Em seguida, iremos para a guia Estilo .

Passo 2: Estilize o formulário

Na guia Estilo , você verá algumas opções.

Você pode escolher um de nossos modelos de design pré-fabricados para economizar tempo (premium) ou começar a criar o seu próprio.

Para criar o seu próprio, clique nos três pontos ao lado de Formidable Style e clique em Edit . O Formidable Style é o estilo padrão em Formidable.

Isso o levará ao nosso designer de estilo formidável, onde você poderá personalizar seu formulário.

Você pode alterar o tamanho e a cor de seus rótulos, campos de entrada, tamanho da fonte e cor de fundo e até mesmo fazer upload de uma imagem de fundo!

Por exemplo, para um site de teste chamado Cheap n' Cheesy , criamos um formulário que reflete o negócio:

As possibilidades são infinitas para você e seu formulário de contato!

Portanto, clique em Atualizar para salvar suas alterações depois de personalizar seu formulário.

Agora só temos que exibi-lo!

Etapa 3: exibir o formulário

Exibir seu formulário é ainda mais fácil do que criá-lo.

Primeiro, vá para a postagem ou página onde deseja mostrar seu formulário e adicione um novo bloco WordPress.

Em seguida, procure o bloco Formidable Forms , adicione-o e escolha seu formulário no menu suspenso.

Por último, atualize sua postagem ou página e seu formulário estará ativo em sua página!

Dissemos que era fácil, como tudo no Formidable.

Obtenha formulários formidáveis agora!

Pronto para estilizar os formulários de contato do WordPress em seu site?

Ter a capacidade de estilizar formulários de contato é algo que você precisa , não deseja.

Você pode ver pesquisas para o plug-in Contact Form 7 envolvendo sua personalização. Coisas como CSS do Formulário de contato 7, tipo de entrada de texto em WPCF7 ou e-mail de tipo de entrada com WPCF7.

Nada disso é necessário com esses dois métodos. E este post ensinou como personalizar um formulário de contato no WordPress, para que seu formulário fique como você deseja. Quer você insira HTML personalizado, CSS e muito mais, ou vá com Formidable Forms. Você não ficará desapontado.

Então, não espere mais. Pegue o Formidable Forms e comece a criar seus formulários!

E siga-nos no Facebook, Twitter e YouTube para mais ótimas dicas e truques de forma!