Como Estilizar WPForms Usando o Editor de Blocos

Você está procurando estilizar o WPForms usando o editor de blocos para formulários visualmente atraentes e fáceis de usar em seu site WordPress?

WPForms é um plugin intuitivo que simplifica a criação e o gerenciamento de formulários, ao mesmo tempo que oferece amplas opções de personalização. Ao alavancar o editor de blocos, você pode estilizar seus formulários sem esforço para melhorar a experiência do seu usuário.

Siga este tutorial passo a passo para dominar a estilização do WPForms usando o editor de blocos e aprimorar a funcionalidade geral do seu site.

Crie Seu Formulário WordPress Agora

Por Que Você Precisa Estilizar Seus Formulários?

Ao estilizar seus formulários, você pode aprimorar a estética do seu site, garantindo que ele contribua para uma experiência positiva do usuário. Aqui estão alguns outros motivos importantes pelos quais a estilização de formulários é crucial para o seu site:

• Marca Consistente: Criar um formulário de marca que combine com o design e o esquema de cores do seu site garante uma imagem de marca consistente.
• Melhor Experiência do Usuário: Formulários bem projetados facilitam a navegação/envio das informações necessárias pelos usuários, levando a taxas de conclusão de formulários mais altas.
• Design Responsivo: Um formulário bem estilizado se adapta facilmente a vários tamanhos de tela e dispositivos, garantindo uma experiência de usuário tranquila para todos os visitantes.
• Aumento de Conversões: Um formulário visualmente atraente pode capturar a atenção de um usuário e motivá-lo a concluir a ação desejada, seja inscrever-se em uma newsletter, fazer uma compra ou enviar uma consulta.
• Acessibilidade Aprimorada: Estilizar seus formulários com rótulos claros, espaçamento adequado e cores contrastantes pode melhorar a acessibilidade para usuários com deficiência visual, garantindo que seu site atenda a um público mais amplo.

Agora que você entende a importância de estilizar seus WPForms, é hora de mergulhar no processo passo a passo para estilizar efetivamente seus formulários usando o editor de blocos e aproveitar ao máximo o plugin WPForms.

Como Estilizar WPForms Usando o Editor de Blocos

Siga estas etapas para aprender como estilizar seus WPForms usando o editor de blocos Gutenberg sem a necessidade de escrever nenhum CSS personalizado.

1. Instalar e Ativar o WPForms

O WPForms simplifica o processo de criação e gerenciamento de formulários em seu site. O plugin cria facilmente vários formulários, incluindo formulários de contato, pesquisas, enquetes e formulários de registro, sem conhecimento de codificação.

Estilizar formulários usando WPForms também é fácil, graças à sua interface amigável, amplas opções de personalização e capacidade de criar formulários visualmente atraentes e responsivos usando o editor de blocos.

Para começar com o WPForms, você deve instalar o plugin em seu site WordPress. Depois de ativá-lo, siga as etapas simples abaixo para criar e personalizar a estilização do seu formulário.

2. Criar um Formulário ou Usar um Modelo

Vamos começar a criar seu formulário! No seu painel do WordPress, navegue até WPForms e clique no botão Adicionar Novo.

Quando solicitado, dê um nome ao seu formulário que reflita seu propósito. Em seguida, você tem a opção de escolher um modelo pré-existente ou Criar Formulário em Branco.

Em seguida, o WPForms abrirá sua interface intuitiva de Construtor de Formulários, onde você pode personalizar seu formulário adicionando, editando, excluindo ou reposicionando qualquer campo do formulário.

Após configurar os campos do formulário, você precisará configurar as Notificações por E-mail para ser alertado quando alguém preencher o formulário e clicar no botão de envio.

Você também pode configurar a Mensagem de Confirmação que os usuários veem após o envio do formulário para melhorar a experiência do usuário.

Antes de prosseguir para a próxima etapa, salve as configurações do seu formulário para evitar perder seu progresso. Clique no botão Salvar localizado na parte superior da tela.

3. Habilitar Marcação Moderna

Para aprimorar a acessibilidade e permitir a personalização visual de formulários no editor de blocos, o WPForms oferece o Marcador Moderno.

Para habilitar o Marcador Moderno no WPForms, navegue até a seção Configurações dentro do WPForms e selecione a aba Geral.

Role para baixo até a seção Geral para habilitar a opção Usar Marcador Moderno. Com isso habilitado, você está pronto para estilizar seu formulário através do editor de blocos.

O WPForms versão 1.8.1 e posterior habilita o marcador moderno por padrão para novos usuários, e a opção de desabilitá-lo não está disponível.

Portanto, se você estiver usando a versão mais recente do plugin e não vir essa configuração, você já está pronto e pode começar a estilizar seus formulários.

Comece a personalizar seus formulários no editor de blocos para aproveitar os recursos do marcador moderno, mas primeiro, vamos incorporar o formulário em seu site!

4. Incorporar o Formulário em Seu Site

Para incorporar o formulário que você criou anteriormente, abra uma página existente ou crie uma nova. Procure pelo botão Adicionar Bloco e pesquise pelo bloco WPForms.

