Estilizar os Seus Formulários

Gostaria de personalizar facilmente o aspeto dos seus formulários WordPress? A nossa funcionalidade de estilização de formulários permite-lhe estilizar os seus formulários sem escrever qualquer CSS.

Este tutorial irá mostrar-lhe como estilizar os seus formulários no construtor de formulários WPForms.

---

Personalizar os Temas dos Seus Formulários

Para começar, terá primeiro de criar um novo formulário ou editar um existente para aceder ao construtor de formulários.

Depois de abrir o construtor de formulários, vá a Definições » Temas para aceder às definições de personalização do seu formulário.

Aqui, à esquerda, encontrará opções para personalizar o tema de cores, os campos do formulário, os rótulos, os botões e os estilos do recipiente e de fundo sem escrever qualquer CSS.

A secção de Pré-visualização à direita exibe um layout de exemplo utilizando campos comuns, para que possa ver instantaneamente como as suas alterações de estilo aparecerão.

Abordaremos cada uma das opções disponíveis com mais detalhe abaixo.

Temas

A definição Temas permite-lhe escolher um tema de cores predefinido para atualizar automaticamente o estilo dos campos, rótulos, botões, recipiente e fundo do seu formulário.

Para aplicar, basta clicar no seu tema preferido, e este ajustará instantaneamente as cores dos campos, rótulos, botões, recipiente ou fundo do seu formulário.

Se personalizar definições individuais após selecionar um tema, estas alterações serão guardadas 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, tal como faria com qualquer outro tema de formulário.

Estilos de Campo

Na secção Estilos de Campo, encontrará as opções para ajustar o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos seus campos de formulário. Abaixo explicámos as opções de campo disponíveis.

