Criar Formulários de Várias Páginas

Quer dividir o seu formulário em várias páginas? Um formulário de várias páginas permite-lhe dividir formulários extensos em secções diferentes, tornando-os menos avassaladores e melhorando a experiência do utilizador.

Este tutorial irá mostrar-lhe como criar facilmente formulários de várias páginas com o WPForms.


Primeiro, certifique-se de que o WPForms está instalado e ativado no seu site. Em seguida, terá de criar um novo formulário ou editar um existente.

Criação de um Formulário de Várias Páginas

Assim que o construtor de formulários estiver aberto, adicione os campos que pretende incluir no seu formulário. Em seguida, arraste um campo Quebra de Página para a área de pré-visualização e solte-o onde pretende criar uma nova página do formulário.

Quer começar facilmente? Veja o nosso Modelo de Formulário de Contacto de Várias Páginas pronto a usar.

Adicionar um campo de Quebra de Página a um formulário

Cada campo Quebra de Página que adicionar irá dividir o formulário em páginas adicionais, e pode adicionar quantas páginas forem necessárias. Para mover qualquer Quebra de Página para uma parte diferente do seu formulário, basta clicar nela na área de pré-visualização e arrastá-la para onde desejar.

Personalização das Definições de Página do Formulário

O WPForms oferece várias formas de personalizar os seus formulários de várias páginas, incluindo a adição de títulos de página, a escolha de um estilo de barra de progresso e muito mais.

Títulos de Página, Texto do Botão e Botões Anteriores

Se clicar num campo Quebra de Página na área de pré-visualização do construtor de formulários, o seu painel Opções de Campo será aberto. A partir daqui, pode editar o Título da Página.

Alterar o título da página

Também pode personalizar o texto do botão que os utilizadores irão clicar para ir para a próxima página no campo Etiqueta Seguinte.

Alterar o texto do botão Seguinte

Se também pretender ativar o botão Anterior, ative a opção Mostrar Anterior. Este botão de navegação está oculto por defeito para ajudar a otimizar as conversões, mas pode mostrá-lo aos utilizadores página a página.

Ativar o botão Anterior

Nota: A opção Mostrar Anterior só aparece se tiver mais do que um campo Quebra de Página no seu formulário. Não aparecerá no primeiro campo Quebra de Página do seu formulário.

Quando o botão Anterior estiver ativado, a opção Etiqueta Anterior aparecerá para que possa personalizar o texto do botão.

Editar o texto do botão Anterior

As opções do campo Quebra de Página são tratadas separadamente para cada página do formulário. Se estiver a usar mais do que uma Quebra de Página no seu formulário, pode querer aplicar personalizações ao campo para cada página.

Adicionar um Botão Anterior à Última Página do Seu Formulário

Para mostrar um botão Anterior na última página do seu formulário, clique no divisor abaixo do último campo na área de pré-visualização do construtor de formulários.

Abrir as opções da última página para um formulário com várias páginas

Isto mostrará a opção Mostrar Anterior no painel Opções de Campo.

Exibir o botão Anterior na última página de um formulário com várias páginas

Ative-a para personalizar o texto do seu botão, como descrito acima.

Definições da Primeira Página e Estilos da Barra de Progresso

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

Abrir as opções do campo para a primeira página num formulário com várias páginas

Primeiro, personalize o seu Indicador de Progresso. Esta funcionalidade mostra aos utilizadores quantas páginas existem no seu formulário e em que página se encontram atualmente. No menu pendente Indicador de Progresso, pode ocultar esta funcionalidade selecionando Nenhum.

Desativar o indicador de página para um formulário com várias páginas

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

Barra de Progresso:

O Indicador de Progresso em barra

Aqui está uma pré-visualização em tempo real com o formato Barra de Progresso.

Formulário de SugestõesPasso 1 de 3
Experimente esta Demonstração de Formulário!
Nome

Círculos:

O Indicador de Progresso em círculos

Conector:

O Indicador de Progresso do conector

Nota: O indicador de progresso Conector pode não ser exibido corretamente em dispositivos móveis. Para melhores resultados em todos os dispositivos, incluindo móveis, recomendamos a utilização das opções Barra de Progresso ou Círculos.

