How to Create a Conditional Rating Form

Introduction

Would you like to create a conditional rating form using Dropdowns? Using the Survey and Polls addon, you can already create a form with results that would show you what your visitors think and allow them to vote.

However, for the purpose of this documentation, we want a form that will allow our users to vote on features based on priority number. Since we’re using a number system for the priority, we don’t want to allow a feature to have the same priority number as another feature our visitors vote on.

In this tutorial, we’re going to create our rating form using a small snippet that removes a priority number if it’s already been selected so that we can make intelligent decisions based on the priorities our customers are looking for.

Creating the form

We’ll begin by creating a new form and adding our fields. Our form will have a Name field, an optional Email field, and 5 Dropdown fields listing the features we would like them to rate.

If you need any assistance with creating your form, please review this helpful guide.

begin by creating your form and adding your fields including your dropdown fields

Setting the Dropdown field options

Now, for our Dropdown fields, we’ll need to go through each one and add our rating system. For the purpose of this documentation, our ratings are numerically based on 1-10 meaning 1 is the least favorited option and 10 is the highest.

You can, of course, use what system works best for you whether that’s numerical or text.

add the options you want your visitors to select when rating your features

Selecting the Dropdown Style

From the Advanced tab of the Dropdown field, please remember to select the Classic style for your fields. This is very important as the snippet will only work with this style.

from the Advanced tab, select Classic for the style as the snippet will only work with the Classic style

Adding the snippet

It’s now time to add the snippet to your site. If you need any assistance with where and how to add snippets to your site, please check out this tutorial.

/**
 * WPForms Conditional Rating Form
 *
 * @link   https://wpforms.com/developers/how-to-create-a-conditional-rating-form/
 */

function wpf_dev_conditional_dropdown_options( ) {
?>
   
    <script type="text/javascript">
	
	// only run on dropdown fields inside the form ID 2552
	jQuery('form#wpforms-form-2552 select').on('change', function() {
		
		jQuery('option').prop('disabled', false);
		
		jQuery('select').each(function() {
			
			var val = this.value;
			
			jQuery('select').not(this).find('option').filter(function() {
				
				return this.value === val;
				
			}).prop('disabled', true);
			
		});
		
	}).change();
		
    </script>
   
<?php
}
   
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_dropdown_options', 30 );

This snippet will look for any Dropdown fields inside the form ID 2552 and once an option is selected from one of the fields, that option will no longer be able to be selected from the other remaining fields.

Please remember to update the field id 2552 to match your own form ID. If you need help with finding your ID, please review this tutorial.

Now as options are being selected, you can see them become disabled in the other fields.

as selections are made inside your dropdown, you can see them become disabled in the other fields

And that’s it! You’ve successfully created a conditional rating form using WPForms Dropdowns. Would you like to conditionally hide your submit button based on the answers provided in your form? Check out our tutorial on How to Conditionally Show the Submit Button.

Action Reference: wpforms_wp_footer_end

FAQ

Q: How can I reset the options?

A: If a user changes their mind on any options, they would just go back, make a new selection and that number would re-appear in the remaining dropdowns.

Q: Can Conditional Logic be used to show and hide the dropdowns?

A: Absolutely! You can use the WPForms Conditional Logic to hide any and all dropdowns until a selection has been made. You’ll need to make sure that when you add this logic, verify and test the logic needed to apply for example Feature 2 is hidden as long as Feature 1 is not –Select One —.

conditional logic options