Resumo de IA
Quer mostrar aos usuários prévias de suas entradas antes ou depois de enviarem seu formulário? Nosso campo de Prévia de Entrada permite adicionar facilmente uma página de prévia a qualquer formulário em seu site. Além disso, nossas configurações de confirmação de formulário permitem exibir prévias de entrada em suas confirmações também.
Este guia mostrará como usar o campo de Prévia de Entrada e a configuração de confirmações no WPForms.
Neste Artigo
Antes de mergulhar no tutorial abaixo, certifique-se de que o WPForms esteja instalado e ativado em seu site WordPress. Em seguida, você pode criar um novo formulário ou editar um existente para abrir o construtor de formulários e acessar o campo de Prévia de Entrada.
Adicionando um Campo de Prévia de Entrada ao Seu Formulário
Primeiro, você precisará adicionar um campo de Prévia de Entrada ao seu formulário. Este campo está disponível apenas com uma licença paga, portanto, você o encontrará em Campos Elaborados no construtor de formulários.
Clique em Prévia de Entrada ou arraste e solte-o na área de prévia para adicioná-lo ao seu formulário.
Adicionar um campo de Prévia de Entrada ao seu formulário também adicionará automaticamente um campo de Quebra de Página e dividirá seu formulário em várias páginas.
Observação: Para detalhes sobre as opções disponíveis para quebras de página no WPForms, consulte nosso tutorial sobre formulários de várias páginas.
O campo de Prévia de Entrada requer um formulário de várias páginas para funcionar, e você não pode remover o campo de Quebra de Página que ele adiciona ao seu formulário, a menos que primeiro remova o campo de Prévia de Entrada.
Na maioria dos casos, recomendamos colocar a prévia de entrada no final do seu formulário para que os usuários vejam a prévia apenas depois de preencherem todos os campos.
Observação: Embora você possa adicionar mais campos ao seu formulário após o campo de Prévia de Entrada, ele exibirá apenas dados das páginas anteriores do formulário.
Por exemplo, se você colocar um campo de Prévia de Entrada na segunda página de um formulário de 3 páginas, ele mostrará apenas a entrada e as seleções do usuário dos campos na primeira página do formulário.
Personalizando Seu Campo de Prévia de Entrada
Em seguida, clique no campo de Prévia de Entrada na área de prévia do construtor de formulários para abrir suas opções de campo.
Aqui, você pode usar o controle deslizante Exibir Aviso de Prévia para mostrar ou ocultar uma mensagem adicional antes da prévia de entrada.
Você também pode personalizar o aviso que aparecerá acima da prévia de entrada quando este formulário for publicado em seu site.
Este campo aceita texto, bem como tags HTML.
Escolhendo um Estilo de Prévia de Entrada
Na aba de opções de campo Avançado, você pode selecionar entre 4 estilos diferentes para a prévia de entrada do seu formulário: Básico, Compacto, Tabela ou Tabela Compacta.
Todas essas opções mostram as mesmas informações, apenas em layouts diferentes.
O Estilo Básico de Prévia de Entrada
O estilo Básico de Prévia de Entrada é uma lista simples de rótulos de campo seguidos pela entrada ou seleções do usuário. Aqui está um exemplo de como este estilo aparece no frontend.
O Estilo Compacto de Prévia de Entrada
O estilo Compacto usa texto igual ao estilo Básico, mas coloca os rótulos dos campos e a entrada do usuário em colunas separadas para que ocupem menos espaço na página.
Observação: Quer aprender mais maneiras de condensar seus formulários? Veja nosso tutorial sobre layouts de várias colunas.
O Estilo de Pré-visualização de Entrada da Tabela
O estilo Tabela exibe as entradas em uma tabela com linhas sombreadas para distinguir os rótulos dos campos da entrada do usuário.
O Estilo de Pré-visualização de Entrada Compacta da Tabela
E, finalmente, o estilo Tabela Compacta coloca as entradas em uma tabela com colunas separadas para os rótulos dos campos e a entrada do usuário.
Adicionando CSS Personalizado a um Campo de Prévia de Entrada
Você também pode adicionar classes CSS personalizadas no campo Classes CSS nas opções avançadas do campo.
Observação: Quer aprender mais sobre como usar classes CSS personalizadas no WPForms? Confira nosso guia para adicionar CSS personalizado aos seus formulários para mais detalhes.
Configurando Confirmações de Prévia de Entrada
Você pode usar confirmações de pré-visualização de entrada em vez de ou em adição ao campo de Pré-visualização de Entrada.
O campo de Pré-visualização de Entrada permite que os usuários voltem e alterem suas entradas ou seleções. Isso pode ser útil se você quiser permitir que os visitantes corrijam erros em suas entradas antes de enviar seu formulário.
No entanto, existem algumas situações em que você pode querer permitir que os usuários visualizem suas entradas sem dar a eles a opção de alterar suas entradas ou seleções. Nesses casos, você pode usar uma confirmação de pré-visualização de entrada em vez disso.
Para fazer isso, vá para Configurações » Confirmações no construtor de formulários. Para qualquer confirmação que você criou, você pode ativar a opção Mostrar pré-visualização da entrada após a mensagem de confirmação.
Observação: Precisa de ajuda para configurar as confirmações do seu formulário? Nossos tutoriais sobre configurações de confirmações do WPForms e criação de confirmações condicionais de formulário têm todos os detalhes.
Uma vez que esta configuração esteja ativada, um menu suspenso aparecerá onde você pode selecionar qual estilo de pré-visualização de entrada você gostaria de usar para esta confirmação.
Certifique-se de salvar suas alterações antes de sair do construtor de formulários. No frontend, sua confirmação de pré-visualização de entrada pode parecer algo assim.
É isso! Agora você pode permitir que os usuários visualizem suas entradas antes ou depois de enviarem seus formulários.
Em seguida, quer aprender como gerenciar as entradas dos usuários? Confira nosso guia completo de entradas no WPForms para todos os detalhes.