Pré-visualizar uma entrada de formulário com o WPForms

Como pré-visualizar uma entrada de formulário antes de a submeter

Pretende que os seus visitantes visualizem as entradas do formulário antes de as submeterem?

Permitir que os utilizadores visualizem as suas entradas reduz grandemente as hipóteses de erros e imprecisões durante o preenchimento dos formulários.

O WPForms tem um campo de pré-visualização de entradas que pode adicionar facilmente aos seus formulários, para que os seus utilizadores possam ver um resumo rápido das suas entradas durante e após a submissão.

Neste post, mostraremos como adicionar o campo Entry Preview e personalizá-lo de diferentes maneiras no WPForms.

Criar um formulário com pré-visualizações de entradas agora

Como pré-visualizar uma entrada de formulário antes de a submeter

Consulte o nosso tutorial passo a passo para saber como pode adicionar uma pré-visualização de envio aos seus formulários.

Vamos começar.

1. Instalar o WPForms

Para começar, escolha um plano WPForms adequado e registe a sua conta. Em seguida, faça login na área da sua conta do WPForms e clique na guia Downloads. Isso abrirá uma página onde você pode pressionar o botão Download WPForms para baixar o arquivo zip.

Descarregar o botão WPForms

Enquanto estiver nesta página, certifique-se de copiar sua chave de licença. Você precisará dela mais tarde quando estiver ativando o WPForms Pro no seu site WordPress.

Chave de licença WPForms

Depois de o ficheiro zip ter sido transferido para o seu computador, abra o painel de administração do WordPress e clique em Plugins " Adicionar novo. Em seguida, clique no botão Upload Plugin.

Carregar plugin

Agora, clique no botão Choose File (Escolher ficheiro ) e escolha o ficheiro do plugin que acabou de descarregar.

Seta vermelha a apontar para o botão Escolher ficheiro

Clique em Instalar agora quando o ficheiro for carregado.

Instalar agora wpforms

O WPForms será instalado no seu site WordPress. Isso deve levar apenas alguns segundos. Quando a instalação terminar, pressione o botão Activate Plugin.

Ativar o plugin WPForms

Agora clique em WPForms " Configurações. Isso abrirá a guia Configurações gerais por padrão. Role para baixo para encontrar o campo Chave de licença e insira sua chave aqui (que você copiou anteriormente).

Chave de licença WPForms

Em seguida, clique no botão Verificar chave. Isso completará a instalação do WPForms Pro no seu site.

2. Adicionar um novo formulário

Agora, abra a área de administração do WordPress do seu site e clique em WPForms " Adicionar novo na barra lateral esquerda. Pode agora dar um nome ao seu formulário para que seja mais fácil encontrá-lo mais tarde.

Adicionar novo formulário

Role para baixo para selecionar um modelo para começar a construir seu formulário. Como todos os campos do WPForms, o campo Entry Preview é suportado na maioria dos mais de 2.000 modelos de formulários disponíveis.

Selecionar modelo

Quando tiver selecionado um modelo, vamos adicionar o campo Pré-visualização de entrada no passo seguinte.

3. Adicionar o campo de pré-visualização do registo de formulário

No exemplo seguinte, estamos a utilizar um formulário personalizado de marcação de consultas, mas pode utilizar qualquer modelo de formulário à sua escolha.

Para adicionar uma funcionalidade de pré-visualização ao seu formulário, basta arrastar e largar o campo Pré-visualização de entrada do painel esquerdo do construtor para o painel direito, onde se encontram os campos reais do formulário.

Pré-visualização simples do formulário de contacto

Quando adiciona o campo Pré-visualização de entrada ao seu formulário, este adiciona automaticamente uma nova página onde a pré-visualização será apresentada.

O campo Pré-visualização de entrada com quebra de página na área de pré-visualização do criador de formulários

É assim que a pré-visualização aparece em ação quando um utilizador está a preencher um formulário:

Pré-visualização do formulário simples

Também pode colocar o campo Pré-visualização de entrada várias vezes no seu formulário. Por exemplo, se tiver um formulário de várias páginas, pode colocar um campo de Pré-visualização de entrada após cada página. Isto significa que os seus utilizadores podem pré-visualizar as informações que preencheram nas páginas anteriores enquanto continuam a preencher o resto do seu formulário.

pré-visualização de campos de entrada de formulários múltiplos

A adição de vários campos de pré-visualização de entrada nos seus formulários longos é uma excelente forma de garantir que os seus utilizadores podem pré-visualizar as suas entradas e voltar atrás em qualquer altura para fazer alterações, se necessário.

4. Personalizar o aviso e o estilo da pré-visualização

O WPForms permite-lhe personalizar o aviso de pré-visualização. Basta clicar no campo Entry Preview na visualização do construtor de formulários para abrir as configurações do campo.

Pode utilizar o botão de alternância Exibir aviso de pré-visualização para mostrar a mensagem acima da pré-visualização da entrada ou ocultá-la completamente.

Ativar o aviso do campo Pré-visualização de entrada

Além disso, tem a liberdade de editar o aviso de pré-visualização a seu gosto ou deixar a mensagem predefinida como está.

Em seguida, poderá querer alterar o estilo de pré-visualização da entrada. Clique no separador Avançadas nas opções do campo Pré-visualização de entradas para escolher entre 4 estilos de pré-visualização diferentes:

  • Básico
  • Compacto
  • Tabela
  • Mesa, compacta

