Estilizar os 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 mostrará como estilizar seus formulários com o construtor visual WPForms no editor de blocos.

Requisitos: Para poder estilizar os formulários no editor de blocos, é necessário ter os seguintes elementos:

  • WordPress versão 6.0 ou superior
  • Editor de blocos ou um tema com edição completa do sítio


Antes de começar, certifique-se de que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença.

Ativar a marcação moderna

A marcação moderna no WPForms inclui maior acessibilidade e permite-lhe personalizar os seus formulários visualmente no editor de blocos.

Nota: Com a versão 1.8.1 e posterior do WPForms, os novos utilizadores têm a marcação moderna activada por predefinição e a opção de desativação não é visível no painel de controlo do WordPress. Basta prosseguir para começar a personalizar seus formulários no editor de blocos.

Para ativar o estilo do formulário, você precisará ativar a marcação moderna na sua página de configurações do WPForms. Para isso, vá para WPForms " Configurações e selecione a guia Geral.

Página de configuração do WPForms

Em seguida, desloque-se para a secção Geral e certifique-se de que a opção Incluir estilo do formulário está definida para Estilo do tema base e do formulário.

Incluir opção de estilo de formulário

Depois disso, selecione a caixa de verificação Utilizar marcação moderna para a ativar.

Utilizar uma marcação moderna

Certifique-se de que guarda as suas alterações depois de ativar esta opção.

Nota: Os formulários com o campo de cartão de crédito obsoleto não são compatíveis com a marcação moderna. Se você estiver usando esse campo, não poderá usar a marcação moderna no WPForms. Consulte a nossa secção FAQ para saber como contornar esta restrição.

Personalização dos formulários

Nota: Se estiver a utilizar o Elementor e quiser estilizar os seus formulários a partir do construtor do Elementor, consulte o nosso guia sobre como personalizar os seus formulários com o Elementor para saber como.

Depois de ativar a opção de marcação moderna, crie um novo formulário e adicione-o a uma página ou publicação.

No editor de blocos, clique no formulário para abrir opções adicionais para o bloco WPForms.

Estilos de campo

Nas definições do bloco WPForms, encontrará opções para personalizar o tema de cores, os campos de formulário, as etiquetas, os botões e os estilos de contentor e de fundo sem escrever qualquer CSS. Encontrará também opções adicionais para copiar definições de estilo de um formulário para outro na secção Avançadas.

Opções de estilo disponíveis

Abordaremos cada uma destas opções com mais pormenor em seguida.

Temas

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

Para aplicar, basta clicar no seu tema preferido e ele ajustará instantaneamente as cores dos campos, etiquetas, botões, contentor ou fundo do seu formulário.

Estilo de tema disponível

Se personalizar definições individuais depois de 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 pode ser aplicado a qualquer formulário, tal como faria com qualquer outro tema de formulário.

Também pode mudar o nome deste tema para facilitar a sua identificação no campo Nome do tema.

Nome do tema

Para eliminar um tema de formulário personalizado, basta clicar no texto que diz Eliminar tema junto ao nome do tema.

Eliminar tema

Nota: Para obter mais detalhes sobre como os estilos de tema funcionam no WPForms, não deixe de conferir nosso tutorial sobre como usar temas de formulário.

Estilos de campo

