Como Criar um Formulário WordPress com Barra de Progresso

Procura um plugin de barra de progresso para WordPress?

Os indicadores de progresso, como também são conhecidos, irão rastrear e indicar o progresso geral do utilizador à medida que este preenche o formulário.

Neste artigo, vamos mostrar como adicionar facilmente uma barra de progresso ao seu formulário usando o WPForms.

Crie o seu formulário WordPress agora

Como Adicionar uma Barra de Progresso no WordPress?

As barras de progresso são funcionalidades visuais que adicionam funcionalidade e melhoram a experiência do utilizador. Elas mostram aos utilizadores quantas páginas existem no seu formulário e em qual página eles se encontram atualmente.

Ter uma barra de progresso no seu formulário ajuda a reduzir o abandono de formulários, mantendo o seu visitante informado sobre o seu progresso.

A forma mais fácil de os adicionar aos seus formulários é usar um plugin. A boa notícia, especialmente para iniciantes, é que não precisa de um plugin específico de barra de progresso para WordPress. O WPForms é super fácil de usar e simplifica o processo, tornando muito fácil criar formulários de várias páginas com barras de progresso.

Como Criar um Formulário WordPress com Barra de Progresso

Aqui estão os passos que vamos seguir:

Vamos começar por instalar o WPForms como o nosso construtor de formulários e plugin de barra de progresso.

1. Instalar o Plugin WPForms

Primeiro, para ter uma barra de progresso no seu formulário, precisará de adquirir uma Licença WPForms Pro e depois iniciar sessão na sua conta WPForms. Assim que tiver iniciado sessão, clique no separador Downloads.

Isto irá mostrar-lhe uma página com todas as suas licenças disponíveis. Para descarregar o plugin, clique no botão Download WPForms ao lado de uma das suas licenças. Isto irá guardar um ficheiro zip do plugin WPForms no seu computador.

Importante: Precisará do WPForms Pro, pois inclui o campo Quebra de Página. Precisa do campo Quebra de Página se tiver vários passos no seu formulário e para mostrar a barra de progresso.

Instalar o WPForms no Seu Site WordPress

Depois de ter descarregado o seu ficheiro zip, dirija-se ao seu site WordPress onde gostaria de instalar o WPForms. Em seguida, no painel de administração, vá a Plugins » Adicionar Novo e clique no botão Carregar Plugin.

A partir daqui, clique no botão Escolher Ficheiro e selecione o ficheiro zip do WPForms que acabou de descarregar.

Após o seu ficheiro ser carregado, clique no botão Instalar Agora.

Isto iniciará o processo de instalação para si. Assim que o plugin for instalado, clique no botão Ativar Plugin para ativar o WPForms no seu site.

Após ativar o plugin, verifique a sua chave de licença WPForms para receber atualizações automáticas e suporte do plugin. Adicionar a sua chave de licença também lhe permitirá instalar e ativar facilmente os add-ons do WPForms a partir do seu painel WordPress.

É tudo! Podemos agora prosseguir e criar um novo formulário.

2. Criar um Novo Formulário

Para começar, tem de estar com sessão iniciada na sua área de administração do WordPress. Uma vez lá, clique em WPForms na barra lateral de administração para aceder à página de Visão Geral dos Formulários.

Em seguida, para criar um novo formulário, clique no botão Adicionar Novo para iniciar o construtor de formulários WPForms.

Na página de Configuração do construtor de formulários, pode dar um nome ao seu formulário no campo de entrada Nome do Formulário.

Se nenhum nome for escolhido, o nome do formulário será, por defeito, o nome do seu modelo.

Abaixo do campo Nome do Formulário, encontrará centenas de modelos de formulários na secção Selecionar um Modelo. Estes são modelos pré-construídos de formulários de uso comum, como formulários de contacto, formulários de registo e muitos outros, para o ajudar a começar rapidamente.

Nota: Se quiser construir o seu formulário do zero, utilize o modelo Formulário em Branco.

Para selecionar um modelo, pode usar as categorias no menu à esquerda. Pode também usar a barra de pesquisa no canto superior esquerdo da biblioteca de modelos para pesquisar as opções disponíveis.

Assim que encontrar o modelo desejado, passe o rato por cima dele e clique no botão Usar Modelo.

A partir daí, entrará no construtor de formulários e poderá arrastar e largar quaisquer elementos adicionais, se desejar. Pode também alterar o layout do formulário de campos em linha para várias colunas.

Se tiver alguma dificuldade em criar o seu formulário, leia as nossas instruções detalhadas sobre como criar e personalizar completamente o seu formulário.

