How to Create a Quiz Form

Introduction

Would you like to create a quiz form using WPForms? Using Payment Fields you can easily build a quiz form that tracks the total score for your quiz. In this tutorial, we’re going to show you how you can easily do this using payment fields.

Creating the form

We’re going to begin by creating a new form. In our form, we’re going to add the Name and Email form fields at the beginning of the form. Then using Page Breaks, we’re going to break up the quiz into 6 categories. Each Page Break we’ll have the Page Title displaying what category your quiz takers are currently on.

begin by creating your form and add your fields. you can break up the quiz categories by adding page breaks in between of each category

For any help in creating your form, please check out this guide.

Asking quiz questions

For this documentation, we’re going to use the Multiple Items fields under the Payment Fields section in the form builder to ask our quiz question and change the labels providing 3 answers for each question. For the correct answer, place a 1.00 for the correct answer and 0.00 for the incorrect answers.

use the Multiple items under payment fields to ask your question and provide 1 correct answer with a dollar amount of 1.00 and place a zero for the amount of the incorrect answers

Continue to do this through your questions and categories. Each question should have one answer with a 1.00 for the correct answer. We will use the amount to gather a running total for each correct answer.

Using a text field Q&A format (optional)

If you’d like to have a Single Line Text field Q&A type of quiz, you can view this section to set up your quiz in this manner.

For the purpose of this tutorial, we’re providing a category in our quiz that will show an image and ask the visitors to enter in their correct answer. To complete this step, we’ll first add a Single Line Text with a number that corresponds to a number on the image for them to place their guess.

Next, we’ll add a Single Item from the Payment Fields and keep this hidden.

now add a single item from the payment fields and set it up to remain Hidden

Our final step for this portion is to set Smart Logic on the Single Item field so unless they enter the correct answer, it will not count as a point. To do this, click the Single Item field and navigate to the Smart Logic tab. Tell this field to only show if the answer from the Single Line Text matches the correct answer.

For example if the user enters an incorrect answer in the Single Line Text field, the Single Item will remain hidden and therefore won’t count as a point to their score.

use smart logic on the single item field to only show if they enter the correct answer

Once the form is set up, the users will see when they have entered the correct answer.

when setting up your form in this manner, users can see when they have the correct answer

Adding a total field

Now we want to track the total number of points for each correct answer. To achieve this, at the bottom of the form, we’re going to add a Total field. However, we’re going to give this field a CSS Class on the Advanced tab so we can keep this field hidden from view until the form is submitted.

add the CSS class name on the Advanced tab for the total field

Once you’ve saved the form, you’ll want to add the CSS needed to hide this field. Copy this CSS to your site. If you need help in finding how and where to add custom CSS, please check out this tutorial.

.hide-field {display: none;}

Adding the snippet

Now it’s time to add the snippet that will pull this all together. We want to display a custom confirmation message that will display a thank you message with the quiz takers name and provide them a total score. Since we don’t want any currency symbols or dollar amounts in this total, we’re going to use a custom snippet that will build our custom confirmation message.

Copy and paste this snippet to your site, if you need help with how and where to add snippets, please check out this useful tutorial.

/**
 * 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
	$output  = substr($points_scored,6);
	
	// Take remaining string and convert to whole number removing decimals and zeros after decimal
	$finalScore = intval($output);
     
    // Add the name and points scored to the message
    $message = __('Thanks ' . $contact_name .  ' you scored ' . $finalScore . ' out of a possible 35 points', 'plugin-domain');
	
    return $message;
      
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );

This snippet will only run on the form ID 3221. It will grab the users name from our Name field in the field ID 1 so it can be displayed in our custom confirmation message. This snippet will then grab the amount from our Total form field which is field ID 7, remove the currency symbol and white space and then convert what is left to a whole number so there isn’t a decimal point or zeros.

You’ll need to update each of these IDs to match your own form and field IDs. To find your own ID numbers, please review this documentation.

Now when users get to the end of the quiz, they’ll click Submit and get to immediately see how many answers they had gotten correct.

you're quiz takers will be able to see their total score as soon as they submit the form

And that’s it! Would you like to have the form submit for you automatically based on a value of one of your form fields? Check out our tutorial on How to Automatically Submit a Form with a Field Choice.

Filter reference: wpforms_frontend_confirmation_message