Utilização de temas de formulários

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

Este tutorial explica como utilizar a funcionalidade de temas de formulários no WPForms.

Nota: A funcionalidade de temas de formulários só está disponível no editor de blocos. Você precisará de um site com suporte ao editor de blocos para acessá-lo. Consulte nosso tutorial sobre como estilizar WPForms sem CSS personalizado para obter mais detalhes.


Antes de começar, certifique-se de que o WPForms está instalado e ativado no seu site WordPress.

Acesso a temas de formulários

Para aceder à funcionalidade de temas de formulários no WPForms, terá primeiro de criar um novo formulário ou editar um existente para aceder ao construtor de formulários.

Também pode utilizar um dos nossos modelos de formulário para começar facilmente. Depois de selecionar um modelo, poderá adicionar novos campos ou editar os campos existentes no modelo selecionado.

Quando terminar de personalizar as opções e definições dos campos do seu formulário, certifique-se de que guarda as alterações e incorpora o formulário numa página ou num post do seu site.

Personalização de temas de formulários

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

Estilo dos temas

Nota: Se estiver a utilizar a versão Lite do WPForms, só terá acesso aos estilos de tema Classic e Default. Você precisará atualizar para uma licença Pro ou superior para acessar os estilos de tema premium.

Nas próximas seções, mostraremos alguns dos temas de formulários que o WPForms fornece imediatamente. Isso lhe dará uma visão geral de como eles ficarão quando aplicados no seu site.

Moderno (Predefinição)

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

Tema moderno predefinido

Depois de selecionar um tema, pode atualizar os estilos do tema de forma semelhante à que faria ao estilizar o seu formulário no editor de blocos.

Quando actualiza qualquer um dos temas, é criada uma cópia do tema original com os novos estilos que adicionou. Este novo tema terá (Copy) anexado ao nome do tema. No nosso exemplo, o nome é Default (Copy).

Cópia do tema predefinido

É possível mudar o nome do tema personalizado actualizando o texto no campo Nome do tema.

Atualizar o nome do tema

Abaixo do campo Nome do tema, encontra-se a ligação Eliminar tema. Esta ligação é útil se pretender eliminar temas de formulários personalizados no seu sítio.

Eliminar tema

Quando clicar nele, aparecerá uma sobreposição a pedir-lhe para confirmar se pretende ou não prosseguir com a ação de eliminação. Basta clicar no botão Sim, eliminar para prosseguir.

Nota: Este passo é irreversível e não será possível aceder ao tema personalizado depois de o apagar do seu sítio.

Confirmar a eliminação

Clássico

O estilo de tema clássico utiliza um CSS mínimo com uma cor de destaque cinzenta para o botão de envio.

Tema clássico

Oceano

O tema do formulário oceânico é semelhante ao estilo Moderno com uma cor de realce azul-petróleo escura para os elementos do formulário, como botões e barras deslizantes de números.

Tema do oceano

Tangerina

O estilo Tangerina utiliza opções de estilo semelhantes para os campos. No entanto, aplica uma cor de realce laranja aos elementos do formulário, como botões, barras de progresso, barras deslizantes de números, etc.

Tema tangerina

Aero

O design Aero aplica uma cor de fundo cinzenta clara ao contentor do formulário com uma cor de destaque azul. Também tem uma sombra de caixa aplicada ao contentor. Isto confere ao formulário um aspeto moderno e elevado.

Tema Aero

Betão

O estilo Concreto utiliza uma cor de realce cor-de-rosa para os elementos do formulário, como botões, paginação e barras deslizantes de números. Também adiciona uma imagem de fundo em betão escuro ao contentor do formulário.

Tema concreto

A primeira vez que selecionar um tema que exija uma imagem de fundo, terá de transferir a imagem antes de os estilos serem aplicados. Será apresentada uma sobreposição a solicitar a transferência da imagem. Clique em Continuar para descarregar e importar a imagem.

Instalar fundo para temas

Nota: O descarregamento da imagem de fundo de um tema também descarregará todas as imagens de stock que outro tema requer. Assim, não será necessário repetir o processo se selecionar um tema com uma imagem de fundo diferente.

Se desejar, pode atualizar a imagem de fundo na secção Estilos de fundo.

Secção de estilos de fundo

Pode escolher entre a biblioteca multimédia do seu site ou fotografias de arquivo como fonte de imagem. Se selecionar a opção Fotografia de arquivo, poderá escolher entre as imagens de arquivo disponíveis, clicando na imagem existente.

Selecionar fotografia de stock

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

Opções de estilos de fundo

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

Clique no botão Remover imagem

Elegância

O estilo de tema Elegance aplica um raio de borda à volta do contentor do formulário. Também utiliza uma imagem de fundo para o widget do contentor do formulário. Dando-lhe um aspeto apelativo e moderno.

Tema da elegância

Fresco

O estilo de tema Fresh adiciona uma imagem de fundo com folhas verdes frescas. Também utiliza o verde como cor de destaque para elementos de formulário, como botões.

Tema fresco

Sombrio

Este estilo de tema de formulário funciona como um tema de modo escuro com um fundo escuro à volta do contentor do formulário. Utiliza uma cor de destaque verde para os elementos do formulário, como botões e campos do cursor numérico.

Tema sombrio

Corredor

O tema Hallway utiliza uma cor de destaque escura para os elementos do formulário, como botões, cursores de números, etc. Aplica também uma imagem de fundo ao contentor do formulário.

Tema do corredor

Lush

Este tema de formulário aplica sombras de caixa e cantos arredondados ao contentor do formulário. Também utiliza uma imagem de stock como fundo do widget do contentor.

Tema exuberante

Monstera

O tema Monstera utiliza um design moderno com uma cor de destaque verde e cantos arredondados para o contentor do formulário. Também aplica uma imagem de stock com bom aspeto como fundo do contentor do formulário.

Tema Monstera

Gama

Este tema de formulário utiliza um design moderno com uma imagem do pôr do sol como fundo. Também aplica estilos como limites, raio do limite e sombras de caixa ao contentor do formulário.

Tema do formulário de intervalo

primavera

O tema do formulário primavera adiciona sombra de caixa ao contentor do formulário e utiliza uma imagem de stock gradiente como fundo. Utiliza também uma cor de destaque azul para elementos do formulário, como o botão de submissão.

Tema da primavera

Vintage

Este tema de formulário tem um aspeto vintage. Utiliza uma cor de fundo personalizada para o contentor do formulário e uma cor de realce amarela para os elementos do formulário.

Tema de forma vintage

Depois de escolher um tema para o seu formulário, terá de publicar a página ou guardá-la como rascunho para guardar as alterações.

Guardar alterações

Uma vez concluído, pode incorporar o formulário em qualquer parte do seu site e este manterá os estilos que configurou na secção Temas.

Perguntas mais frequentes

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

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

Sem dúvida. Depois de selecionar o modelo de formulário que pretende utilizar, incorpore-o numa página com o editor de blocos ativado. No editor de blocos, poderá escolher entre os estilos de tema disponíveis para criar o modelo de formulário. Consulte a secção Personalizar temas de formulários para obter mais detalhes.

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

A seguir, gostaria de saber como aceitar pagamentos através dos seus formulários WordPress? O nosso tutorial sobre como criar um formulário de pagamento cobre todas as etapas em pormenor.

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.