Após inserir o bloco WPForms em sua página ou postagem, selecione o formulário desejado no menu suspenso. Agora podemos começar a estilizar seu formulário com o editor de blocos!

5. Editar Estilos do Editor de Blocos

Abra a página ou postagem que contém seu WPForms no editor de blocos. Clique no bloco WPForms para abrir as opções adicionais.

Você descobrirá uma variedade de opções para estilizar campos de formulário, estilos de rótulo e estilos de botão para combinar com a estética da sua marca.

Além disso, a seção Avançado oferece a capacidade de copiar configurações de estilo entre formulários, simplificando ainda mais o processo de estilização.

Aprenda como usar essas várias opções de estilo abaixo para personalizar a aparência do seu formulário e combinar com o design do seu site rapidamente:

Estilos de Campo

Navegue até as opções Estilos de Campo nas configurações do bloco WPForms. Localize as configurações de Tamanho, Raio da Borda e Cor.

Tamanho

Para ajustar o tamanho dos seus campos de formulário, selecione o tamanho desejado na configuração Tamanho. Os tamanhos disponíveis incluem Pequeno, Médio e Grande.

Raio da Borda

Para ajustar a borda dos seus campos de formulário, use a configuração Borda Arredondada para definir o valor de raio desejado. Seus formulários agora podem ter bordas bonitas e arredondadas graças a isso.

Por padrão, a unidade para dimensionar elementos de formulário no WPForms é definida como pixels (px). Clique em Unidade de Medida para revelar um menu suspenso com diferentes opções, como:

• Pixels (PX)
• Porcentagem (%)
• Em quadrat (EM)
• Roentgen equivalent man (REM)
• Largura da viewport (VW)
• Altura da viewport (VH)

Cores

Para ajustar a cor de fundo, borda e texto dos seus campos de formulário, abra a configuração Cores nas configurações do bloco WPForms.

Clique na opção de cor específica que você deseja atualizar, como a cor de fundo. Uma sobreposição aparecerá, mostrando as cores do tema disponíveis para escolher.

Em seguida, clique na amostra de cor para abrir o Seletor de Cores, onde você pode ajustar ainda mais a cor.

Um código de cor hexadecimal pode ser colado na caixa Hex se você já tiver uma cor de marca em mente para seus formulários.

Estilos de Rótulo

Você pode alterar o tamanho e a cor da fonte dos rótulos do seu formulário aqui na seção Estilos de Rótulo. Os tamanhos disponíveis variam de Pequeno a Grande.

Para atualizar as cores dos rótulos, sub-rótulos e mensagens de erro, navegue até a seção Cores. A seguir, uma descrição das opções de cores de rótulo disponíveis.

• Rótulo: Esta configuração determina qual será a cor do rótulo principal do seu campo.
• Sub-rótulo e Dica: Esta configuração determina a tonalidade usada para sub-rótulos e dicas de campo quando o WPForms faz sugestões de valores no frontend.
• Mensagem de Erro:  A cor do texto que aparece se um usuário cometer um erro ao preencher seu formulário.

Estilos de Botão

Para alterar o design dos botões do seu formulário no WPForms, navegue até Estilos de Botão. Clique no menu suspenso abaixo de Tamanho para abri-lo e selecione o tamanho do botão.

Se você quiser dar ao botão um raio de borda, tudo o que você precisa fazer é colocar o valor desejado no campo rotulado Raio da Borda.

Em seguida, na seção rotulada Cores, você encontrará a oportunidade de modificar tanto a cor de fundo quanto a cor do texto do seu botão.

Na maioria dos casos, a cor de fundo do botão também servirá como sua cor de destaque. Como resultado, a cor de fundo do botão também será usada como a cor primária para caixas de seleção, botões de rádio, barras de progresso e campos.

Estilização Avançada

Em configurações Avançadas, você pode acessar o código CSS que inclui todos os estilos personalizados que você aplicou ao seu formulário.

Se você quiser simplesmente mover esses estilos para outro formulário, procure a opção de copiar e colar as configurações de estilo.

Caso queira desfazer as alterações feitas no seu formulário, clique no botão Redefinir Configurações de Estilo. Isso reverterá seu formulário ao seu estilo padrão, desfazendo qualquer personalização anterior.

O campo CLASSE(S) CSS Adicional(is) é onde você pode inserir livremente quaisquer outras classes CSS que você desenvolveu. Leia nosso guia sobre como implementar novas classes CSS para saber mais.

6. Testar e Publicar o Formulário

Agora, é hora de salvar suas alterações publicando a página ou salvando-a como rascunho. Por último, execute um teste rápido para garantir que seu formulário tenha a aparência e funcione como você espera.

Em seguida, Crie Formulários Interativos que Impulsionam o Engajamento

Procurando mais maneiras de personalizar seu WPForms? Confira estas dicas para levar seus formulários para o próximo nível. Se você está procurando aprimorar a aparência ou a funcionalidade do seu formulário, nós temos o que você precisa.

Crie Seu Formulário WordPress Agora

Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.