Gostaria de personalizar facilmente a aparência de seus formulários do WordPress? Nosso recurso de estilo de formulário permite que você estilize seus formulários sem escrever nenhum CSS.
Este tutorial mostrará a você 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 esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença.
Habilitando a 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 o estilo do formulário, você precisará ativar a marcação moderna na página de configurações do WPForms. Para isso, vá para WPForms " Configurações e selecione a guia Geral.
Em seguida, role até a seção General (Geral ) e verifique se a opção Include Form Styling (Incluir estilo de formulário ) está definida como Base and form theme styling (Estilo de tema de formulário e base).
Depois disso, marque a caixa de seleção Use Modern Markup (Usar marcação moderna) para ativá-la.
Certifique-se de salvar suas alterações após ativar essa opção.
Personalização dos formulários
Depois de ativar a opção de marcação moderna, crie um novo formulário e adicione-o a uma página ou post.
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, os campos de formulário, os rótulos, os botões e os estilos de contêiner e de 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 Advanced (Avançado ).
Abordaremos cada uma dessas opções em mais detalhes a seguir.
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 plano de fundo do formulário.
Para aplicar, basta clicar no tema de sua preferência e ele ajustará instantaneamente as cores dos campos, rótulos, botões, contêiner ou plano de fundo do formulário.
Se você personalizar as configurações individuais após selecionar um tema, essas alterações serão salvas como um novo tema de formulário personalizado. Esse novo tema será adicionado à sua lista de temas disponíveis e poderá ser aplicado a qualquer formulário da mesma forma que qualquer outro tema de formulário.
Você também pode renomear esse tema para facilitar a identificação no campo Theme Name (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 Field Styles (Estilos de campo ), você encontrará as opções para ajustar o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos campos do formulário. A seguir, explicamos as opções de campo disponíveis.
- Size (Tamanho): Ajusta o tamanho geral dos campos do formulário. As opções incluem Pequeno, Médio e Grande.
- Borda: Essa configuração permite adicionar ou remover uma borda dos campos do formulário. As opções incluem bordas sólidas, tracejadas ou pontilhadas.
- Tamanho da borda: Define a espessura das bordas do campo. A unidade padrão é pixels (px), mas você pode selecionar a unidade que melhor se adapte às suas necessidades de design.
- Raio da borda: Use essa opção para aplicar cantos arredondados aos campos de formulário para obter uma aparência mais suave e moderna. A unidade padrão é pixels (px), mas você pode alterá-la para a unidade que preferir.
Em seguida, você encontrará as configurações Colors (Cores ). Isso permite que você atualize as cores do plano de fundo, da borda, do texto e do menu suspenso de seus campos.
Quando você clicar em uma opção de cor específica, será exibida uma sobreposição com as cores de tema disponíveis.
Clique na amostra de cor para abrir o seletor de cores.
Se você já tiver uma cor de marca que deseja usar em seus formulários, cole o código hexadecimal da cor no campo Hex.
Estilos de rótulos
Na seção Label Styles (Estilos de rótulos ), você encontrará a opção de atualizar o tamanho e as cores dos rótulos do formulário. As opções de tamanho disponíveis incluem Pequeno, Médio e Grande.
Na seção Colors (Cores ), você encontrará a opção de atualizar as cores dos rótulos, subrótulos e mensagens de erro. A seguir, explicamos as opções de cores de rótulos disponíveis.
- Rótulo: Essa opção controla a cor do texto do rótulo do campo principal.
- Sublabel & Hint: essa opção controla a cor dos subtí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 é exibido se ocorrer um erro quando os usuários preencherem o formulário.
Estilos de botões
As configurações de Button Styles permitem que você altere o tamanho, a borda, o tamanho da borda, o raio da borda e as cores dos seus botões. A seguir, explicamos as opções de botão disponíveis.
- Tamanho: Essa opção define o tamanho do botão. As opções incluem Pequeno, Médio e Grande.
- Borda: Essa configuração permite que você contorne os botões com uma borda sólida, tracejada ou pontilhada.
- Tamanho da borda: Define a espessura das bordas do botão. A unidade padrão é pixels (px), mas você pode selecionar a unidade que melhor se adapte às suas necessidades de design.
- Raio da borda: Ajusta o arredondamento dos cantos do botão para obter uma aparência mais suave ou mais nítida. Pixels (px) é a unidade padrão, com opções para alternar de acordo com suas preferências de design.
No painel Colors (Cores ), você encontrará a opção de atualizar as cores do fundo e do texto do botão.
Estilos de contêineres
As configurações de Container Styles 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 formulário. Abaixo, detalhamos as opções de contêiner disponíveis.
- Preenchimento: Essa 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 em torno do conteúdo do formulário.
- Estilo de borda: Essa configuração permite que você escolha o contorno do contêiner, com opções para uma borda sólida, tracejada ou pontilhada.
- Tamanho da borda: Determina a espessura da borda do contêiner. A unidade padrão é pixels (px), mas você pode selecionar a unidade que melhor atenda às suas necessidades de design.
- Raio da borda: Ajusta o grau de arredondamento dos cantos do contêiner, acrescentando uma borda mais suave ou mais definida à aparência do formulário. A medida padrão é em pixels (px), mas pode ser alterada para se adequar ao seu estilo.
- Shadow (Sombra): Escolha o tamanho do efeito de sombra do seu contêiner para adicionar profundidade ao design do formulário, com opções que variam de nenhum a grande.
- Cores: Atualize a cor da borda do contêiner para alinhar-se ao seu tema visual, aprimorando a estética geral do formulário.
Estilos de plano de fundo
As configurações de Background Styles permitem controlar a imagem e a cor do plano de fundo do formulário.
Para começar, selecione uma fonte de imagem no menu suspenso Image (Imagem ). Para imagens já carregadas em seu site ou para carregar novas imagens, selecione a opção Media Library (Biblioteca de mídia). Para explorar uma seleção mais ampla de imagens profissionais, selecione a opção Stock Photos .
Depois de fazer sua seleção, clique no botão Choose Image (Escolher imagem ) para continuar.
Se você selecionar Media Library no menu suspenso Image (Imagem ), a galeria de mídia do seu site será aberta, permitindo que você escolha uma imagem ou carregue uma nova. Se Stock Photos for selecionado, você verá uma seleção de fotos de estoque para escolher para o plano de fundo do seu formulário.
Depois de selecionar a imagem, a seção Background Styles (Estilos de plano de fundo ) oferece opções adicionais de personalização:
- Position (Posição): Essa configuração permite alinhar a imagem de fundo no formulário, selecionando opções como Centro superior, Centro inferior e outras para obter o posicionamento perfeito.
- Repeat (Repetir): escolha como sua imagem de fundo se repete. As opções são No Repeat (Sem Repetição ) para uma única imagem, Tile (Mosaico ) para repetir a imagem em todo o plano de fundo, Repeat Horizontal (Repetição Horizontal ) para repetir em toda a largura e Repeat Vertical (Repetição Vertical ) para repetir no comprimento.
- Size (Tamanho): Ajusta como a imagem de fundo se encaixa no formulário. Cover garante que a imagem cubra todo o plano de fundo, adaptando-se ao tamanho do formulário. Se Dimensions for selecionado, você poderá especificar a largura e a altura exatas da imagem.
- Colors (Cores): Essa opção permite que você selecione uma cor de fundo, que ficará visível quando nenhuma imagem for usada.
Estilo avançado
Na seção Advanced (Avançado ), você verá o código CSS que contém todos os estilos que você adicionou ao formulário em Copy / Paste Style Settings (Copiar/Colar configurações de estilo).
Essa opção permite que você copie estilos de um formulário para outro.
Se tiver copiado as configurações de estilo de outro formulário, você poderá colá-las rapidamente aqui. Depois de colar o snippet de código, o formulário usará os estilos do formulário anterior.
Se você quiser redefinir qualquer personalização adicionada ao formulário, clique no botão Reset Style Settings (Redefinir configurações de estilo ). Isso restaurará seu formulário ao estado original, sem nenhum estilo personalizado.
Opcionalmente, você pode adicionar classes CSS personalizadas criadas por você na caixa ADDITIONAL CSS CLASS(ES). Para saber mais, consulte nosso tutorial sobre como adicionar classes CSS personalizadas.
Após estilizar o formulário, certifique-se de salvar as alterações publicando a página ou salvando-a como rascunho.
Teste de seus formulários
A última etapa é executar um teste rápido para garantir que o formulário tenha a aparência e o funcionamento esperados.
Para testá-lo, basta enviar uma entrada para o seu formulário. Para saber mais, consulte nossa lista de verificação completa de testes de formulários.
Perguntas frequentes
Abaixo, respondemos a algumas das perguntas mais comuns que recebemos sobre como estilizar seus formulários no editor de blocos.
Atenção! Algumas das perguntas frequentes deste documento contêm código PHP e são destinadas a desenvolvedores. Oferecemos esse código como 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 do WPBeginner para usar o WPCode.
Não consigo encontrar a opção Use Modern Markup. Como faço para ativar o Modern Markup no WPForms?
Os usuários com pelo menos um formulário em seu site antes de atualizar 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 plug-in 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 quiser mostrar essa opção em sua página de configurações, você precisará adicionar o seguinte trecho de código ao seu site.
Como faço para forçar o WPForms a usar a marcação moderna?
Se o uso do campo de cartão de crédito obsoleto o impedir de ativar a marcação moderna, você poderá contornar essa 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 site.
Depois de 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 quiser fazer outras alterações nos estilos dos formulários que não estão disponíveis como opções no editor de blocos, você pode usar o CSS Hero. Esse plug-in permite que você altere a aparência do seu site no frontend sem escrever nenhum código.
Ou, se quiser estilizar seus formulários com CSS, recomendamos o uso do WPCode para adicionar estilos personalizados ao seu site.
É isso aí! Agora você sabe como personalizar a aparência de seus formulários do WordPress usando o WPForms e o editor de blocos.
Em seguida, você gostaria de usar ícones para melhorar a exibição do formulário? Não deixe de conferir nosso tutorial sobre o uso de opções de ícones para saber como.