Como Criar um Formulário WordPress com Barra de Progresso

Você está procurando um plugin de barra de progresso para WordPress?

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

Neste post, mostraremos como adicionar facilmente uma barra de progresso ao seu formulário usando o WPForms.

Crie Seu Formulário WordPress Agora

Como Adicionar uma Barra de Progresso no WordPress?

As barras de progresso são recursos visuais que adicionam funcionalidade e melhoram a experiência do usuário. Elas mostram aos usuários quantas páginas existem em seu formulário e em qual página eles estão atualmente.

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

A maneira mais fácil de adicioná-los aos seus formulários é usar um plugin. A boa notícia, especialmente para iniciantes, é que você 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 instalando o WPForms como nosso construtor de formulários e plugin de barra de progresso.

1. Instale o Plugin WPForms

Primeiro, 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 plugin WPForms no seu computador.

Importante: Você precisará do WPForms Pro, pois ele inclui o campo 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 o WPForms no Seu Site WordPress

Depois de baixar seu arquivo zip, vá para o seu site WordPress onde você gostaria de instalar o WPForms. Em seguida, dentro do painel de administração, vá para Plugins » Adicionar Novo e clique no botão Enviar Plugin.

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

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

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

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

É isso! Agora podemos prosseguir e criar um novo formulário.

2. Crie um Novo Formulário

Para começar, você deve 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 dos Formulários.

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

Na página de Configurações 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á o nome do seu modelo por padrão.

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é-construídos de formulários comumente usados, como formulários de contato, formulários de registro e muito mais, para ajudá-lo a começar rapidamente.

Observação: Se você quiser criar seu formulário do zero, use o modelo 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.

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

Se você tiver alguma dificuldade em criar seu formulário, leia nossas instruções detalhadas sobre como criar e personalizar completamente 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.

Com o construtor de formulários aberto, adicione quaisquer campos que você gostaria de 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 desejar para criar uma nova página de formulário.

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

Personalizando Sua Barra de Progresso

Depois de adicionar uma Quebra de Página, você pode notar que na área de visualização, uma seção Primeira Página apareceu no topo do seu formulário. Este é o espaço reservado para a barra de progresso horizontal. 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, e há várias opções de personalização disponíveis para você.

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

Barra de Progresso:

Círculos:

Conector:

Você tem algumas opções de estilo quando se trata desses formulários de várias páginas. Para alterar a cor do seu Indicador de Progresso, use o seletor de cores ou insira o código hexadecimal.

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

No entanto, se você estiver satisfeito com a aparência do seu formulário como ele é, você 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 aproveitar ao máximo este recurso de formulário.

Você também pode querer permitir que seus usuários salvem o progresso e preencham o restante do seu formulário mais tarde. Esta é uma ótima maneira de reduzir o abandono de formulários e aumentar as taxas de conclusão.

4. Salve e Publique Seu Formulário

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

Você pode adicionar 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 ou selecionar uma página existente para adicionar seu formulário.

Observe que também há uma opção de shortcode, se você quiser incorporar o formulário diretamente em sua página mais tarde. Isso também é útil se você planeja colocar formulários em widgets.

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 escolha em qual página incorporar seu formulário no menu suspenso.

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

Agora você pode ver 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. Assim que as opções aparecerem, clique em Visualizar.

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

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

Recomendamos testar seu formulário preenchendo os campos e enviando-o para garantir que tudo pareça bom e funcione como 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

Gostaria de aumentar seu conhecimento sobre a criação de formulários no WPForms? Certifique-se de conferir nosso guia completo de campos de formulário e como personalizar os campos em seus formulários.

Se você estiver pronto para levar seus formulários para o próximo nível, nosso artigo sobre personalizar seus formulários para combinar com seu tema do WordPress vale a pena ser lido. Você 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 você não sabe CSS, tudo bem. Você não precisa de nenhum CSS personalizado para essas personalizações!

Crie Seu Formulário WordPress Agora

Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor 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.