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.

Etapa 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 sem esforço vários formulários, incluindo formulários de contato, pesquisas, enquetes e formulários de registro, sem conhecimento de codificação, e oferece mais de 2.100 modelos prontos para você começar.

O que mais gosto na estilização do WPForms é que cada controle fica na barra lateral do bloco, bem ao lado do formulário que você está editando. Altere um raio de borda ou a cor de um botão e o formulário é atualizado enquanto você assiste, então você nunca fica preso em um loop de salvar, atualizar e verificar.

Você também não precisa de uma licença paga para nada disso. A estilização de formulários e a biblioteca completa de mais de 40 temas estão disponíveis no WPForms Lite, a versão gratuita, então cada etapa deste guia funciona da mesma forma, quer você esteja usando Lite ou Pro.

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.

Obtenha o WPForms Grátis Agora

Etapa 2: Crie um Formulário ou Use 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.

Etapa 3: Ative a 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 ativar o Marcador Moderno no WPForms, vá para WPForms » Configurações e selecione a aba Geral.

Role para baixo até a seção Geral, onde duas configurações trabalham juntas para ativar a estilização do editor de blocos. Comece com a configuração Incluir Estilização do Formulário e defina-a como Estilização de base e tema do formulário.

Esta é a opção que carrega o CSS do qual seus controles de estilo dependem, e quando ela é definida para algo mais restrito, 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 isso ativado, você está pronto para estilizar seu formulário através do editor de blocos. Salve suas alterações antes de sair da página.

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!

Etapa 4: Incorpore 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!

Etapa 5: Edite os 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 temas, campos de formulário, rótulos, botões e o contêiner e plano de fundo em que seu formulário se encontra, tudo para combinar com a estética da sua marca.

A seção Avançado também permite copiar configurações de estilo entre formulários, o que economiza tempo quando vários formulários precisam do mesmo tratamento.

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:

Temas

O painel Temas é a rota mais rápida para um formulário reestilizado. O WPForms vem com mais de 40 temas de formulário pré-fabricados, e aplicar um leva um único clique.

Cada tema carrega sua própria combinação de cores, bordas, plano de fundo e estilo de botão, então escolher um recoleoriza seus campos, rótulos, botões, contêiner e plano de fundo juntos.

Se você preferir navegar antes de se comprometer com um, pode ver todos os temas lado a lado primeiro. Depois de aplicar um tema e alterar qualquer configuração individual, o WPForms salva sua versão como um novo tema personalizado e o adiciona à sua lista de temas.

Use o campo Nome do Tema para renomear um tema personalizado para que você possa identificá-lo mais tarde. Para se livrar de um que você não quer mais, clique no texto Excluir Tema ao lado do nome do tema.

Estilos de Campo

Abra as opções Estilos de Campo nas configurações do bloco WPForms. Aqui você encontrará controles 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 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.

Estilos de Contêiner

Estilos do Contêiner governa a caixa em que seu formulário se encontra, em vez dos campos dentro dela. É aqui que você dá ao formulário algum espaço, uma borda definida ou um pequeno destaque da página atrá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 se aplicam.
• Raio da Borda: Arredonda os cantos do contêiner. Valores mais altos proporcionam 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 destacar um formulário de um fundo simples.
• Cores: Define a cor da borda do contêiner para que sua borda se encaixe confortavelmente com o resto do seu design.

Estilos de Fundo

Estilos de Fundo oferece controle sobre o que fica 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 seus próprios uploads, então escolha essa opção quando a imagem já estiver em seu site ou você quiser carregar uma nova. Fotos de Banco de Imagens abre uma biblioteca de imagens profissionais em vez disso.

Na primeira vez que você escolher Fotos de Banco de Imagens, o WPForms mostrará uma sobreposição pedindo para você baixar a biblioteca de imagens de banco de imagens. Clique em Continuar nesse aviso e as fotos ficarão disponíveis para navegação.

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

• Posição: Alinha a imagem dentro do formulário usando opções como Topo Central e Inferior Central, para que você controle qual parte da foto é exibida.
• Repetir: Decide como a imagem é repetida. Sem Repetir a exibe uma vez, Repetir a repete em todo o fundo, e Repetir Horizontal e Repetir Vertical a repetem em um único eixo.
• Tamanho: Controla como a imagem se ajusta. Cobrir a dimensiona para preencher o fundo, independentemente do tamanho do formulário, e Dimensões permite que você insira uma largura e altura exatas.
• Cores: Define uma cor de fundo sólida, que é o que aparece quando nenhuma imagem está em uso.

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.

Etapa 6: Teste e Publique 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.

Depois que a página for salva, clique em Visualizar para ver o formulário real com seus estilos aplicados. O editor de blocos chega perto, mas a visualização mostra o que seus visitantes realmente verão.

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

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

Por que não vejo nenhuma opção de estilo para meu bloco WPForms?

Duas configurações controlam isso, e ambas estão em WPForms » Configurações » Geral. Incluir Estilo do Formulário deve ser definido como Estilo base e do tema do formulário, e Usar Marcação Moderna deve ser ativado.

Se você instalou o WPForms na versão 1.8.1 ou posterior, a marcação moderna já está ativada e a caixa de seleção não aparecerá, então verifique primeiro a configuração de estilo.

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

Preciso do WPForms Pro para estilizar meus formulários?

Não. A estilização de formulários e todos os mais de 40 temas de formulários funcionam no WPForms Lite, a versão gratuita, portanto, cada etapa deste guia é executada em uma instalação gratuita.

O Pro adiciona recursos como addons de pagamento, pesquisas e lógica condicional em pagamentos, embora nada disso seja necessário para alterar a aparência dos seus formulários.

Meu formulário manterá seus estilos se eu o incorporar em outra página?

Estilos aplicados no construtor WPForms em Configurações » Temas são salvos com o formulário e o acompanham em todos os lugares, cobrindo incorporações de shortcode, o bloco WPForms e o módulo Divi. Estilos aplicados no editor de blocos permanecem apenas nessa incorporação.

Assim, você pode estilizar um formulário uma vez no construtor para um visual consistente em todo o seu site e, em seguida, substituir as cores em uma ú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 Configurações » Temas, e qualquer coisa que você definir lá se aplica a todo o site.

O Elementor tem seus próprios controles de estilo, então você pode personalizar seus formulários no Elementor em vez disso, e essas alterações permanecem nessa página.

O Divi funciona de forma diferente, já que seu módulo WPForms expõe apenas as configurações de dimensionamento e espaçamento do próprio Divi, então estilize o formulário no construtor e a incorporação do Divi o captará.

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

Adicione suas próprias classes na caixa Classe(s) CSS Adicional(is) no painel Avançado, então escreva o CSS para combiná-las.

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

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.

Estilize Seus Formulários WordPress Agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação 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.