Seleção de um estilo de Pré-visualização de entrada

O estilo predefinido é o Básico, que apresenta uma pré-visualização linha a linha da entrada do formulário.

Pré-visualização do formulário simples

Se quiser dar à sua pré-visualização um aspeto mais apertado, pode optar pela opção de estilo compacto .

Forma de estilo compacto

Isto completa a configuração do campo Pré-visualização de entrada nos seus formulários. Mas há outro tipo de pré-visualização de entrada que pode adicionar, como mostramos no passo seguinte.

5. Adicionar confirmação de pré-visualização de entrada

Para além das pré-visualizações de entrada que aparecem quando está a preencher um formulário, o WPForms também lhe permite apresentar pré-visualizações depois de um utilizador ter submetido um formulário.

Ao contrário do campo Pré-visualização de entrada, os seus utilizadores não têm a possibilidade de alterar as suas entradas quando é apresentada uma confirmação de pré-visualização. Em vez disso, apenas mostra aos seus utilizadores uma cópia da sua submissão que já não pode ser alterada.

Para configurar as confirmações de visualização de entrada, vá para Configurações " Confirmações no construtor de formulários WPForms. Aqui, você pode ativar o botão Mostrar visualização da entrada após a mensagem de confirmação.

Ativar a confirmação da pré-visualização da entrada

Quando ativar esta opção, verá aparecer um menu pendente que lhe permite escolher um estilo de pré-visualização, tal como mostrámos acima para os campos de pré-visualização de entrada.

Seleção do estilo de confirmação da pré-visualização da entrada

Pode continuar a utilizar as Pré-visualizações de entradas (que aparecem quando um formulário está a ser preenchido) juntamente com a confirmação de pré-visualização (que só aparece depois de as entradas terem sido submetidas). Ou pode utilizar apenas uma ou outra destas opções. Tudo depende das suas preferências e do que pretende alcançar com os seus formulários.

Confirmação da pré-visualização

E é isso mesmo! Agora pode permitir que os seus utilizadores visualizem uma entrada de formulário antes de a submeterem.

Porque é que deve mostrar uma pré-visualização de entrada?

A possibilidade de pré-visualizar entradas é muito útil, especialmente quando se trata de formulários mais longos e complexos.

É normal cometer erros de digitação e erros ao preencher um formulário, mas uma pré-visualização antes da apresentação permite-lhe rever a exatidão das informações antes de premir o botão de apresentação.

Portanto, se quiser minimizar os erros e dar aos seus utilizadores a possibilidade de corrigir quaisquer erros antes da submissão, deve incluir o campo Entry Preview oferecido pelo WPForms.

A seguir, Impor restrições de acesso aos formulários do WordPress

Quer restringir os seus formulários WordPress apenas a utilizadores com sessão iniciada? O WPForms permite-lhe selecionar os níveis de permissão do utilizador pelo seu estado de login. Veja nosso artigo sobre como restringir os formulários do WordPress a usuários logados para saber mais.

Também pode querer ler o nosso guia sobre os melhores plug-ins de barra de notificação do WordPress para promover as suas vendas e ofertas especiais no seu site.

Criar um formulário com pré-visualizações de entradas agora

Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

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

Divulgação: O nosso conteúdo é apoiado pelos leitores. Isso significa que se você clicar em alguns de nossos links, podemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso é importante e como você pode nos apoiar.

Osama Tahir

Osama é um escritor sénior da WPForms. Ele é especialista em desmontar plugins do WordPress para testar e compartilhar suas idéias com o mundo.Saiba mais

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.

6 comentários sobre "Como pré-visualizar uma entrada de formulário antes de a submeter"

  1. A informação é interessante, mas não é totalmente claro como fazer uma confirmação total do formulário. Situação: temos um formulário de várias páginas e queremos confirmar todo o formulário no final. Não cada página separadamente.

    1. Olá Karina,

      A pré-visualização de entradas deve funcionar muito bem com várias páginas. No caso de várias páginas, recomendamos que a pré-visualização da entrada seja colocada na sua própria página, no final do formulário, para que os utilizadores só a vejam depois de preencherem os restantes campos. Desta forma, será possível visualizar toda a pré-visualização do formulário.

      Caso seja útil, aqui está o nosso excelente artigo sobre o mesmo.

      Espero que isto ajude!

    1. Olá Cláudio,

      Atualmente, não dispomos de uma funcionalidade nativa para apresentar a descrição do campo na Pré-visualização da entrada antes da apresentação. Adicionei o seu voto para que esta funcionalidade seja considerada no futuro.

      Obrigado!

  2. Estou a utilizar os botões de rádio de vários itens do Stripe. Existe alguma forma de impedir que a pré-visualização mostre o montante que será cobrado?
    Por exemplo, tenho o montante no texto do botão de opção. É confuso mostrá-lo duas vezes.

    1. Olá, Sharon - Atualmente, não temos a funcionalidade para desativar/ocultar o preço na pré-visualização do formulário. Concordo que esta seria uma funcionalidade útil e vou adicioná-la ao nosso rastreador de pedidos de funcionalidades para que esteja no radar dos seus programadores.

Adicionar um comentário

Ficamos satisfeitos por ter escolhido deixar um comentário. Tenha em atenção que todos os comentários são moderados de acordo com a nossa política de privacidade e que todas as hiperligações são nofollow. NÃO utilize palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e os Termos de Serviço da Cloudflare.