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.

Passo 1: Instalar e Ativar o WPForms

O WPForms simplifica o processo de criação e gestão de formulários no seu site. O plugin cria sem esforço vários formulários, incluindo formulários de contacto, inquéritos, votações e formulários de registo, sem conhecimento de codificação, e oferece mais de 2.100 modelos prontos para começar.

O que mais gosto no estilo do WPForms é que cada controlo fica na barra lateral do bloco, mesmo ao lado do formulário que está a editar. Altere um raio de borda ou uma cor de botão e o formulário atualiza-se enquanto vê, pelo que nunca fica preso num ciclo de guardar, atualizar e verificar.

Também não precisa de uma licença paga para nada disto. O estilo do formulário e a biblioteca completa de mais de 40 temas estão disponíveis no WPForms Lite, a versão gratuita, pelo que cada passo neste guia funciona da mesma forma, quer esteja a usar o Lite ou o Pro.

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.

Obtenha o WPForms Grátis Agora

Passo 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ã.

Passo 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, vá a WPForms » Definições e selecione o separador Geral.

Desloque-se para baixo até à secção Geral, onde duas definições trabalham em conjunto para ativar o estilo do editor de blocos. Comece com a definição Incluir Estilo do Formulário e defina-a para Estilo base e tema do formulário.

Esta é a opção que carrega o CSS do qual os seus controlos de estilo dependem, e quando é definida para algo mais restrito, as suas alterações ou não aparecerão no editor de blocos ou não serão transferidas para o front-end.

Em seguida, ative a opção Usar Marcador Moderno. Com esta opção ativada, está tudo pronto para estilizar o seu formulário através do editor de blocos. Guarde as suas alterações antes de sair da página.

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!

Passo 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!

Passo 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 temas, campos de formulário, rótulos, botões e o contentor e fundo onde o seu formulário se encontra, tudo para corresponder à estética da sua marca.

A secção Avançadas também lhe permite copiar definições de estilo entre formulários, o que poupa tempo quando vários formulários precisam do mesmo tratamento.

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:

Temas

O painel Temas é o caminho mais rápido para um formulário reestilizado. O WPForms vem com mais de 40 temas de formulário pré-feitos, e aplicar um requer um único clique.

Cada tema traz a sua própria combinação de cores, bordas, fundo e estilo de botões, pelo que escolher um muda a cor dos seus campos, rótulos, botões, contentor e fundo em conjunto.

Se preferir navegar antes de se comprometer com um, pode ver todos os temas lado a lado primeiro. Assim que aplicar um tema e depois alterar qualquer definição individual, o WPForms guarda a sua versão como um novo tema personalizado e adiciona-o à sua lista de temas.

Utilize o campo Nome do Tema para renomear um tema personalizado para que possa distingui-lo mais tarde. Para se livrar de um que já não deseja, clique no texto Eliminar Tema ao lado do nome do tema.

Estilos de Campo

Abra as opções Estilos de Campo nas definições do bloco WPForms. Aqui encontrará controlos para Tamanho, Borda, Espessura da Borda, Raio da Borda e Cores.

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.

Estilos do Recipiente

Estilos do Contêiner rege a caixa onde o seu formulário se encontra, em vez dos campos dentro dela. É aqui que dá ao formulário algum espaço para respirar, uma borda definida ou um pouco de elevação da página por trás dele.

• Preenchimento: Define o espaço dentro das bordas do contêiner, entre a borda da caixa e o conteúdo do seu formulário. Aumente-o quando os campos parecerem apertados contra as bordas.
• Estilo da Borda: Contorna o contêiner com uma borda Sólida, Tracejada ou Pontilhada.
• Espessura da Borda: Determina a espessura desse contorno. Pixels são o padrão aqui também, e as mesmas opções de unidade aplicam-se.
• Raio da Borda: Arredonda os cantos do contêiner. Valores mais altos dão-lhe uma forma de cartão mais suave, enquanto valores mais baixos mantêm as bordas nítidas.
• Sombra: Adiciona profundidade atrás do contêiner, com tamanhos que variam de nenhum a grande. Uma pequena sombra é geralmente suficiente para elevar um formulário de um fundo simples.
• Cores: Define a cor da borda do contêiner para que a sua borda se ajuste confortavelmente ao resto do seu design.

Estilos de Fundo

Estilos de Fundo dão-lhe controlo sobre o que se encontra atrás do seu formulário, seja uma cor sólida ou uma imagem completa. Para começar com uma imagem, abra o menu suspenso Imagem e escolha de onde ela deve vir.

