Resumo de IA
Gostaria de criar um formulário de feedback simples que envia automaticamente quando os usuários fazem uma seleção? Isso é perfeito para pesquisas rápidas de “Isso foi útil?” onde os usuários podem responder com um único clique. Ao enviar automaticamente após a seleção, você pode maximizar as taxas de resposta, tornando o processo fácil para os usuários.
Este guia mostrará como criar um formulário de feedback simplificado que envia instantaneamente quando os usuários fazem sua escolha.
Configurando Seu Formulário
Primeiro, crie um novo formulário com esta estrutura:
- Um campo de Layout para organizar suas opções
- Dois campos de Caixa de seleção – um em cada coluna de Layout para as opções “Sim” e “Não”
- Um campo Oculto para capturar o título da página
Se precisar de ajuda para criar seu formulário, revise este guia de criação de formulários.
Configurando as Escolhas de Ícone
Para um visual polido, usaremos escolhas de ícone para as opções Sim/Não. Configure seus campos de caixa de seleção com estas configurações:
Caixa de seleção Sim
- Habilitar Usar escolhas de ícone
- Ícone: face-smile
- Cor do Ícone: #066aab
- Tamanho do Ícone: Grande
- Estilo da Escolha de Ícone: Clássico
- Ocultar Rótulo: habilitado
Caixa de seleção Não:
- Mesmas configurações, mas com o ícone face-frown
Adicionando uma Smart Tag ao Campo Oculto
Para o Campo Oculto, vamos adicionar a Smart Tag para capturar o título da página quando o formulário for enviado. Para saber mais sobre Smart Tags integradas com o construtor de formulários WPForms, você pode revisar esta documentação.
Adicionamos a Smart Tag {page_title} ao Valor Padrão do Campo Oculto.
Enviar o formulário automaticamente
Agora é hora de adicionar o snippet ao seu site. Se precisar de ajuda sobre como adicionar snippets ao seu site, confira este tutorial.
Este snippet só será executado no ID do formulário 3046, quando qualquer um dos campos de Caixa de seleção for marcado, ele acionará esta função e enviará o formulário automaticamente.
Você precisará atualizar este ID de formulário para corresponder ao seu próprio ID de formulário. Se precisar de ajuda para encontrar seu ID de formulário, revise este guia.
Estilizando o Formulário
Adicione este CSS para estilizar seu formulário apropriadamente. Atualize o ID do formulário (3046) e os IDs dos campos (3 e 4) para corresponder ao seu formulário:
Este CSS oculta elementos desnecessários e posiciona seus ícones perfeitamente. Para obter ajuda na adição de CSS, revise nosso guia sobre como adicionar código CSS ao seu site WordPress.
Você precisará atualizar o ID do formulário para estas regras de CSS para garantir que ele esteja direcionando os IDs corretos do formulário e dos campos.
Nosso ID de formulário para fins desta documentação é 3046. Nossa primeira caixa de seleção é o ID do campo 3 e a segunda caixa de seleção é o ID do campo 4.
Agora, qualquer opção que seus visitantes selecionarem, o formulário será enviado automaticamente.
E é isso! Agora, quando seus visitantes clicarem em qualquer uma das opções de ícone, o formulário será enviado automaticamente. Você gostaria de mostrar ou ocultar seu botão de envio condicionalmente com base em uma resposta do seu formulário? Por favor, confira o tutorial em Como Mostrar o Botão de Envio Condicionalmente.