Como fazer um formulário com uma barra de progresso

Gostaria de saber como adicionar uma barra de progresso a um formulário?

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

Vamos mostrar como adicionar um ao seu formulário abaixo.

O que é a barra de progresso nos formulários?

As barras de progresso são recursos visuais que mostram aos usuários quantas páginas estão em seu formulário e em qual página eles estão atualmente.

Os indicadores de progresso, como também são conhecidos, acompanharão e indicarão o progresso geral do usuário enquanto ele preenche o formulário.

Como fazer um formulário com uma barra de progresso

Aqui estão os passos que vamos tomar:

1. 1. Instale o plug-in WPForms
   2. Criar um novo formulário
   3. Adicionar quebras de página ao seu formulário
   4. Salve e publique seu formulário
   5. Verifique a barra de progresso do seu formulário

Vamos começar instalando o plugin de formulário que vamos precisar para a barra de progresso.

1. Instale o plug-in WPForms

Em primeiro lugar, para ter uma barra de progresso em seu formulário, você precisará adquirir uma licença WPForms Pro e, em seguida, fazer login na sua conta WPForms. Depois de fazer login, clique na guia Downloads .

Isso mostrará uma página com todas as suas licenças disponíveis. Para baixar o plugin, clique no botão Download WPForms ao lado de uma de suas licenças. Isso salvará um arquivo compactado do plug-in WPForms em seu computador.

Importante: Você precisará do WPForms Pro, pois inclui o campo de quebra de página. Você precisa do campo Quebra de página se tiver várias etapas em seu formulário e para mostrar a barra de progresso.

Instalando WPForms em seu site

Depois de baixar o arquivo zip, vá para o site WordPress onde deseja instalar o WPForms. Em seguida, dentro do painel de administração, vá para Plugins » Adicionar novo e clique no botão Upload Plugin .

A partir daqui, clique no botão Escolher arquivo e selecione o arquivo zip WPForms que você acabou de baixar.

Após o upload do arquivo, clique no botão Instalar agora .

Isso iniciará o processo de instalação para você. Depois que o plug-in estiver instalado, clique no botão Ativar plug -in para ativar o WPForms em seu site.

Depois de ativar o plug-in, verifique sua chave de licença WPForms para receber atualizações automáticas e suporte ao plug-in. Adicionar sua chave de licença também permitirá que você instale e ative facilmente os complementos WPForms de dentro do painel do WordPress.

É isso! Agora podemos ir em frente e criar um novo formulário.

2. Crie um novo formulário

Para começar, você precisará estar logado na sua área de administração do WordPress. Uma vez lá, clique em WPForms na barra lateral de administração para ir para a página Visão geral de 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 Configuração do construtor de formulários, você pode nomear seu formulário no campo de entrada Nome do formulário .

Se nenhum nome for escolhido, o nome do formulário será padronizado para o nome do modelo que você escolher.

Abaixo do campo Nome do formulário, você encontrará centenas de modelos de formulário na seção Selecionar um modelo . Estes são modelos pré-criados de formulários comumente usados ​​para ajudá-lo a começar rapidamente.

Observação: se você quiser criar seu formulário do zero, use o modelo de formulário em branco.

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

Depois de encontrar o modelo desejado, passe o mouse sobre ele e clique no botão Usar modelo .

Se você tiver alguma dificuldade em criar seu formulário, leia nossas instruções detalhadas sobre como criar e personalizar totalmente seu formulário.

3. Adicione quebras de página ao seu formulário

Agora você está pronto para adicionar 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.

Depois de abrir o construtor de formulários, vá em frente e adicione os campos que deseja incluir em seu formulário. Em seguida, arraste um campo de quebra de página para a área de visualização e solte-o onde quiser criar uma nova página de formulário.

Cada campo de quebra de página que você adicionar dividirá o formulário em páginas adicionais e você poderá adicionar quantas páginas forem necessárias. Para mover a quebra de página para uma seção diferente do formulário, basta clicar nela na área de visualização e arrastá-la para onde quiser.

Personalizando sua barra de progresso

Depois de adicionar uma quebra de página, você pode notar que na área de visualização uma área de primeira página apareceu na parte superior do formulário. Clique em Primeira página / Indicador de progresso para acessar as opções do seu formulário de várias páginas.

Você pode personalizar sua barra de progresso no menu suspenso Indicador de progresso.

Você pode então escolher entre os três estilos de Indicador de Progresso: Barra de Progresso , Círculos ou Conector .

Barra de progresso:

Círculos:

Conector:

Para alterar a cor do seu Indicador de Progresso, use o seletor de cores ou insira o código HEX.

Por fim, insira um nome para a primeira página do formulário no campo Título da página .

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

Quer aprender mais? Leia as instruções completas sobre como criar formulários de várias páginas e detalhes de personalização para aproveitar ao máximo esse recurso de formulário.

4. Salve e publique seu formulário

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

Você pode então usar o Assistente de Incorporação para integrar seu formulário ao seu site clicando no botão Incorporar .

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

Se você selecionar a opção Criar nova página , será solicitado que você insira um nome para a página. Em seguida, clique no botão Vamos lá para incorporar seu formulário e publicar sua página.

Se você escolher a opção Selecionar página existente , será solicitado que você escolha em qual página incorporar seu formulário no menu suspenso.

Em seguida, clique no botão Let's Go para incorporar seu formulário.

Agora você pode visualizar seu formulário na página selecionada. Vá para a página em que você o incorporou ou vá para WPForms » Todos os formulários . Passe o mouse sobre o título do formulário para exibir um menu adicional de opções. Quando as opções aparecerem, clique em Visualizar .

5. Verifique a barra de progresso do seu formulário

Agora você terá um formulário que terá um indicador de progresso semelhante a este:

Recomendamos testar seu formulário preenchendo os campos e enviando-o, para garantir que tudo fique bem e funcione da maneira que você deseja.

Observação : Os campos de quebra de página podem ser movidos para cima ou para baixo no formulário se você quiser ajustar o layout.

Em seguida, torne-se um especialista em criação de formulários

Você gostaria de aumentar seu conhecimento de construção do WPForm? Não deixe de conferir nosso guia completo de campos de formulário e como personalizar os campos em seus formulários.

Você está pronto para construir seu formulário agora? Lembre-se de se inscrever no WPForms Pro, pois inclui o campo de quebra de página e a barra de progresso, centenas de modelos gratuitos e também oferecemos uma garantia de reembolso de 14 dias.

Crie seu formulário WordPress agora

Se este artigo o ajudou, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.