Biblioteca de Média abre os seus próprios uploads, por isso escolha essa opção quando a imagem já existir no seu site ou quiser carregar uma nova. Fotos de Stock abre uma biblioteca de imagens profissionais em vez disso.

Na primeira vez que escolher Fotos de Stock, o WPForms mostra uma sobreposição a pedir para descarregar a biblioteca de imagens de stock. Clique em Continuar nesse aviso e as fotos ficam disponíveis para navegar.

Depois de fazer a sua seleção, clique em Escolher Imagem para selecionar o ficheiro real. Com uma imagem no lugar, mais quatro definições aparecem no painel:

• Posição: Alinha a imagem dentro do formulário usando opções como Topo Central e Fundo Central, para que controle qual parte da foto é exibida.
• Repetir: Decide como a imagem se repete. Sem Repetição mostra-a uma vez, Repetir repete-a em todo o fundo, e Repetir Horizontal e Repetir Vertical repetem-na ao longo de um único eixo.
• Tamanho: Controla como a imagem se ajusta. Cobrir dimensiona-a para preencher o fundo, independentemente do tamanho do formulário, e Dimensões permite-lhe introduzir uma largura e altura exatas.
• Cores: Define uma cor de fundo simples, que é o que aparece quando não há nenhuma imagem em uso.

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.

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

Depois de guardar a página, clique em Pré-visualizar para ver o formulário real com os seus estilos aplicados. O editor de blocos aproxima-se, mas a pré-visualização mostra o que os seus visitantes verão realmente.

Perguntas Frequentes sobre Estilização do WPForms no Editor de Blocos

Aqui estão as respostas às perguntas que surgem com mais frequência sobre o estilo de formulários WPForms, marcação moderna e temas de formulários.

Porque é que não vejo opções de estilo para o meu bloco WPForms?

Duas definições controlam isto, e ambas estão em WPForms » Definições » Geral. Incluir Estilo do Formulário tem de ser definido como Estilo base e tema do formulário, e Usar Marcação Moderna tem de ser ativado.

Se instalou o WPForms a partir da versão 1.8.1 ou posterior, a marcação moderna já está ativa e a caixa de verificação não aparecerá de todo, por isso verifique primeiro a definição de estilo.

O único bloqueador genuíno é o campo Cartão de Crédito descontinuado, que não é compatível com a marcação moderna, pelo que um formulário que ainda o utilize não pode ser estilizado no editor de blocos até que esse campo seja substituído.

Preciso do WPForms Pro para estilizar os meus formulários?

Não. O estilo do formulário e todos os mais de 40 temas de formulário funcionam no WPForms Lite, a versão gratuita, pelo que cada passo deste guia funciona numa instalação gratuita.

O Pro adiciona funcionalidades como add-ons de pagamento, inquéritos e lógica condicional em pagamentos, embora nada disso seja necessário para alterar a aparência dos seus formulários.

O meu formulário manterá os seus estilos se o incorporar noutra página?

Os estilos aplicados no construtor WPForms em Definições » Temas guardam-se com o formulário e seguem-no para todo o lado, cobrindo incorporações de shortcode, o bloco WPForms e o módulo Divi. Os estilos aplicados no editor de blocos ficam apenas nessa única incorporação.

Assim, pode estilizar um formulário uma vez no construtor para um visual consistente em todo o seu site, e depois substituir as cores numa única página de destino sem tocar no original.

Posso estilizar o WPForms sem o editor de blocos?

Sim. O construtor WPForms tem os mesmos painéis em Definições » Temas, e tudo o que definir lá aplica-se a todo o site.

O Elementor tem os seus próprios controlos de estilo, pelo que pode personalizar os seus formulários no Elementor em vez disso, e essas alterações permanecem nessa página.

O Divi funciona de forma diferente, uma vez que o seu módulo WPForms expõe apenas as próprias definições de dimensionamento e espaçamento do Divi, pelo que estilize o formulário no construtor e a incorporação do Divi irá captá-lo.

Como faço alterações de estilo que o editor de blocos não oferece?

Adicione as suas próprias classes na caixa Classes CSS Adicionais no painel Avançado, e depois escreva o CSS para corresponder a elas.

O guia de CSS personalizado ligado na secção Estilo Avançado acima cobre as classes que o WPForms já aplica, que é o que vai querer direcionar.

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.

Estilize os Seus Formulários WordPress Agora

Pronto para construir 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.