3. Adicionar Quebras de Página ao Seu Formulário

Está agora pronto para adicionar as suas quebras de página e uma barra de progresso. Ao adicionar uma quebra de página, o formulário incluirá automaticamente a barra de progresso.

Com o construtor de formulários aberto, adicione quaisquer campos que deseje incluir no seu formulário. Em seguida, arraste um campo de Quebra de Página para a área de pré-visualização e largue-o onde desejar criar uma nova página de formulário.

Cada campo de Quebra de Página que adicionar dividirá o formulário em páginas adicionais, e pode adicionar quantas páginas forem necessárias. Para mover a Quebra de Página para uma secção diferente do seu formulário, clique nela na área de pré-visualização e arraste-a para onde desejar.

Personalizar a Sua Barra de Progresso

Depois de adicionar uma Quebra de Página, poderá notar que na área de pré-visualização, uma secção Primeira Página apareceu no topo do seu formulário. Este é o marcador para a barra de progresso horizontal. Clique em Primeira Página / Indicador de Progresso para aceder às opções do seu formulário de várias páginas.

Pode personalizar a sua barra de progresso no menu suspenso Indicador de Progresso, e existem várias opções de personalização disponíveis para si.

Primeiro, escolha os seus estilos de indicador de progresso. O WPForms oferece Barras de Progresso, Barras de Progresso Circulares e Barras de Progresso de Conector.

Barra de Progresso:

Círculos:

Conector:

Tem algumas opções de estilo quando se trata destes formulários de várias páginas. Para alterar a cor do seu Indicador de Progresso, utilize o seletor de cores ou introduza o código hexadecimal.

Finalmente, introduza um nome para o seu formulário no campo Título da Página.

No entanto, se estiver satisfeito com a aparência do seu formulário tal como está, pode ocultar a barra de progresso selecionando Nenhum.

Quer saber mais? Leia as instruções completas sobre como criar formulários de várias páginas para tirar o máximo partido desta funcionalidade do formulário.

Poderá também querer permitir que os seus utilizadores guardem o seu progresso e preencham o restante do seu formulário mais tarde. Esta é uma ótima forma de reduzir o abandono de formulários e aumentar as taxas de conclusão de formulários.

4. Guardar e Publicar o Seu Formulário

Depois de terminar de personalizar o seu formulário, pode publicá-lo. Primeiro, clique no botão Guardar no canto superior direito do seu construtor de formulários.

Pode adicionar o seu formulário ao seu website clicando no botão Incorporar.

A partir daqui, terá a opção de criar uma nova página ou selecionar uma página existente para adicionar o seu formulário.

Note que também existe uma opção de shortcode, se desejar incorporar o formulário diretamente na sua página mais tarde. Isto também é útil se planear colocar formulários em widgets.

Se selecionar a opção Criar Nova Página, ser-lhe-á pedido que introduza um nome para a página. Em seguida, clique no botão Vamos a Isso para incorporar o seu formulário e publicar a sua página.

Se escolher a opção Selecionar Página Existente, ser-lhe-á pedido que escolha em que página incorporar o seu formulário a partir do menu suspenso.

Em seguida, clique no botão Vamos a Isso para incorporar o seu formulário.

Pode agora ver o seu formulário na página selecionada. Vá para a página onde o incorporou ou vá para WPForms » Todos os Formulários. Passe o rato sobre o título do formulário para exibir um menu adicional de opções. Assim que as opções aparecerem, clique em Pré-visualizar.

5. Verificar a Barra de Progresso do Seu Formulário

Terá agora um formulário que terá um indicador de progresso semelhante a este:

Recomendamos que teste o seu formulário preenchendo os campos e enviando-o para garantir que tudo parece bem e funciona como pretende.

Nota: Os campos de quebra de página podem ser movidos para cima ou para baixo no formulário, se desejar ajustar o layout.

Em seguida, Torne-se um Especialista em Construção de Formulários

Gostaria de aumentar o seu conhecimento na construção de formulários com WPForms? Certifique-se de que consulta o nosso guia completo sobre campos de formulário e como personalizar os campos nos seus formulários.

Se estiver pronto para levar os seus formulários para o próximo nível, o nosso artigo sobre personalizar os seus formulários para corresponder ao seu tema WordPress vale a pena a leitura. Aprenderá a personalizar a aparência do seu formulário, botões, cor de fundo e muito mais, diretamente do editor de blocos do WordPress. A melhor parte? Se não sabe CSS, não faz mal. Não precisa de nenhum CSS personalizado para estas personalizações!

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.