How to Style the Poll Results Confirmation Screen

Overview

Would you like to style the poll results screen that’s shown on the confirmation page? With a little CSS this is quite easy to do. We’ll walk you through the CSS needed to style the poll results that appear on your confirmation page.

By default, styling is already added to the poll results.

Default styling for poll results

Setup

For the purpose of this documentation, we’ll presume you’ve already created your form by following the steps in this tutorial.

1) Enable Poll Results

To begin, open the Form Builder and go to the Settings » Surveys and Polls tab.

Once there, click the checkbox Enable Poll Results.

Under the form builder in Surveys and Polls tab of the Settings panel, click to Enable Poll Results

2) Add the CSS code

In the CSS snippet shown below, we’re adding our styles to the form ID -194.

To style the poll results, copy this CSS to your site, you’ll want to tweak the color values to match the branding of your site.

.wpforms-poll-results#wpforms-poll-results-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}

div#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

For a more detailed explanation of linear-gradients, please see the Mozilla documentation.

Remember to update the -194 to match the form ID of your specific form. If you need help finding your form ID, please review this tutorial.

Poll results section of confirmation page

If you need any assistance in picking your gradient colors in the CSS above, please visit the CSS Gradient site for the online (free) generator.

And that’s it! You’ve now successfully styled the poll results. Would you like to learn how to style the placeholders in your form fields? Take a look at this tutorial on How to Style Placeholder Text for Form Fields.