Estilizando seus formulários no Editor de Blocos

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.

This tutorial will show you how to style your forms with the WPForms visual builder in the block editor.

---

Before getting started, ensure WPForms is installed and activated on your WordPress site and that you’ve verified your license.

Enabling Modern Markup

Modern markup in WPForms includes increased accessibility and allows you to customize your forms visually in the block editor.

To activate form styling, you’ll need to enable modern markup from your WPForms settings page. For this, go to WPForms » Settings and select the General tab.

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.

After that, check the Use Modern Markup checkbox to enable it.

Be sure to save your changes after enabling this option.

Customizing Your Forms

After enabling the modern markup option, create a new form and add the form to a page or post.

In the block editor, click on the form to open additional options for the WPForms block.

In the WPForms block settings, you’ll find options to customize the color theme, form fields, labels, buttons, and container and background styles without writing any CSS. You’ll also find additional options to copy style settings from one form to another in the Advanced section.

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.

To delete a custom form theme, simply click the text that reads Delete Theme next to the theme’s name.

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.

Next, you’ll find the Colors settings. This allows you to update the background, border, and text, and dropdown menu colors of your fields.

When you click on a particular color option, an overlay with available theme colors will appear.

Click on the color swatch to open the color picker.

If you already have a brand color you wish to use for your forms, go ahead and paste the hex color code into the Hex field.

Estilos de Rótulo

In the Label Styles section, you’ll find the option to update the size and colors of your form labels. Available size options include Small, Medium, and Large.

Under the Colors section, you’ll find the option to update colors for labels, sublabels, and error messages. Below we’ve explained the available label color options.

• 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.

In the Colors panel, you’ll find the option to update the background and text colors of your button.

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

In the Advanced section, you’ll see the CSS code that contains all the styles you’ve added to the form under Copy / Paste Style Settings.

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.

If you’d like to reset any customization you’ve added to your form, click the Reset Style Settings button. This would restore your form to its original state without any custom styling.

You can optionally add custom CSS classes you’ve created in the ADDITIONAL CSS CLASS(ES) box. To learn more, check out our tutorial on adding custom CSS classes.

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

Below, we’ve answered some of the most common questions we receive about styling your forms in the block editor.

I can’t find the Use Modern Markup option. How do I enable Modern Markup in WPForms?

Users with at least one form on their website before updating the WPForms plugin to version 1.8.1 will see the modern markup option.

If you just installed the WPForms plugin on your WordPress site, you won’t see the Use Modern Markup option on your settings page. Your site will be set to use the modern markup by default.

If you’d like to show this option on your settings page, you’ll need to add the following code snippet to your site.

How do I force WPForms to use modern markup?

If using the deprecated Credit Card field prevents you from enabling modern markup, you can bypass this restriction by adding a custom filter. To force WPForms to enable the modern markup option, add the following code snippet to your website.

After adding the code, you’ll be able to enable/disable modern markup from your WPForms settings page.

How can I make style changes not available in the block editor?

If you would like to make other changes to your forms’ styles that aren’t available as options in the block editor, you can use CSS Hero. This plugin enables you to change your site’s appearance on the frontend without writing any code.

Or, if you would like to style your forms with CSS, we recommend using WPCode to add your custom styles to your site.

That’s it! Now you know how to customize the look and feel of your WordPress forms using WPForms and the block editor.

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.