Como visualizar uma entrada de formulário antes de enviá-la
Publicados: 2022-01-27Você quer que seus visitantes visualizem suas entradas de formulário antes de enviá-las?
Permitir que os usuários visualizem suas entradas reduz muito as chances de erros e imprecisões enquanto eles preenchem formulários.
O WPForms possui um campo de visualização de entrada que você pode adicionar facilmente aos seus formulários, para que seus usuários possam ver um resumo rápido de suas entradas durante e após o envio.
Neste post, mostraremos como adicionar o campo Entry Preview e personalizá-lo de diferentes maneiras no WPForms.
Crie um formulário com visualizações de entrada agora
Por que você deve mostrar uma visualização de entrada?
A capacidade de 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 visualização antes do envio permite que você revise a precisão das informações antes de pressionar o botão enviar.
Portanto, se você deseja minimizar os erros e dar aos usuários a capacidade de corrigir quaisquer erros antes do envio, inclua o campo Entry Preview oferecido pelo WPForms.
Como visualizar uma entrada de formulário antes de enviá-la
Veja nosso tutorial passo a passo para saber como você pode adicionar a visualização de envio aos seus formulários:
- Instalar WPForms
- Adicionar um novo formulário
- Adicionar campo de visualização de entrada de formulário
- Personalizar aviso e estilo de visualização
- Adicionar confirmação de visualização de entrada
Vamos começar.
1. Instale o WPForms
Para começar, escolha um plano WPForms adequado e registre sua conta. Em seguida, faça login na área da sua conta 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.
Enquanto estiver nesta página, certifique-se de copiar sua chave de licença. Você precisará disso mais tarde quando estiver ativando o WPForms Pro em seu site WordPress.
Após o download do arquivo zip no seu computador, abra o painel de administração do WordPress e clique em Plugins » Adicionar novo. Em seguida, clique no botão Upload Plugin .
Agora, clique no botão Escolher arquivo e escolha o arquivo de plug-in que você acabou de baixar.
Clique em Instalar agora quando o arquivo for carregado.
O WPForms agora será instalado no seu site WordPress. Isso deve levar apenas alguns segundos. Quando a instalação terminar, pressione o botão Ativar Plugin .
Agora clique em WPForms » Configurações. Isso abrirá a guia Configurações gerais por padrão. Role para baixo para encontrar o campo License Key e digite sua chave aqui (que você copiou anteriormente).
Em seguida, clique no botão Verificar chave . Isso concluirá a instalação do WPForms Pro em 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. Agora você pode dar um nome ao seu formulário para facilitar sua localização mais tarde.
Role para baixo para selecionar um modelo para começar a criar seu formulário. Como todos os campos WPForms, o campo Entry Preview é compatível com a maioria dos mais de 300 modelos disponíveis.
Quando você selecionar um modelo, adicionaremos o campo Entry Preview na próxima etapa.
3. Adicione o campo de visualização de entrada de formulário
No exemplo a seguir, estamos usando um formulário de reserva de compromisso personalizado, mas você pode usar qualquer modelo de formulário de sua escolha.
Para adicionar um recurso de visualização ao seu formulário, basta arrastar e soltar o campo Visualização da entrada do painel esquerdo do construtor para o painel direito, onde estão os campos reais do formulário.
Quando você adiciona o campo de visualização de entrada ao seu formulário, ele adiciona automaticamente uma nova página onde a visualização aparecerá.
É assim que a visualização aparece em ação quando um usuário está preenchendo um formulário:
Você também pode colocar o campo de visualização de entrada várias vezes em seu formulário. Por exemplo, se você tiver um formulário de várias páginas, poderá colocar um campo de visualização de entrada após cada página. Isso significa que seus usuários podem visualizar as informações que preencheram nas páginas anteriores à medida que continuam preenchendo o restante do formulário.
Adicionar vários campos de visualização de entrada em seus formulários longos é uma ótima maneira de garantir que seus usuários possam visualizar suas entradas e voltar a qualquer momento para fazer alterações, se necessário.
4. Personalize o aviso e o estilo de visualização
WPForms permite que você personalize o aviso de visualização. Basta clicar no campo Entry Preview na visualização do construtor de formulários para abrir suas configurações de campo.
Você pode usar o botão de alternância Exibir aviso de visualização para mostrar a mensagem acima da visualização da entrada ou ocultá-la completamente.
Além disso, você tem a liberdade de editar o aviso de visualização ao seu gosto ou deixar a mensagem padrão como está.
Em seguida, você pode querer alterar o estilo de visualização de entrada. Clique na guia Avançado nas opções do campo Visualização da entrada para escolher entre 4 estilos de visualização diferentes:
- Básico
- Compactar
- Tabela
- Mesa, Compacto
O estilo padrão é Básico, que exibe uma visualização linha por linha da entrada do formulário.
Se você quiser dar uma aparência mais apertada à sua visualização, pode optar pela opção de estilo Compacto .
Isso conclui a configuração do campo Entry Preview em seus formulários. Mas há outro tipo de visualização de entrada que você pode adicionar, como mostraremos na próxima etapa.
5. Adicionar confirmação de visualização de entrada
Além das visualizações de entrada que aparecem quando você está preenchendo um formulário, o WPForms também permite exibir visualizações depois que um usuário enviou um formulário.
Ao contrário do campo de visualização de entrada, seus usuários não podem alterar suas entradas quando uma confirmação de visualização é exibida. Em vez disso, ele mostra aos usuários apenas uma cópia do envio que não pode mais 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 alternar para Mostrar visualização de entrada após o botão de mensagem de confirmação.
Ao ativar esta opção, você verá uma lista suspensa que permite escolher um estilo de visualização como mostramos acima para os campos de visualização de entrada.
Você ainda pode usar as visualizações de entrada (que aparecem quando um formulário está sendo preenchido) junto com a confirmação de visualização (que só aparece após as entradas terem sido enviadas). Ou você só pode usar uma ou outra dessas opções. Tudo depende de suas preferências e do que você está tentando alcançar com seus formulários.
E é isso! Agora você pode permitir que seus usuários visualizem uma entrada de formulário antes de enviá-la.
Em seguida, Imponha restrições de acesso em formulários do WordPress
Deseja restringir seus formulários do WordPress a apenas usuários logados? O WPForms permite selecionar os níveis de permissão do usuário por seu estado de login. Veja nosso artigo sobre como restringir formulários do WordPress para usuários logados para saber mais.
Você também pode querer ler nosso guia sobre os melhores plugins da barra de notificação do WordPress para promover suas vendas e ofertas especiais em seu site.
Pronto para construir seu formulário? Comece hoje com o plug-in mais fácil de criação de formulários do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Crie um formulário com visualizações de entrada agora
Se este artigo o ajudou, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.