How to Hide Empty Poll Results

Introduction

Would you like to hide your empty poll results when you use the WPForms Surveys and Polls addon?

By default, when you enable reporting after the form is submitted, all results will show even if the option hasn’t received any voting. However, using a small JavaScript you can easily change this so that only the results that have received votes will display after the form is submitted. In this tutorial, we’ll walk you through each step on how to hide these empty results.

Creating your form

First, you’ll need to create your form and add your poll questions. If you need any help in creating this type of form, please check out this documentation.

start by creating your form and adding your fields

Enabling AJAX

Next, go to Settings from inside the form builder. On the General tab, click the arrow to open the Advanced. Once there, toggle the Enable AJAX form submission so that’s it’s enabled.

enable AJAX on form submission from the advanced form settings

It’s important to make sure this step is followed or your snippet will not run. The snippet will only run on forms that have the AJAX enabled on the form submission.

Enabling Poll Results

Once you’ve enabled AJAX on the form submission, click on the Surveys and Polls tab and make sure the Enable Poll Results is checked and click Save to save the form.

on the surveys and polls tab, click the checkbox to enable poll results

Adding the snippet

Finally, it’s time to add the snippet that will hide the poll results.

If you need any help in how to add snippets to your site, please check out this tutorial.

/**
 * Hide the poll results if empty
 *
 * @link https://wpforms.com/developers/how-to-hide-empty-poll-results/
 */

function wpf_dev_hide_empty_poll_results() {
    ?>
    <script>
        jQuery(function($){
            $('.wpforms-container').on('wpformsAjaxSubmitSuccessConfirmation', function(e) {
                $('.wpforms-poll-answer').each( function() {
                    if ( $(this).find('.wpforms-poll-answer-percent span').text() === "0%" ) {
                        $(this).hide();
                    }
                })
            })
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_hide_empty_poll_results', 10 );

Any option for any question on your form that is 0% will not display on your poll results. When your form is submitted, users will only see the results that have received votes.

this snippet will hide empty poll results for each question on your form

And that’s all you need! Would you like to also style the poll results page? Check out our article on How to Style the Poll Results Confirmation Screen.

Action Reference: wpforms_wp_footer_end