Comment créer un formulaire de questionnaire

Souhaitez-vous créer un formulaire de quiz en utilisant WPForms ? En utilisant les champs de paiement, vous pouvez facilement construire un formulaire de quiz qui enregistre le score total de votre quiz. Dans ce tutoriel, nous allons vous montrer comment vous pouvez facilement le faire en utilisant les champs de paiement.

Création du formulaire de quiz

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.

Poser des questions sous forme de quiz

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.

Il est temps de faire le total des réponses

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;}

Création de la logique du quiz

Il est maintenant temps d'ajouter le snippet qui va permettre d'assembler le tout. Nous voulons afficher un message de confirmation personnalisé qui affichera un message de remerciement avec le nom du participant et lui fournira son score total. Comme nous ne voulons pas de symboles monétaires ou de montants en dollars dans ce total, nous allons utiliser un extrait personnalisé qui construira notre message de confirmation personnalisé.

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