Usando Temas de Formulário

Pronto para melhorar o design geral dos seus formulários sem escrever nenhum CSS personalizado? O recurso de temas de formulário no WPForms oferece designs prontos que você pode aplicar facilmente ao seu formulário.

Este tutorial abrange como usar o recurso de temas de formulário no WPForms.

---

Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site WordPress.

Acessando Temas de Formulário

Para acessar o recurso de temas de formulário no WPForms, você precisará primeiro criar um novo formulário ou editar um existente para acessar o construtor de formulários.

Você também pode usar um de nossos modelos de formulário para começar facilmente. Após selecionar um modelo, você poderá adicionar novos campos ou editar campos existentes no modelo que selecionou.

Depois de personalizar as opções e configurações dos campos do seu formulário, certifique-se de salvar suas alterações e incorporar o formulário a uma página ou postagem em seu site.

Personalizando Temas de Formulário

No editor de blocos, você verá opções para estilizar e personalizar seus formulários WordPress. A seção Temas inclui todos os estilos de tema disponíveis que o WPForms oferece.

Nas próximas seções, apresentaremos alguns dos temas de formulário que o WPForms oferece. Isso lhe dará uma visão geral de como eles ficarão quando aplicados em seu site.

Moderno (Padrão)

Este é o tema aplicado a todos os formulários do seu site por padrão. Ele usa uma cor de destaque azul para elementos como o botão de envio e a barra de progresso.

Após selecionar um tema, você pode atualizar os estilos do tema de forma semelhante a como você faria ao estilizar seu formulário no editor de blocos.

Depois de atualizar qualquer um dos temas, ele cria uma cópia do tema original com os novos estilos que você adicionou. Este novo tema terá (Cópia) anexado ao nome do tema. Para nosso exemplo, o nome é Padrão (Cópia).

Você pode renomear o tema personalizado atualizando o texto no campo Nome do Tema.

Abaixo do campo Nome do Tema, você encontrará o link Excluir Tema. Este link é útil se você quiser excluir temas de formulário personalizados em seu site.

Ao clicar nele, uma sobreposição aparecerá pedindo para confirmar se você deseja prosseguir com a ação de exclusão. Simplesmente clique no botão Sim, Excluir para prosseguir.

Clássico

O estilo de tema clássico usa CSS mínimo com uma cor de acento cinza para o botão de envio.

Oceano

O tema de formulário oceânico se parece com o estilo Moderno, com uma cor de acento verde-azulado escura para elementos do formulário, como botões e controles deslizantes de números.

Tangerina

O estilo Tangerine usa opções de estilo semelhantes para os campos. No entanto, ele aplica uma cor de acento laranja a elementos do formulário, como botões, barras de progresso, controles deslizantes de números, etc.

Aero

O design Aero aplica uma cor de fundo cinza claro ao contêiner do formulário com uma cor de acento azul. Ele também tem uma sombra de caixa aplicada ao contêiner. Isso dá ao formulário uma aparência e sensação modernas e elevadas.

Concreto

O estilo Concrete usa uma cor de acento rosa para elementos do formulário, como botões, paginação e controles deslizantes de números. Ele também adiciona uma imagem de fundo de concreto escuro ao contêiner do formulário.

Na primeira vez que você selecionar um tema que requer uma imagem de fundo, você precisará baixar a imagem antes que os estilos sejam aplicados. Uma sobreposição aparecerá solicitando que você baixe a imagem. Clique em Continuar para baixar e importar.

Se desejar, você pode atualizar a imagem de fundo na seção Estilos de Fundo.

Você pode escolher entre a biblioteca de mídia do seu site ou fotos de estoque como fonte da imagem. Se você selecionar a opção Foto de Estoque, poderá escolher entre as imagens de estoque disponíveis clicando na imagem existente.

A seção Estilos de Fundo também contém opções para personalizar o tamanho, a posição e a repetição da imagem.

Se desejar remover a imagem de fundo, clique no botão Remover Imagem.

Elegância

O estilo de tema Elegance aplica um raio de borda ao redor do contêiner do formulário. Ele também usa uma imagem de fundo para o widget do contêiner do formulário. Dando a ele uma aparência moderna e atraente.

Fresco

O estilo de tema Fresh adiciona uma imagem de fundo com folhas verdes frescas. Ele também usa verde como cor de acento para elementos do formulário, como botões.

Sombrio

Este estilo de tema de formulário atua como um tema de modo escuro com um fundo escuro ao redor do contêiner do formulário. Ele usa uma cor de acento verde para elementos do formulário, como botões e campos de controle deslizante de números.

Corredor

O tema Hallway usa uma cor de acento escura para elementos do formulário, como botões, controles deslizantes de números, etc. Ele também aplica uma imagem de fundo ao contêiner do formulário.

Exuberante

Este tema de formulário aplica sombras de caixa e cantos arredondados ao contêiner do formulário. Ele também usa uma imagem de estoque como fundo do widget do contêiner.

Costela-de-adão

O tema Monstera usa um design moderno com uma cor de acento verde e cantos arredondados para o contêiner do formulário. Ele também aplica uma imagem de estoque de aparência agradável como fundo do contêiner do formulário.

Alcance

Este tema de formulário usa um design moderno com uma imagem de pôr do sol como fundo. Ele também aplica estilos como bordas, raio de borda e sombras de caixa ao contêiner do formulário.

Primavera

O tema de formulário Primavera adiciona sombra às caixas do contêiner do formulário e usa uma imagem de fundo com gradiente. Ele também usa uma cor de destaque azul para elementos do formulário, como o botão de envio.

Vintage

Este tema de formulário vem com um visual vintage. Ele usa uma cor de fundo personalizada para o contêiner do formulário e uma cor de destaque amarela para os elementos do formulário.

Após escolher um tema para o seu formulário, você precisará publicar a página ou salvá-la como rascunho para salvar suas alterações.

Uma vez feito isso, você pode incorporar o formulário em qualquer parte do seu site e ele reterá os estilos que você configurou na seção Temas.

Perguntas Frequentes

Estas são respostas para algumas das principais perguntas que vemos sobre o uso de temas de formulário no WPForms.

Posso aplicar estilos de tema de formulário a modelos de formulário?

Com certeza. Depois de selecionar o modelo de formulário que deseja usar, prossiga para incorporá-lo em uma página com o editor de blocos ativado. No editor de blocos, você poderá escolher entre os estilos de tema disponíveis para projetar seu modelo de formulário. Veja a seção personalizando temas de formulário para mais detalhes.

É isso! Agora você aprendeu como acessar e usar temas de formulário no WPForms.

Em seguida, você gostaria de aprender como aceitar pagamentos através dos seus formulários WordPress? Nosso tutorial sobre criação de um formulário de pagamento cobre todas as etapas em detalhes.