Estilizando Seus Formulários

Gostaria de personalizar facilmente a aparência dos seus formulários WordPress? Nosso recurso de estilização de formulários permite que você estilize seus formulários sem escrever nenhum CSS.

Este tutorial mostrará como estilizar seus formulários no construtor de formulários do WPForms.

---

Personalizando os Temas do Seu Formulário

Para começar, você primeiro precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários.

Depois de abrir o construtor de formulários, vá para Configurações » Temas para acessar as configurações de personalização do seu formulário.

Aqui à esquerda, você encontrará opções para personalizar o tema de cores, campos do formulário, rótulos, botões e estilos de contêiner e fundo sem escrever nenhum CSS.

A seção de Visualização à direita exibe um layout de exemplo usando campos comuns, para que você possa ver instantaneamente como suas alterações de estilo aparecerão.

Cobriremos cada uma das opções disponíveis com 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.

Estilos de Campo

Na seção Estilos de Campo, você encontrará as opções para ajustar tamanho, borda, espessura da borda, raio da borda e cores para os campos do seu formulário. Abaixo explicamos as opções de campo disponíveis.

• Tamanho: Ajusta o tamanho geral dos campos do seu formulário. As opções incluem Pequeno, Médio e Grande.
• Borda: Esta configuração permite adicionar ou remover uma borda dos seus campos de formulário. As opções incluem bordas Sólida, Tracejada ou Pontilhada.
• Tamanho da Borda: Define a espessura das bordas dos seus campos. A unidade padrão é pixels (px), mas você pode selecionar a unidade que melhor se adapta às suas necessidades de design.
• Raio da Borda: Use isso para aplicar cantos arredondados aos seus campos de formulário para uma aparência mais suave e moderna. A unidade padrão é pixels (px), mas você pode alterá-la para a unidade de sua preferência.

Em seguida, você encontrará opções para atualizar as cores de Fundo, Borda e Texto dos seus campos de formulário.

Para alterar uma cor, clique no rótulo correspondente para abrir o seletor de cores. Você pode escolher uma cor visualmente ou inserir um código hexadecimal específico para um controle preciso.

Estilos de Rótulo

Na seção Estilos de Rótulo, você encontrará a opção de atualizar o tamanho dos seus rótulos de campo. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.

Você também encontrará a opção de atualizar as cores para rótulos, sub-rótulos e mensagens de erro. Abaixo, explicamos as opções de cores de rótulo disponíveis.

• Rótulo: Esta opção controla a cor do texto do seu rótulo de campo principal.
• 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.
• Mensagem de Erro: A cor do texto que aparece 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 alterar o tamanho, borda, tamanho da borda, raio da borda e cores dos seus botões. Abaixo, explicamos as opções de botão disponíveis.

• Tamanho: Esta opção define o tamanho do botão. As opções incluem Pequeno, Médio e Grande.
• Borda: Esta configuração permite delinear seus botões com uma borda Sólida, Tracejada ou Pontilhada.
• Tamanho da Borda: Define a espessura das bordas dos seus botões. 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 arredondamento dos cantos do seu botão para uma aparência mais suave ou mais nítida. Pixels (px) são a unidade padrão, com opções para alternar de acordo com suas preferências de design.

Você também encontrará a opção de atualizar as cores de fundo e de texto do seu 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.
• Estilo da Borda: Esta configuração permite escolher o contorno do seu contêiner, com opções para uma 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.
• Cores: Atualize a cor da borda do seu contêiner para alinhar com o 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 no botã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

Na aba Avançado, você encontrará duas opções úteis para estilizar ainda mais seus formulários.

• A caixa CSS Personalizado permite adicionar suas próprias classes CSS para personalização adicional. Para saber mais, confira nosso tutorial sobre adicionar classes CSS personalizadas.
• A seção Copiar / Colar Configurações de Estilo exibe o código CSS para todos os estilos que você aplicou no construtor de formulários. Você pode copiar este código para reutilizar os mesmos estilos em outro formulário.

Após estilizar seu formulário, você pode continuar editando campos, se necessário. Quando terminar, clique em Salvar, depois use o botão Visualizar para ver seu formulário real com os estilos aplicados.

Testando Seus Formulários

O último passo é executar um teste rápido para garantir que seu formulário tenha a aparência e funcione como você espera.

Para testar, você precisará simplesmente enviar uma entrada para o seu formulário. Para saber mais, por favor, confira nossa lista completa de verificação de teste de formulário.

Perguntas Frequentes

Abaixo, respondemos a algumas das perguntas mais comuns que recebemos sobre a estilização de seus formulários.

Meu formulário manterá seus estilos quando eu o incorporar em páginas diferentes?

Sim. Quando você estiliza um formulário no construtor WPForms, essas configurações são salvas com o formulário e se aplicam por padrão em todos os lugares onde o formulário é incorporado.

Se você usar o editor de blocos ou o Elementor para aplicar alterações de estilo adicionais ao incorporar o formulário, essas alterações afetarão apenas essa página específica. Os estilos originais do construtor permanecem inalterados para todas as outras instâncias.

Isso permite que você use o mesmo formulário em todo o seu site, personalizando opcionalmente sua aparência página por página.

Posso usar as opções de estilo do construtor de formulários com construtores de página como o Divi?

Sim. As opções de estilo disponíveis no construtor de formulários WPForms (Configurações » Temas) são salvas com o formulário e se aplicam em todos os lugares onde ele é incorporado — incluindo páginas criadas com Divi, Elementor ou qualquer outro construtor de página. Nenhuma configuração adicional é necessária.

Se você quiser estilizar seus formulários usando o editor de blocos em vez disso, você precisará ter a marcação moderna ativada. Para mais detalhes, consulte nosso guia sobre como estilizar seus formulários no editor de blocos. Observe que as opções de estilo do editor de blocos só estão disponíveis ao usar o editor de blocos do WordPress ou o Elementor — elas não são acessíveis de dentro do construtor visual do Divi.

É isso! Agora você sabe como personalizar a aparência dos seus formulários WordPress usando o WPForms.

Em seguida, você gostaria de usar ícones para melhorar a exibição do seu formulário? Certifique-se de conferir nosso tutorial sobre como usar opções de ícones para aprender como.