Como Estilizar o WPForms Usando o Editor de Blocos

Pretende estilizar o WPForms usando o editor de blocos para formulários visualmente apelativos e fáceis de usar no seu site WordPress?

O WPForms é um plugin intuitivo que simplifica a criação e gestão de formulários, ao mesmo tempo que oferece extensas opções de personalização. Ao alavancar o editor de blocos, pode estilizar facilmente os seus formulários para melhorar a sua experiência de utilizador.

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

Crie o seu formulário WordPress agora

Porque Precisa de Estilizar os Seus Formulários?

Ao estilizar os seus formulários, pode melhorar a estética do seu website, garantindo que contribui para uma experiência de utilizador positiva. Eis algumas outras razões importantes pelas quais a estilização de formulários é crucial para o seu website:

• Branding Consistente: Criar um formulário com a marca que corresponda ao design e esquema de cores do seu website garante uma imagem de marca consistente.
• Melhor Experiência de Utilizador: Formulários bem concebidos facilitam a navegação/submissão das informações necessárias pelos utilizadores, levando a taxas de conclusão de formulários mais elevadas.
• Design Responsivo: Um formulário bem estilizado adapta-se sem esforço a vários tamanhos de ecrã e dispositivos, garantindo uma experiência de utilizador fluida para todos os visitantes.
• Aumento de Conversões: Um formulário visualmente apelativo pode captar a atenção de um utilizador e motivá-lo a concluir a ação desejada, seja a inscrição numa newsletter, a realização de uma compra ou o envio de uma consulta.
• Acessibilidade Melhorada: Estilizar os seus formulários com rótulos claros, espaçamento adequado e cores contrastantes pode melhorar a acessibilidade para utilizadores com deficiência visual, garantindo que o seu website atende a um público mais amplo.

Agora que compreende a importância de estilizar os seus WPForms, é hora de mergulhar no processo passo a passo para estilizar eficazmente os seus formulários utilizando o editor de blocos e tirar o máximo partido do plugin WPForms.

Como Estilizar o WPForms Usando o Editor de Blocos

Siga estes passos para aprender a estilizar os seus WPForms utilizando o editor de blocos Gutenberg sem a necessidade de escrever qualquer CSS personalizado.

1. Instalar e Ativar o WPForms

O WPForms simplifica o processo de criação e gestão de formulários no seu website. O plugin cria sem esforço vários formulários, incluindo formulários de contacto, inquéritos, sondagens e formulários de registo, sem conhecimento de codificação.

A estilização de formulários com o WPForms também é uma brisa, graças à sua interface fácil de usar, amplas opções de personalização e capacidade de criar formulários visualmente apelativos e responsivos utilizando o editor de blocos.

Para começar com o WPForms, tem de instalar o plugin no seu site WordPress. Assim que o tiver ativado, siga os passos 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 o seu formulário! No seu painel WordPress, navegue até WPForms e clique no botão Adicionar Novo.

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

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

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

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

Antes de prosseguir para o próximo passo, guarde as definições do seu formulário para evitar perder o seu progresso. Clique no botão Guardar localizado no topo do ecrã.

3. Ativar Marcação Moderna

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

Para ativar o Marcador Moderno no WPForms, navegue até à secção Definições dentro do WPForms e selecione o separador Geral.

Desloque-se para baixo até à secção Geral para ativar a opção Usar Marcador Moderno. Com esta opção ativada, está pronto para estilizar o seu formulário através do editor de blocos.

O WPForms versão 1.8.1 e posterior ativa o marcador moderno por defeito para novos utilizadores, e a opção de o desativar não está disponível.

Portanto, se estiver a usar a versão mais recente do plugin e não vir esta definição, já está pronto para começar a estilizar os seus formulários.

Comece a personalizar os seus formulários no editor de blocos para tirar partido das funcionalidades do marcador moderno, mas primeiro, vamos incorporar o formulário no seu site!

4. Incorporar o Formulário no Seu Site

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

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

5. Editar Estilos a Partir do Editor de Blocos

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

Descobrirá uma variedade de opções para estilizar campos de formulário, estilos de rótulo e estilos de botão para corresponder à estética da sua marca.

Adicionalmente, a secção Avançada oferece a capacidade de copiar as definições de estilo entre formulários, simplificando ainda mais o processo de estilização.

Aprenda como usar estas várias opções de estilo abaixo para personalizar a aparência do seu formulário e corresponder ao design do seu site num instante:

Estilos de Campo

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

Tamanho

Para ajustar o tamanho dos seus campos de formulário, selecione o tamanho desejado na definiçã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 definição Raio da Borda para definir o valor de raio desejado. Os seus formulários podem agora ter cantos agradáveis e arredondados graças a isto.

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

• Pixels (PX)
• Porcentagem (%)
• Quadrado de Em (EM)
• Roentgen equivalente homem (REM)
• Largura da Janela de Visualização (VW)
• Altura da Janela de Visualização (VH)

Cores

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

Clique na opção de cor específica que pretende atualizar, como a cor de fundo. Surgirá uma sobreposição, mostrando as cores de tema disponíveis para escolher.

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

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

Estilos de Rótulo

Pode agora alterar o tamanho e a cor da letra dos seus rótulos de formulário aqui na secçã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é à secção Cores. Segue-se uma descrição das opções de cor de rótulo disponíveis.

• Rótulo: Esta definição determina a cor do rótulo principal do seu campo.
• Sub-rótulo e Dica: Esta definição determina a tonalidade utilizada 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 utilizador cometer um erro ao preencher o 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 o abrir e selecione o tamanho do botão.

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

Em seguida, na secção rotulada Cores, encontrará a oportunidade de modificar tanto a cor de fundo como a cor do texto do seu botão.

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

Estilização Avançada

Em Definições Avançadas, pode aceder ao código CSS que inclui todos os estilos personalizados que aplicou ao seu formulário.

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

Caso pretenda anular as alterações feitas ao seu formulário, clique no botão Repor Definições de Estilo. Isto reverterá o seu formulário para o seu estilo predefinido, anulando qualquer personalização anterior.

O campo CLASSE(S) CSS Adicional(is) é onde pode introduzir livremente quaisquer outras classes CSS que tenha desenvolvido. Leia o nosso guia sobre como implementar novas classes CSS para saber mais.

6. Testar e Publicar o Formulário

Agora, é hora de guardar as suas alterações, publicando a página ou guardando-a como rascunho. Por último, execute um teste rápido para garantir que o seu formulário tem o aspeto e funciona como espera.

Em seguida, Crie Formulários Interativos que Aumentem o Envolvimento

Procura mais formas de personalizar o seu WPForms? Consulte estas dicas para levar os seus formulários para o próximo nível. Quer esteja a procurar melhorar a aparência ou a funcionalidade do seu formulário, nós temos o que precisa.

Crie o seu formulário WordPress agora

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

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