How to Create a Quiz in WordPress
Learn how to create a form for a many-paged quiz that allows multiple choices using the Advanced Choice, Conditional Block, Calculated, and other fields of the JetFormBuilder plugin for WordPress.
- Create a Form
- Customize the Text Field
- Enable Form Page Progress
- Add the Advanced Choices Field with One Choice
- Break the Page
- Add the Conditional Block for One Choice
- Add the Advanced Choices Field with Multiple Choice
- Add the Calculated Field
- Post-Submit Actions
- Add the Form to a Page
Create a Form
First, navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form. The form will be open in the Gutenberg editor.
Initially, the form includes the Welcome block, which allows the application of the pre-created or AI-generated forms.
![jetformbuilder default form](https://jetformbuilder.com/wp-content/uploads/2024/05/welcome-block-of-jetformbuilder-forms-1x.png)
Press the “Start from scratch” button to develop a custom form.
The Welcome block will be closed, and the Hidden Field, the Text Field, and the Action Button will be added by default.
![default jetformbuilder form fields](https://jetformbuilder.com/wp-content/uploads/2024/07/default-blocks-of-jetforms-1x.png)
Add the form’s title (here, “Quiz”).
The Form Creation Tutorial details how to build the JetFormBuilder forms.
Enable Form Page Progress
Navigate to the JetForm settings and switch on the Enable form pages progress toggle.
![the enable form progress toggle activated](https://jetformbuilder.com/wp-content/uploads/2024/07/the-enable-form-progress-toggle-activated-1x.png)
Read the WordPress Multi-Step Form with Step Indicator and Conditional Blocks tutorial to learn more details about the creation of multi-step forms.
Customize the Text Field
Navigate to the Block settings tab of the Text Field and fill in the FIELD LABEL field.
![text field settings](https://jetformbuilder.com/wp-content/uploads/2024/07/text-field-settings-1x.png)
The General Settings Section guide details how to manage the JetFormBuilder field settings.
Add the Advanced Choices Field with One Choice
Find and then drag and drop the Advanced Choices Field block onto the page.
![select choices layouts](https://jetformbuilder.com/wp-content/uploads/2024/07/select-choices-layouts-1x.png)
In the given case, we selected the “Images with controls” choice layout.
Then, type the field’s name in the FIELD LABEL field (“What is the largest continent in the world?” text, for example) and fill in the FORM FIELD NAME field (e.g., “largest”).
In the next step, select the image above the “Book Name” text on a choice item. Press the “Replace” button on the settings panel that appears and add the image you need.
![adding images to the choice items](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-images-to-the-choice-items-1x.png)
Type the needed text instead of the “Book Name #” on the choice item.
If you need more than three choice items added by default, press the “plus” icon in the bottom right corner of the choice item to add another. Then, add the needed images and texts into the Image and Choice Control fields.
![adding choice items to the advanced choice field](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-choice-items-to-the-advanced-choice-field-1x.png)
You can customize the style settings as well. To change the text or background color for all options, click the Advanced Choices Field block and open the Block > Style tab.
![adding choice items to the advanced choice field](https://jetformbuilder.com/wp-content/uploads/2024/07/advanced-choice-style-settings-1x.png)
To alter the style settings of one option, click the needed Choice Control block, open the Block > Style tab, and, for instance, change the text color.
![setting text colors](https://jetformbuilder.com/wp-content/uploads/2024/07/setting-text-colors-1x.png)
Also, for the Choice Control block, you can open the Block > Settings tab, and, in the CONTROL TYPE field, you can select how the item should be chosen – by pressing the “Image” or using the “Radio input” option.
Here, we pick the “Radio input” option.
![selecting the control type for the advanced choice control](https://jetformbuilder.com/wp-content/uploads/2024/07/radio-input-setting-of-the-advanced-choice-field-1x.png)
Every option is considered as the Advanced Choice block.
Click the needed Advanced Choice block, open the Block > General tab, and set the needed values in the VALUE and VALUE FOR CALCULATED FIELD fields.
Fill in these fields for all choice items.
For instance, we set “zero” for incorrect answers and “one” for the correct answer.
![setting values for calculated field](https://jetformbuilder.com/wp-content/uploads/2024/07/setting-values-for-calculated-field-1x.png)
In this tutorial, this question and this Advanced Choices field have only one correct answer.
To redirect users to another page, click the “double-chevron” icon on the settings panel. This action enables the automatic transition to the next page when the values are changed.
![enabling the automatic transition to the next page](https://jetformbuilder.com/wp-content/uploads/2024/07/enabling-the-automatic-transition-to-the-next-page-1x.png)
Break the Page
Find the Form Page Break Field block and drag and drop it onto the page.
Then, navigate to the Buttons Settings tab and leave the “Enable “Next” Button” toggle inactive.
Finally, navigate to the Page Settings block and type the text in the LABEL OF PROGRESS field (e.g., “Question #1 out of 2”).
![form page break button settings](https://jetformbuilder.com/wp-content/uploads/2024/07/form-page-break-button-settings-1x.png)
Add the Conditional Block for One Choice
In this tutorial section, we added the Conditional Blocks to display the needed text if users select the correct or incorrect answer.
We dragged and dropped the Conditional Block to the page and pressed the “crisscrossed arrows” button in the upper tools panel. Then, the Conditional Logic pop-up will be unrolled.
In the Conditional Logic pop-up, we selected the “Show if…” option in the WHICH FUNCTION NEED EXECUTE? drop-down list; then, we pressed the “+ Add Condition” button to set the conditional rule. Here, we selected the Advanced Choices Field label in the FIELD drop-down list (“What is the largest continent in the world?” in this case), chose the “Equal” OPERATOR, and, finally, typed the correct answer value in the VALUE TO COMPARE field (the “1” text, in this case).
![conditional logic settings](https://jetformbuilder.com/wp-content/uploads/2024/07/conditional-logic-setting-1x.png)
Once completed, press the “Update” button.
Then, press the “plus” icon on the right side of the Conditional Block and select the needed field.
![adding fields to the conditional block](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-fields-to-the-conditional-block-1x.png)
We selected the Paragraph block and typed the “Correct!” text in the Conditional Block text field. We also set the color for this text.
![color settings of the paragraph block](https://jetformbuilder.com/wp-content/uploads/2024/07/color-settings-of-the-to-the-paragraph-block-1x.png)
In the same way, we added another Conditional Block that will display the “Sorry, but this answer is not correct!” text in case of an incorrect answer. The only difference is that we set the zero (the “0” text) in the VALUE TO COMPARE field.
![conditional block of jetformbuilder](https://jetformbuilder.com/wp-content/uploads/2024/07/conditional-block-of-jetformbuilder-1x.png)
In the next step, we added the Form Page Break block to the page and activated the Enable “Next” button toggle for the button setting block.
Then, we typed the text displayed on the “Next” button in the NEXT BUTTON LABEL field.
Finally, we navigated to the Page Settings block and typed the text in the LABEL OF PROGRESS field (“Answer to the question #1” in our case).
![the form page break settings](https://jetformbuilder.com/wp-content/uploads/2024/07/the-form-page-break-settings-1x.png)
Add the Advanced Choices Field with Multiple Choice
Duplicate the added Advanced Choices Field and move it below the Form Page Break block, or add another Advanced Choices Field and add the needed Images and Choice Controls.
Navigate to the Block > General settings block and type the field’s name in the FIELD LABEL field (“On what continents does Türkiye lie?” text, in this case), then fill in the FORM FIELD NAME field (the “turkiye” text in the given case).
Enable the To allow the multiple choices toggle in the Value setting block of the field.
![allow multiple choice toggle](https://jetformbuilder.com/wp-content/uploads/2024/07/allow-multiple-choice-toggle-1x.png)
Finally, press the specific item (Advanced Choice block) and set the needed values in the VALUE and VALUE FOR CALCULATED FIELD fields of the Block > General setting tab.
Set these values for all choice items. In the given case, we set the continent names (i.e., “africa,” “asia,” etc.) in the VALUE field for all items. Then, we typed “0.5” for Asia and Europe and “0” for other continents in the VALUE FOR CALCULATED FIELD setting fields.
![general settings of the advanced choice field items](https://jetformbuilder.com/wp-content/uploads/2024/07/general-settings-of-the-advanced-choice-field-items-1x.png)
Press the “asterisk” icon to make the Advanced Choice Field required.
![setting the field required](https://jetformbuilder.com/wp-content/uploads/2024/07/setting-the-field-required-1x.png)
In the last step, we added the Form Page Break block, activated the Enable “Next” Button toggle, and filled in the NEXT BUTTON LABEL and LABEL OF PROGRESS fields.
![form page break button and page settings](https://jetformbuilder.com/wp-content/uploads/2024/07/form-page-break-button-and-page-settings-1x.png)
Add the Conditional Block for Multiple Choice
Add the Conditional Block to the page and trigger the Conditional Logic pop-up by clicking the “crisscrossed arrows” button.
In the Conditional Logic pop-up, we selected the “Show if…” option in the WHICH FUNCTION NEED EXECUTE? drop-down list, then pressed the “+ Add Condition” button to set the conditional rules.
Here, we selected the Advanced Choices Field label in the FIELD drop-down list (“On what continents does Türkiye lie?” text, in this case), chose the “In the list” OPERATOR, and, finally, typed the correct answer value in the VALUE TO COMPARE field (“asia” in this case).
![setting conditions for the advanced choice field with the multiple choice](https://jetformbuilder.com/wp-content/uploads/2024/07/setting-conditions-for-the-advanced-choice-field-with-the-multiple-choice-1x.png)
To add another condition, scroll down the pop-up and press the “+ Add Condition” button.
In the appeared fields, select the required FIELD (“On what continents does Türkiye lie?” in this case); choose the “In the list” OPERATOR, and, finally, type the correct answer value in the VALUE TO COMPARE field (“europe” in this case).
![adding conditional rules for the advanced choice field with the multiple choice](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-conditional-rules-for-the-advanced-choice-field-with-the-multiple-choice-1x.png)
Once all conditions are added, press the “Update” button.
Add the needed fields onto the Conditional Block (the Paragraph block and with the “Correct!” text in our case).
![adding fields to the conditional block of the multiple choice field](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-fields-to-the-conditional-block-of-multiple-choice-1x.png)
Add another Conditional Block and set the conditional rule to display the “Sorry, but this answer is not correct!” text if the conditions are unmet. Here, we set the “Not in the list” operator, and the other settings are the same.
![not in the list operator applied to the conditional block](https://jetformbuilder.com/wp-content/uploads/2024/07/not-in-the-list-operator-applied-to-the-conditional-block-1x.png)
Finally, we added the Form Page Break block, activated the Enable “Next” Button toggle, and filled in the NEXT BUTTON LABEL and the LABEL OF PROGRESS fields (the “Next Page” and “Score” texts, respectively).
Add the Calculated Field
We added the Calculated Field to show the quiz’s total score. Then, we filled in the FIELD LABEL and FORM FIELD NAME fields (the “SCORE” and “score” texts, respectively).
We typed the “%largest%+%turkiye%” text, which means that this field will calculate the correct answers for the first and second Advanced Choices Fields (in this case, we typed the names of the previously added Advanced Choices Fields).
![adding the calculated field](https://jetformbuilder.com/wp-content/uploads/2024/07/adding-the-calculated-field-1x.png)
The Checkbox + Calculated tutorial explains how to combine these fields.
The last step is adding the Form Page Break block. Here, we did not activate the “Enable “Next” Button” and “Add Prev Page Button” toggles but filled in the LABEL OF PROGRESS field with the text that will be displayed as the last step of the progress bar (the “Score” text).
Finally, once you complete the form with the fields, press the “Update/Publish” button.
Post-Submit Actions
The “Save Form Record” Post-Submit Action is set by default. We kept this action and did not add any others because such actions are uncommon for online quizzes.
However, you can add other Post-Submit Actions, such as “Send Email.”
Add the Form to a Page
Open a page/post/CPT post/template you need and place the JetForm widget (in Elementor), JetForm block (in Block Editor), or JetForm element (in Bricks). Select the built form in the Choose Form drop-down list.
Learn about other settings from the JetForm Overview.
![jetform widget added to a page](https://jetformbuilder.com/wp-content/uploads/2024/07/jetform-widget-added-to-a-page-1x.png)
Finally, navigate to the front end and check how this form works.
![the quiz form on the front end](https://jetformbuilder.com/wp-content/uploads/2024/07/the-quiz-form-on-the-front-end-1x.png)
First, we typed the name and pressed the “Asia” choice item. Then, we got the result of the choice.
![redirection to the next page of the quiz form](https://jetformbuilder.com/wp-content/uploads/2024/07/redirection-to-the-next-page-of-the-quiz-form-1x.png)
After clicking the “NEXT PAGE” button, we were redirected to the second page of the form.
Here, we ticked the “Asia” and “Europe” checkboxes and clicked the “Next Page” button.
![advanced choices field with multiple choices on the front end](https://jetformbuilder.com/wp-content/uploads/2024/07/advanced-choices-field-with-multiple-choices-on-the-front-end-1x.png)
The result will be shown on the next page.
![conditional block on the front end](https://jetformbuilder.com/wp-content/uploads/2024/07/conditional-block-on-the-front-end-1x.png)
Finally, we were redirected to the last page of the form.
![the calculated field on the front end](https://jetformbuilder.com/wp-content/uploads/2024/07/the-calculated-field-on-the-front-end-1x.png)
Pressing the “Submit” button submits this form.
That’s all about creating the form for the many-paged quiz that allows multiple choices using the Advanced Choice, Conditional Block, Calculated, and other fields of the JetFormBuilder plugin for WordPress.