Resumo de IA
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 com o construtor visual do WPForms no editor de blocos.
Requisitos: Para poder estilizar seus formulários no editor de blocos, você precisará ter o seguinte em vigor:
- WordPress versão 6.0 ou superior
- 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 em seu site WordPress e que você verificou sua licença.
Habilitando Marcação Moderna
A marcação moderna no WPForms inclui maior acessibilidade e permite que você personalize seus formulários visualmente no editor de blocos.
Para ativar a estilização de formulários, você precisará habilitar a marcação moderna na sua página de configurações do WPForms. Para isso, vá em WPForms » Configurações e selecione a aba Geral.
Em seguida, role até a seção Geral e certifique-se de que a opção Incluir Estilização do Formulário esteja definida como Estilização base e do tema do formulário.
Depois disso, marque a caixa de seleção Usar Marcação Moderna para habilitá-la.
Certifique-se de salvar suas alterações após habilitar esta opção.
Personalizando Seus Formulários
Após habilitar a opção de marcação moderna, crie um novo formulário e adicione o formulário a uma página ou postagem.
No editor de blocos, clique no formulário para abrir opções adicionais para o bloco WPForms.
Nas configurações do bloco WPForms, você encontrará opções para personalizar o tema de cores, campos do formulário, rótulos, botões e estilos de contêiner e plano de fundo sem escrever nenhum CSS. Você também encontrará opções adicionais para copiar configurações de estilo de um formulário para outro na seção Avançado.
Abordaremos cada uma dessas opções em 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.
Você também pode renomear este tema para fácil identificação no campo Nome do Tema.
Para excluir um tema de formulário personalizado, basta clicar no texto que diz Excluir Tema ao lado do nome do tema.
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á as configurações de Cores. Isso permite que você atualize as cores de plano de fundo, borda e texto, e menu suspenso dos seus campos.
Ao clicar em uma opção de cor específica, uma sobreposição com as cores de tema disponíveis aparecerá.
Clique na amostra de cor para abrir o seletor de cores.
Se você já tem uma cor de marca que deseja usar para seus formulários, pode colar o código da cor hexadecimal no campo Hex.
Estilos de Rótulo
Na seção Estilos de Rótulo, você encontrará a opção para atualizar o tamanho e as cores dos rótulos do seu formulário. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
Na seção Cores, você encontrará a opção para atualizar as cores dos 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.
No painel Cores, você encontrará a opção para 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 seção Avançado , você verá o código CSS que contém todos os estilos que você adicionou ao formulário em Copiar / Colar Configurações de Estilo.
Esta opção permite copiar estilos de um formulário para outro.
Se você copiou configuraçõ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 você quiser redefinir qualquer personalização que adicionou ao seu formulário, clique no botão Redefinir Configurações de Estilo. Isso restauraria seu formulário ao seu estado original, sem nenhum estilo personalizado.
Você pode, opcionalmente, adicionar classes CSS personalizadas que você criou na caixa CLASSE(S) CSS ADICIONAL(IS). Para saber mais, confira nosso tutorial sobre adicionar classes CSS personalizadas.
Após estilizar seu formulário, certifique-se de salvar suas alterações publicando a página ou salvando-a como rascunho.
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 no editor de blocos.
Atenção! Algumas das FAQs neste documento contêm código PHP e são destinadas a desenvolvedores. Oferecemos este código como uma cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.
Se você 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 habilito a Marcação Moderna no WPForms?
Usuários com pelo menos um formulário em 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 você acabou de instalar o plugin WPForms em seu site WordPress, não verá a opção Usar Marcação Moderna em sua página de configurações. Seu site será configurado para usar a marcação moderna por padrão.
Se você quiser mostrar esta opção em sua página de configurações, precisará adicionar o seguinte trecho de código ao seu site.
Como forço o WPForms a usar a marcação moderna?
Se o uso do campo Cartão de Crédito obsoleto o impedir de habilitar a marcação moderna, você pode 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.
Após adicionar o código, você poderá ativar/desativar a marcação moderna na página de configurações do WPForms.
Como posso fazer alterações de estilo que não estão disponíveis no editor de blocos?
Se você quiser fazer outras alterações nos estilos dos seus formulários que não estão disponíveis como opções no editor de blocos, você pode usar o CSS Hero. Este plugin permite que você altere a aparência do seu site no frontend sem escrever nenhum código.
Ou, se você quiser estilizar seus formulários com CSS, recomendamos o uso do WPCode para adicionar seus estilos personalizados ao seu site.
É isso! Agora você sabe como personalizar a aparência dos seus formulários WordPress usando WPForms e o editor de blocos.
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.