Comment créer un formulaire de questionnaire

Souhaitez-vous créer un formulaire de quiz dans WPForms ? WPForms comprend un module complémentaire Quiz qui vous offre tout ce dont vous avez besoin pour créer des formulaires de quiz directement dans le générateur de formulaires.

Dans ce tutoriel, nous vous montrerons comment créer un formulaire de quiz à l'aide d'une configuration basée sur des extraits de code qui calcule et affiche le score d'un utilisateur après soumission.

Méthode recommandée pour créer des formulaires de quiz

WPForms comprend un module complémentaire dédié aux quiz, qui constitue le moyen le plus simple et le plus complet de créer des formulaires de quiz.

L'extension Quiz comprend des fonctionnalités de quiz intégrées et offre le moyen le plus simple de créer et de gérer des formulaires de quiz dans WPForms.

Pour plus de détails sur la méthode recommandée, veuillez consulter notre documentation sur le module complémentaire Quiz.

Création du formulaire de quiz à l'aide d'un extrait de code

Si vous souhaitez tout de même créer un formulaire de quiz avec une configuration personnalisée, vous pouvez suivre les étapes décrites dans ce guide et utiliser l'extrait de code ci-dessous.

Nous allons commencer par créer un nouveau formulaire. Dans notre formulaire, nous allons ajouter les champs Nom et Email au début du formulaire. Puis, à l'aide des sauts de page, nous allons diviser le quiz en six catégories. À chaque saut de page, le titre de la page affichera la catégorie dans laquelle se trouvent les participants au quiz.

Ajouter des questions de quiz et des scores

Pour cette documentation, nous allons utiliser les champs Éléments multiples de la section Champs de paiement du générateur de formulaires pour poser notre question de quiz et modifier les étiquettes en fournissant 3 réponses pour chaque question. Nous placerons 1,00 pour la bonne réponse et 0,00 pour les mauvaises réponses.

Continuez à procéder de la même manière pour les questions et les catégories. Chaque question doit comporter une réponse avec un 1.00 pour la bonne réponse et un 0.00 pour les mauvaises réponses. Nous utiliserons ce montant pour obtenir un total courant pour chaque bonne réponse.

Ajouter un champ Total pour suivre le score

Nous voulons maintenant connaître le nombre total de points pour chaque bonne réponse. Pour ce faire, nous allons ajouter un champ Total au bas du formulaire. Cependant, nous allons donner à ce champ une classe CSS dans l'onglet Avancé afin de le cacher jusqu'à ce que le formulaire soit soumis.

Une fois que vous avez enregistré le formulaire, vous devez ajouter la feuille de style CSS nécessaire pour masquer ce champ. Copiez cette feuille de style CSS sur votre site. Si vous avez besoin d'aide pour savoir comment et où ajouter une feuille de style CSS personnalisée, consultez ce tutoriel.

.hide-field {display: none;}

Affichage du score du quiz dans le message de confirmation

Pour afficher le score des participants au quiz après leur soumission, ajoutez l'extrait de code ci-dessous à votre site.

Cet extrait lit les valeurs soumises, récupère le nom et le score de l'utilisateur, puis affiche un message de confirmation avec le résultat final.

Copiez et collez cet extrait sur votre site. Si vous avez besoin d'aide pour savoir comment et où ajouter des extraits, veuillez consulter ce tutoriel utile.

/**
 * 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 );

Ce snippet ne s'exécutera que sur le formulaire ID 3221. Il récupère le nom de l'utilisateur à partir du champ Nom dans le champ ID 1 afin de l'afficher dans notre message de confirmation personnalisé. Ce snippet récupère ensuite le montant du champ Total du formulaire (champ ID 7), supprime le symbole de la devise et les espaces blancs, puis convertit ce qui reste en un nombre entier, sans point décimal ni zéros.

Désormais, lorsque les utilisateurs arrivent à la fin du quiz, ils cliquent sur Soumettre et voient immédiatement le nombre de réponses correctes.

Et c'est tout ! Souhaitez-vous que le formulaire se soumette automatiquement en fonction de la valeur d'un de vos champs de formulaire ? Consultez notre tutoriel intitulé Comment soumettre automatiquement un formulaire avec un choix de champ.

Filtre de référence

wpforms_frontend_confirmation_message