Na secção Estilos de campo, encontrará as opções para ajustar o tamanho, o contorno, o tamanho do contorno, o raio do contorno e as cores dos campos do formulário. De seguida, explicamos as opções de campo disponíveis.

  • Tamanho: Ajusta o tamanho geral dos campos do formulário. As opções incluem Pequeno, Médio e Grande.
  • Borda: Esta definição permite-lhe adicionar ou remover um contorno dos seus campos de formulário. As opções incluem bordas sólidas, tracejadas ou pontilhadas.
  • Tamanho da margem: Define a espessura dos limites do campo. A unidade predefinida é pixels (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
  • Raio da borda: Utilize esta opção para aplicar cantos arredondados aos seus campos de formulário para obter um aspeto mais suave e moderno. A unidade predefinida é pixels (px), mas pode alterá-la para a unidade que preferir.
Opções de estilo de campo disponíveis

Em seguida, encontra as definições de Cores. Isto permite-lhe atualizar o fundo, o rebordo, o texto e as cores do menu pendente dos seus campos.

Cores de campo disponíveis

Quando se clica numa determinada opção de cor, aparece uma sobreposição com as cores de tema disponíveis.

Alterar a cor de fundo

Clique na amostra de cor para abrir o seletor de cores.

Seleção de cores

Se já tiver uma cor de marca que pretenda utilizar para os seus formulários, vá em frente e cole o código de cor hexadecimal no campo Hexadecimal.

Introduzir valor hexadecimal

Estilos de etiquetas

Na secção Estilos de etiqueta, encontrará a opção de atualizar o tamanho e as cores das etiquetas do formulário. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.

Tamanhos das etiquetas

Na secção Cores, encontrará a opção de atualizar as cores das etiquetas, subetiquetas e mensagens de erro. De seguida, explicamos as opções de cores de etiquetas disponíveis.

Cores dos rótulos
  • Rótulo: Esta opção controla a cor do texto da etiqueta do campo principal.
  • Sublabel & Hint: Esta opção controla a cor dos subrótulos e dicas dos campos que aparecem quando o WPForms sugere valores aos utilizadores no frontend.
  • Mensagem de erro: A cor do texto que aparece se ocorrer um erro quando os utilizadores preenchem o seu formulário.

Estilos de botões

As definições de Estilos de botões permitem-lhe alterar o tamanho, o contorno, o tamanho do contorno, o raio do contorno e as cores dos seus botões. De seguida, explicamos as opções de botões 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 um contorno sólido, tracejado ou pontilhado.
  • Tamanho da borda: Define a espessura das margens do botão. A unidade predefinida é pixels (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
  • Raio da borda: Isto ajusta o arredondamento dos cantos dos botões para um aspeto mais suave ou mais nítido. Os pixels (px) são a unidade padrão, com opções para mudar de acordo com as suas preferências de design.
Estilos de botões

No painel Cores, encontrará a opção de atualizar as cores de fundo e de texto do seu botão.

Cores dos botões

Nota: A cor de fundo que definir para o seu botão também será utilizada como cor de destaque predefinida. Isto significa que a cor do estado de foco para campos, barras de progresso, botões de rádio e caixas de verificação utilizará a cor de fundo do botão.

Estilos de contentores

As definições de Estilos de contentor permitem-lhe personalizar o preenchimento, o estilo do contorno, o tamanho do contorno, o raio do contorno, a sombra e as cores do contentor do seu formulário. Abaixo, detalhamos as opções de contentor disponíveis.

  • Preenchimento: Esta opção define o espaço dentro dos limites do contentor do formulário. Pode aumentar ou diminuir este valor para ajustar o espaçamento à volta do conteúdo do formulário.
  • Estilo de borda: Esta definição permite-lhe escolher o contorno do seu contentor, com opções para uma margem Sólida, Traçada ou Pontilhada.
  • Tamanho da borda: Determina a espessura do limite do seu contentor. A unidade predefinida é pixels (px), mas pode selecionar a unidade que melhor se adequa às suas necessidades de design.
  • Raio da borda: Isto ajusta o grau de arredondamento dos cantos do seu contentor, adicionando uma borda mais suave ou mais definida à aparência do seu formulário. A medida predefinida é em pixels (px), mas pode ser alterada para se adequar ao seu estilo.
  • Sombra: Escolha o tamanho do efeito de sombra para o seu contentor para dar profundidade ao design do seu formulário, com opções que vão de nenhum a grande.
  • Cores: Actualize a cor do contorno do seu contentor para se alinhar com o seu tema visual, melhorando a estética geral do formulário.
Estilos de contentores disponíveis

Estilos de fundo

As definições de Estilos de fundo permitem-lhe controlar a imagem e a cor de fundo do seu formulário.

Para começar, selecione uma fonte de imagem no menu pendente Imagem. Para imagens já carregadas no seu sítio Web ou para carregar novas imagens, selecione a opção Biblioteca multimédia. Para explorar uma seleção mais vasta de imagens profissionais, selecione a opção Stock Photos .

Menu pendente de imagens

Depois de fazer a sua seleção, clique no botão Escolher imagem para continuar.

Botão Escolher imagem

Se selecionar Biblioteca de Média no menu pendente Imagem , será aberta a galeria de média do seu sítio Web, permitindo-lhe escolher uma imagem ou carregar uma nova. Se selecionar Fotografias de arquivo, ser-lhe-á apresentada uma seleção de fotografias de arquivo para escolher para o fundo do seu formulário.

Nota: Se for a primeira vez que seleciona Fotografias de arquivo, verá uma sobreposição a pedir-lhe para transferir a biblioteca de imagens de arquivo. Clique em Continuar neste aviso para iniciar a transferência, após o que pode escolher entre uma série de fotografias de arquivo.

Depois de selecionar a sua imagem, a secção Estilos de fundo oferece opções de personalização adicionais:

  • Posição: Esta definição permite-lhe alinhar a imagem de fundo no formulário, selecionando opções como Centro superior, Centro inferior, etc., para obter o posicionamento perfeito.
  • Repetir: Escolha como a sua imagem de fundo se repete. As opções são Sem repetição para uma única imagem, Azulejo para repetir a imagem em todo o fundo, Repetir na horizontal para repetir em toda a largura e Repetir na vertical para repetir ao longo do comprimento.
  • Tamanho: Isto ajusta a forma como a sua imagem de fundo se adapta ao formulário. Cover assegura que a imagem cobre todo o fundo, adaptando-se ao tamanho do formulário. Se a opção Dimensões estiver selecionada, pode especificar a largura e a altura exactas da sua imagem.
  • Cores: Esta opção permite-lhe selecionar uma cor de fundo, que será visível quando não for utilizada qualquer imagem.

Estilismo avançado

Na secção Avançadas, verá o código CSS que contém todos os estilos que adicionou ao formulário em Copiar / Colar definições de estilo.

Definições de estilo de copiar e colar

Esta opção permite-lhe copiar estilos de um formulário para outro.

Se tiver copiado definições de estilo de outro formulário, poderá colá-las rapidamente aqui. Depois de colar o trecho de código, o formulário usará os estilos do formulário anterior.

Se pretender repor qualquer personalização que tenha adicionado ao seu formulário, clique no botão Repor definições de estilo. Isto repõe o formulário no seu estado original, sem qualquer estilo personalizado.

Repor definições de estilo

Opcionalmente, pode adicionar classes CSS personalizadas que tenha criado na caixa CLASSE (ES) CSS ADICIONAL(ES). Para saber mais, consulte o nosso tutorial sobre como adicionar classes CSS personalizadas.

Classes CSS adicionais

Depois de estilizar o seu formulário, certifique-se de que guarda as alterações, publicando a página ou guardando-a como rascunho.

Guardar página como rascunho

Nota: Se incorporar o formulário que personalizou noutra página, este manterá as definições de estilo configuradas.

Testar os seus formulários

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

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

Perguntas mais frequentes

Abaixo, respondemos a algumas das perguntas mais comuns que recebemos sobre como estilizar os formulários no editor de blocos.

Atenção! Algumas das FAQs neste documento contêm código PHP e destinam-se a programadores. Oferecemos este código como cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Se preferir uma abordagem mais simples para adicionar código personalizado ao seu sítio, consulte o guia do WPBeginner para utilizar o WPCode.

Não consigo encontrar a opção Usar marcação moderna. Como faço para ativar o Modern Markup no WPForms?

Os utilizadores com pelo menos um formulário no seu sítio Web antes de actualizarem o plug-in WPForms para a versão 1.8.1 verão a opção de marcação moderna.

Se você acabou de instalar o plugin WPForms no seu site WordPress, não verá a opção Usar marcação moderna na sua página de configurações. Seu site será configurado para usar a marcação moderna por padrão.

Se pretender mostrar esta opção na sua página de definições, terá de adicionar o seguinte fragmento de código ao seu sítio.

Como posso forçar o WPForms a utilizar uma marcação moderna?

Se o uso do campo de cartão de crédito obsoleto o impede de ativar a marcação moderna, é possível contornar essa restrição adicionando um filtro personalizado. Para forçar o WPForms a habilitar a opção de marcação moderna, adicione o seguinte trecho de código ao seu site.

Depois de adicionar o código, poderá ativar/desativar a marcação moderna a partir da sua página de definições do WPForms.

Como é que posso fazer alterações de estilo que não estão disponíveis no editor de blocos?

Se quiser fazer outras alterações nos estilos dos seus formulários que não estejam disponíveis como opções no editor de blocos, pode utilizar o CSS Hero. Este plugin permite-lhe alterar o aspeto do seu sítio no frontend sem escrever qualquer código.

Ou, se pretender estilizar os seus formulários com CSS, recomendamos a utilização do WPCode para adicionar os seus estilos personalizados ao seu site.

É isso aí! Agora você sabe como personalizar a aparência dos seus formulários do WordPress usando o WPForms e o editor de blocos.

Em seguida, gostaria de utilizar ícones para melhorar a visualização do seu formulário? Não deixe de consultar o nosso tutorial sobre a utilização de opções de ícones para saber como.

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.