• Tamanho: Ajusta o tamanho geral dos seus campos de formulário. As opções incluem Pequeno, Médio e Grande.
• Borda: Esta definição permite-lhe adicionar ou remover uma borda dos seus campos de formulário. As opções incluem bordas Sólidas, Tracejadas ou Pontilhadas.
• Tamanho da Borda: Define a espessura das bordas dos seus campos. A unidade padrão é píxeis (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
• Raio da Borda: Use isto para aplicar cantos arredondados aos seus campos de formulário para uma aparência mais suave e moderna. A unidade padrão é píxeis (px), mas pode alterá-la para a unidade que preferir.

Em seguida, 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. Pode escolher uma cor visualmente ou introduzir um código hexadecimal específico para um controlo preciso.

Estilos de Rótulo

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

Também encontrará a opção para atualizar as cores dos rótulos, sub-rótulos e mensagens de erro. Abaixo explicámos as opções de cor 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 de campo e dicas que aparecem quando o WPForms sugere valores aos utilizadores no frontend.
• Mensagem de Erro: A cor do texto que é exibido se ocorrer um erro quando os utilizadores preenchem o seu formulário.

Estilos de Botão

As definições de Estilos de Botão permitem-lhe alterar o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos seus botões. Abaixo explicámos 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 definição permite-lhe delinear os 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 é píxeis (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
• Raio da Borda: Isto ajusta a arredondamento dos cantos dos seus botões para um aspeto mais suave ou mais nítido. Píxeis (px) são a unidade padrão, com opções para alternar de acordo com as suas preferências de design.

Também encontrará a opção para atualizar as cores de fundo e de texto do seu botão.

Estilos do Recipiente

As definições de Estilos de Container permitem-lhe personalizar o preenchimento, o estilo da borda, o tamanho da borda, o raio da borda, a sombra e as cores para o container do seu formulário. Abaixo detalhámos as opções de container disponíveis.

• Preenchimento: Esta opção define o espaço dentro das bordas do container do formulário. Pode aumentar ou diminuir este valor para ajustar o espaçamento em torno do conteúdo do seu formulário.
• Estilo da Borda: Esta definição permite escolher o contorno do seu contentor, com opções para uma borda Sólida, Tracejada ou Pontilhada.
• Tamanho da Borda: Determina a espessura da borda do seu contentor. A unidade padrão é píxeis (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
• Raio da Borda: Ajusta o quão arredondados são os cantos do seu contentor, adicionando uma margem mais suave ou mais definida à aparência do seu formulário. A medição padrão é em píxeis (px), mas pode ser alterada para se adequar ao seu estilo.
• Sombra: Escolha o tamanho do efeito de sombra para o seu contentor 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 contentor para alinhar com o seu tema visual, melhorando a estética geral do formulário.

Estilos de Fundo

As definições de Estilos de Fundo dão-lhe controlo 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 no seu website 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 Fotografias de Stock.

Após fazer a sua seleção, clique no botão Escolher Imagem para prosseguir.

Se selecionar Biblioteca de Média no menu suspenso Imagem, a galeria de média do seu website será aberta, permitindo-lhe escolher uma imagem ou carregar uma nova. Se Fotografias de Stock for selecionado, ser-lhe-á apresentada uma seleção de fotografias de stock para escolher para o fundo do seu formulário.

Assim que tiver selecionado a sua imagem, a secção Estilos de Fundo oferece opções de personalização adicionais:

• Posição: Esta definição permite alinhar a sua imagem de fundo dentro do formulário selecionando opções como Topo Centro, Fundo Centro, e mais para obter a colocação perfeita.
• Repetir: Escolha como a 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 Horizontalmente para repetir na largura, e Repetir Verticalmente para repetir no comprimento.
• Tamanho: Isto ajusta como a sua imagem de fundo se encaixa no formulário. Cobrir garante que a imagem cobre todo o fundo, adaptando-se ao tamanho do formulário. Se Dimensões for selecionado, pode especificar a largura e altura exatas para a sua imagem.
• Cores: Esta opção permite selecionar uma cor de fundo, que será visível quando nenhuma imagem for utilizada.

Estilização Avançada

No separador Avançadas, encontrará duas opções úteis para estilizar ainda mais os seus formulários.

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

Após estilizar o seu formulário, pode continuar a editar campos, se necessário. Assim que terminar, clique em Guardar, depois utilize o botão Pré-visualizar para ver o seu formulário real com os estilos aplicados.

Testar os Seus Formulários

O último passo é executar um teste rápido para garantir que o seu formulário tem o aspeto e funciona como espera.

Para testar, terá simplesmente de submeter uma entrada para o seu formulário. Para saber mais, consulte a nossa lista de verificação completa para testes de formulários.

Perguntas Frequentes

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

O meu formulário manterá os seus estilos quando o incorporar em diferentes páginas?

Sim. Quando estiliza um formulário no construtor WPForms, essas configurações são guardadas com o formulário e aplicam-se por defeito em todo o lado onde o formulário é incorporado.

Se utilizar 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.

Isto permite-lhe usar o mesmo formulário em todo o seu site, personalizando opcionalmente a sua aparência página a página.

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

Sim. As opções de estilização disponíveis no construtor de formulários WPForms (Definições » Temas) são guardadas com o formulário e aplicam-se em todo o lado onde é incorporado — incluindo páginas criadas com Divi, Elementor ou qualquer outro construtor de páginas. Não é necessária nenhuma configuração adicional.

Se pretender estilizar os seus formulários usando o editor de blocos, necessitará de ter a marcação moderna ativada. Para mais detalhes, consulte o nosso guia sobre estilização dos seus formulários no editor de blocos. Note que as opções de estilização do editor de blocos só estão disponíveis ao usar o editor de blocos do WordPress ou o Elementor — não são acessíveis a partir do construtor visual do Divi.

É tudo! Agora sabe como personalizar o aspeto dos seus formulários WordPress usando WPForms.

Em seguida, gostaria de usar ícones para melhorar a apresentação do seu formulário? Certifique-se de que consulta o nosso tutorial sobre usar escolhas de ícones para saber como.