Resumo de IA
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 com o construtor visual WPForms no editor de blocos.
Requisitos: Para poder estilizar os seus formulários no editor de blocos, necessitará de ter o seguinte implementado:
- Versão 6.0 ou superior do WordPress
- Editor de blocos ou um tema com edição completa do site
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.
Ativação de 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.
Para ativar a estilização de formulários, terá de ativar a marcação moderna a partir da sua página de definições do WPForms. Para isso, vá a WPForms » Definições e selecione o separador Geral.
Em seguida, navegue até à secção Geral e certifique-se de que a opção Incluir Estilo do Formulário está definida como Estilo base e tema do formulário.
Depois disso, marque a caixa de verificação Usar Marcação Moderna para a ativar.
Certifique-se de guardar as suas alterações após ativar esta opção.
Personalização dos seus formulários
Após ativar a opção de marcação moderna, crie um novo formulário e adicione o formulário a uma página ou publicação.
No editor de blocos, clique no formulário para abrir opções adicionais para o bloco WPForms.
Nas definições do bloco WPForms, encontrará opções para personalizar o tema de cores, campos do formulário, rótulos, botões e estilos de contentor e fundo sem escrever qualquer CSS. Também encontrará opções adicionais para copiar configurações de estilo de um formulário para outro na secção Avançadas.
Abordaremos cada uma destas opções em 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.
Também pode renomear este tema para fácil identificação no campo Nome do Tema.
Para apagar um tema de formulário personalizado, basta clicar no texto que diz Apagar Tema ao lado do nome do tema.
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á as definições de Cores. Isto permite-lhe atualizar as cores de fundo, de contorno e de texto, bem como as cores dos menus pendentes dos seus campos.
Quando clicar numa opção de cor específica, aparecerá uma sobreposição com as cores de tema disponíveis.
Clique na amostra de cor para abrir o seletor de cores.
Se já tiver uma cor de marca que pretenda usar nos seus formulários, pode colar o código de cor hexadecimal no campo Hex.
Estilos de Rótulo
Na secção Estilos de Rótulo, encontrará a opção para atualizar o tamanho e as cores dos seus rótulos de formulário. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
Na secção Cores, encontrará a opção para atualizar as cores dos rótulos, sub-rótulos e mensagens de erro. Abaixo explicamos 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.
No painel Cores, 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
Na secção Avançado , verá o código CSS que contém todos os estilos que adicionou ao formulário em Copiar / Colar Definições de Estilo.
Esta opção permite-lhe copiar estilos de um formulário para outro.
Se copiou definições de estilo de outro formulário, poderá colá-las rapidamente aqui. Após colar o trecho de código, o formulário usará os estilos do formulário anterior.
Se desejar reverter qualquer personalização que adicionou ao seu formulário, clique no botão Reverter Definições de Estilo. Isto restaurará o seu formulário ao seu estado original sem qualquer estilo personalizado.
Opcionalmente, pode adicionar classes CSS personalizadas que criou na caixa CLASSE(S) CSS ADICIONAL(IS). Para saber mais, consulte o nosso tutorial sobre adicionar classes CSS personalizadas.
Após estilizar o seu formulário, certifique-se de guardar as suas alterações publicando a página ou guardando-a como rascunho.
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 como estilizar os seus 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 site, consulte o guia da WPBeginner para usar o WPCode.
Não consigo encontrar a opção Usar Marcação Moderna. Como ativo a Marcação Moderna no WPForms?
Os utilizadores com pelo menos um formulário no seu site antes de atualizar o plugin WPForms para a versão 1.8.1 verão a opção de marcação moderna.
Se 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 definições. O seu site será configurado para usar a marcação moderna por defeito.
Se pretender mostrar esta opção na sua página de definições, terá de adicionar o seguinte trecho de código ao seu site.
Como forço o WPForms a usar marcação moderna?
Se a utilização do campo Cartão de Crédito obsoleto o impedir de ativar a marcação moderna, pode contornar esta restrição adicionando um filtro personalizado. Para forçar o WPForms a ativar a opção de marcação moderna, adicione o seguinte trecho de código ao seu website.
Após adicionar o código, poderá ativar/desativar a marcação moderna a partir da sua página de definições do WPForms.
Como posso fazer alterações de estilo que não estão disponíveis no editor de blocos?
Se pretender fazer outras alterações aos estilos dos seus formulários que não estejam disponíveis como opções no editor de blocos, pode usar o CSS Hero. Este plugin permite-lhe alterar a aparência do seu site no frontend sem escrever qualquer código.
Ou, se pretender estilizar os seus formulários com CSS, recomendamos o uso do WPCode para adicionar os seus estilos personalizados ao seu site.
É tudo! Agora sabe como personalizar a aparência dos seus formulários WordPress usando o WPForms e o editor de blocos.
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.