Para selecionar uma cor para o seu Indicador de Progresso, utilize o seletor de cores ou introduza o código HEX para a cor que pretende utilizar.

Alterar a cor do Indicador de Progresso

Finalmente, introduza um nome para a primeira página do seu formulário no campo Título da Página.

Alterar o título da primeira página num formulário multipágina

Permitir que os Visitantes Naveguem Entre Páginas

Se pretender que os visitantes se desloquem entre páginas clicando no indicador de progresso, selecione Círculos ou Conector no menu pendente Indicador de Progresso.

Em seguida, ative a opção Permitir Navegação de Página.

Quando esta definição estiver ativada, os visitantes podem clicar num número de página ou passo do conector no indicador de progresso para saltar para uma página diferente no seu formulário.

Qualquer informação que um visitante já tenha introduzido no formulário permanecerá no lugar enquanto se desloca entre páginas antes de submeter o formulário.

Nota: A opção Permitir Navegação de Página só está disponível quando o estilo do Indicador de Progresso está definido como Círculos ou Conector. Se escolher Barra de Progresso, a definição fica indisponível.

Opções Avançadas de Quebra de Página

Nas opções de campo da Primeira Página, pode personalizar ainda mais as definições de Quebra de Página clicando no separador Avançadas.

Aceder às opções avançadas da primeira página de um formulário multipágina

Aqui, encontrará as seguintes definições:

  • Alinhamento da Navegação de Página: Escolha onde colocar os botões de navegação do seu formulário (Esquerda, Direita, Centro ou Dividido).
  • Desativar Animação de Rolagem: Impede a rolagem automática para o topo da página quando os utilizadores clicam no botão Seguinte.
A opção de alinhamento de navegação do campo Separador de Página

Para obter orientações detalhadas sobre como adicionar efeitos de animação às transições de quebra de página no seu formulário, consulte a nossa documentação para programadores.

Também pode adicionar classes CSS aqui. Este código personalizado só será aplicado ao primeiro campo de Quebra de Página no seu formulário. Para adicionar classes CSS a outros campos de Quebra de Página, clique no campo relevante na área de pré-visualização e selecione o separador Avançadas no painel Opções de Campo.

A opção de classes CSS do campo Separador de Página

Recomendamos a adição de CSS personalizado aos seus formulários apenas se for um utilizador experiente. Consulte a nossa documentação para programadores para mais informações sobre como personalizar os seus formulários com código.

Perguntas Frequentes

Abaixo, respondemos a algumas das perguntas mais comuns que recebemos relativamente a formulários de várias páginas.

Tenha em atenção que algumas das FAQs requerem funcionalidades avançadas, como a adição de código ao seu site, sendo, por isso, recomendadas para programadores.

Posso saltar páginas vazias no meu formulário de várias páginas?

Sim, pode ignorar páginas em branco em formulários com várias páginas. Para saber como, consulte o nosso guia sobre como ignorar quebras de página ao usar lógica condicional.

Posso definir o meu formulário de várias páginas para avançar para a próxima página automaticamente com base numa seleção?

Sim, pode configurar o seu formulário com várias páginas para avançar automaticamente para a página seguinte quando um utilizador faz uma seleção. Para instruções detalhadas sobre como configurar isto, consulte a nossa documentação para programadores.

Posso eliminar um campo de Quebra de Página depois de o adicionar ao meu formulário?

Sim, pode eliminar um campo de Quebra de Página, embora o seu ícone de eliminação apareça numa localização diferente da de outros campos. Enquanto a maioria dos campos de formulário mostra o ícone do caixote do lixo na borda direita quando passa o rato sobre eles, o ícone de eliminação do campo Quebra de Página aparece junto ao botão Seguinte.

Para remover um campo de Quebra de Página, basta passar o rato sobre ele na área de pré-visualização e clicar no ícone de lixo junto ao botão Seguinte. Isto eliminará a Quebra de Página e unirá as páginas.

Eliminar campo separador de página

É tudo! Já pode criar formulários com várias páginas com o WPForms.

Em seguida, gostaria de saber como adicionar texto ou instruções adicionais ao seu formulário? Certifique-se de que consulta o nosso tutorial sobre adição de texto não-input para mais detalhes.

O Melhor Plugin Construtor de Formulários Drag and Drop para WordPress

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