Resumo de IA
Gostaria de criar um formulário de quiz no WPForms? O WPForms inclui um Add-on de Quiz que lhe dá tudo o que precisa para criar formulários de quiz diretamente no construtor de formulários.
Neste tutorial, vamos mostrar-lhe como criar um formulário de quiz usando uma configuração baseada em trechos de código que calcula e exibe a pontuação de um utilizador após o envio.
Método Recomendado para Criar Formulários de Quiz
O WPForms inclui um Add-on de Quiz dedicado, que é a forma mais fácil e completa de criar formulários de quiz.
O Add-on de Quiz inclui funcionalidades de quiz incorporadas e fornece a forma mais fácil de criar e gerir formulários de quiz no WPForms.
Para obter detalhes completos sobre o método recomendado, consulte a nossa documentação do Add-on de Quiz.
Criar o Formulário de Quiz com um Trecho de Código
Se ainda assim quiser criar um formulário de quiz com uma configuração personalizada, pode seguir os passos deste guia e usar o trecho de código abaixo.
Vamos começar por criar um novo formulário. No nosso formulário, vamos adicionar os campos de formulário Nome e Email no início do formulário. Em seguida, usando Quebras de Página, vamos dividir o quiz em 6 categorias. Cada Quebra de Página terá o Título da Página exibindo em que categoria os seus participantes do quiz se encontram atualmente.
Para qualquer ajuda na criação do seu formulário, consulte este guia.
Adicionar Perguntas e Pontuações do Quiz
Para esta documentação, vamos usar os campos Itens Múltiplos na secção Campos de Pagamento no construtor de formulários para fazer a 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 a fazer isto através das 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 obter um total acumulado para cada resposta correta.
Adicionar um Campo Total para Rastrear a Pontuação
Agora queremos rastrear o número total de pontos para cada resposta correta. Para conseguir isto, na parte inferior do formulário, vamos adicionar um campo Total. No entanto, vamos dar a este campo uma Classe CSS no separador Avançadas para que possamos manter este campo oculto até que o formulário seja enviado.
Depois de ter guardado o formulário, vai querer 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;}
Exibição da Pontuação do Questionário na Mensagem de Confirmação
Para mostrar aos participantes do questionário a sua pontuação após o envio, adicione o trecho abaixo ao seu site.
Este trecho lê os valores submetidos, obtém o nome e a pontuação do utilizador, e exibe uma mensagem de confirmação com o resultado final.
Copie e cole este trecho no seu site. Se precisar de ajuda sobre como e onde adicionar trechos, 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 trecho só será executado no ID do formulário 3221. Ele obterá o nome do utilizador do nosso campo Nome no ID do campo 1 para que possa ser exibido na nossa mensagem de confirmação personalizada. Este trecho obterá então 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, em seguida, converterá o que sobrar num número inteiro para que não haja casas decimais ou zeros.
Terá de atualizar cada um destes IDs para corresponder aos seus próprios IDs de formulário e campo. Para encontrar os seus próprios números de ID, revise esta documentação.
Agora, quando os utilizadores chegarem ao fim do questionário, clicarão em Enviar e verão imediatamente quantas respostas acertaram.
E é tudo! Gostaria que o formulário fosse enviado automaticamente com base no valor de um dos seus campos? Consulte o nosso tutorial sobre Como Enviar Automaticamente um Formulário com uma Escolha de Campo.