Resumo de IA
Gostaria de criar um formulário de quiz no WPForms? O WPForms inclui um Addon de Quiz que oferece tudo o que você precisa para criar formulários de quiz diretamente no construtor de formulários.
Neste tutorial, mostraremos como criar um formulário de quiz usando uma configuração baseada em snippet que calcula e exibe a pontuação do usuário após o envio.
Método Recomendado para Criar Formulários de Quiz
O WPForms inclui um Addon de Quiz dedicado, que é a maneira mais fácil e completa de criar formulários de quiz.
O Addon de Quiz inclui recursos de quiz integrados e oferece a maneira mais fácil de criar e gerenciar formulários de quiz no WPForms.
Para detalhes completos sobre o método recomendado, consulte nossa documentação do Addon de Quiz.
Criando o Formulário de Quiz com um Snippet
Se você ainda quiser criar um formulário de quiz com uma configuração personalizada, pode seguir as etapas deste guia e usar o snippet de código abaixo.
Começaremos criando um novo formulário. Em nosso formulário, adicionaremos os campos de formulário Nome e Email no início do formulário. Em seguida, usando Quebras de Página, dividiremos o quiz em 6 categorias. Cada Quebra de Página terá o Título da Página exibindo em qual categoria os participantes do quiz estão atualmente.
Para qualquer ajuda na criação do seu formulário, consulte este guia.
Adicionando Perguntas e Pontuações do Quiz
Para esta documentação, usaremos os campos Itens Múltiplos na seção Campos de Pagamento no construtor de formulários para fazer nossa pergunta do quiz e alterar os rótulos, fornecendo 3 respostas para cada pergunta. Para a resposta correta, coloque 1,00 para a resposta correta e 0,00 para as respostas incorretas.
Continue fazendo isso em suas perguntas e categorias. Cada pergunta deve ter uma resposta com 1,00 para a resposta correta e 0,00 para as respostas incorretas. Usaremos o valor para coletar um total acumulado para cada resposta correta.
Adicionando um Campo Total para Rastrear a Pontuação
Agora queremos rastrear o número total de pontos para cada resposta correta. Para conseguir isso, na parte inferior do formulário, adicionaremos um campo Total. No entanto, daremos a este campo uma Classe CSS na guia Avançado para que possamos manter este campo oculto até que o formulário seja enviado.
Depois de salvar o formulário, você desejará adicionar o CSS necessário para ocultar este campo. Copie este CSS para o seu site. Se precisar de ajuda para encontrar como e onde adicionar CSS personalizado, consulte este tutorial.
.hide-field {display: none;}
Exibindo a Pontuação do Quiz na Mensagem de Confirmação
Para mostrar aos participantes do quiz a pontuação deles após o envio, adicione o snippet abaixo ao seu site.
Este snippet lê os valores enviados, obtém o nome e a pontuação do usuário e exibe uma mensagem de confirmação com o resultado final.
Copie e cole este snippet no seu site. Se precisar de ajuda sobre como e onde adicionar snippets, consulte este tutorial útil.
/**
* Display a custom confirmation message for our pub quiz.
*
* @link https://wpforms.com/developers/how-to-create-a-quiz-form/
*/
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
// Only run on my form with ID = 3221
if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
return $message;
}
// Get the name of the person who completed this form
$contact_name = $fields[ '1' ][ 'value' ];
// Get the points from the total field (field ID '7') to remove any decimals and currency symbols
$points_scored = $fields[ '7' ][ 'value' ];
// Remove white space and currency symbol
list($points_scored) = explode('.', $points_scored);
$points_scored = substr($points_scored, 5);
// Add the name and points scored to the message
$message = __('Thanks ' . $contact_name . ' you scored ' . $points_scored . ' out of a possible 35 points', 'plugin-domain');
return $message;
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );
Este snippet só será executado no ID do formulário 3221. Ele obterá o nome do usuário do nosso campo Nome no ID do campo 1 para que possa ser exibido em nossa mensagem de confirmação personalizada. Este snippet, em seguida, obterá o valor do nosso campo de formulário Total, que é o ID do campo 7, removerá o símbolo da moeda e o espaço em branco e converterá o que sobrar em um número inteiro para que não haja ponto decimal ou zeros.
Você precisará atualizar cada um desses IDs para corresponder aos seus próprios IDs de formulário e campo. Para encontrar seus próprios números de ID, consulte esta documentação.
Agora, quando os usuários chegarem ao final do quiz, eles clicarão em Enviar e verão imediatamente quantas respostas eles acertaram.
E é isso! Você gostaria que o formulário fosse enviado automaticamente com base no valor de um dos seus campos? Confira nosso tutorial sobre Como Enviar um Formulário Automaticamente com uma Escolha de Campo.