Form for collecting star ratings

Hello @radovand

Yes, of course, that’s possible. But the issue is not collecting the stars’ ratings, the most important is to display the results. You have different alternatives to store and display the results.

For example, you can edit the “cp_calculatedfieldsf_insert_in_database.php” file (https://cff.dwbooster.com/documentation#third-party-database) (distributed with the Developer and Platinum plugin versions) or use the “Database Queries for Calculated Fields Form” complementary plugin (https://cff-bundles.dwbooster.com/product/database-queries) to store the ratings as metadata of the posts, pages, or products you are evaluating. And, use the DS fields distributed with the Developer and Platinum plugin version to read the rating and display the corresponding stars (https://cff.dwbooster.com/blog/2019/02/14/ds)

Best regards.

Thank you for your response. For me, it is sufficient to choose the rating (number of stars) and send this rating via email.

I tried a combination of HTML fields, JS, and CSS.

See the code below.

It almost works. At the moment, the problem is that the number of stars is not being transmitted correctly.

HTML code:

<div class="cffo-star-rating">
  <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5 stele">★</label>
  <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4 stele">★</label>
  <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3 stele">★</label>
  <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2 stele">★</label>
  <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1 stea">★</label>
</div>

CSS Code:

.cffo-star-rating {
    display: inline-block;
    direction: rtl;
    unicode-bidi: bidi-override;
}

.cffo-star-rating input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.cffo-star-rating label {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 30px !important;
    color: #ddd !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.2s ease-in-out !important;
}

.cffo-star-rating label:hover,
.cffo-star-rating label:hover ~ label,
.cffo-star-rating input:checked ~ label {
    color: #c97757 !important;
}

.cffo-star-rating label:hover,
.cffo-star-rating label:hover ~ label {
    color: #579981 !important;
}

JS Code

(function() {
    var starRating = 0;
    var container = document.querySelector('.cffo-star-rating');
    if (container) {
        var checkedInput = container.querySelector('input:checked');
        if (checkedInput) {
            starRating = parseInt(checkedInput.value);
        }
    }
    
    switch(starRating) {
        case 1: return "1 stea";
        case 2: return "2 stele";
        case 3: return "3 stele";
        case 4: return "4 stele";
        case 5: return "5 stele";
        default: return "";
    }
})();

Hello @radovand

The equations are evaluated when their operands change their values, but the stars icons are no entry boxes. So, you must do it in the other direction, you must enter a script block in an “HTML Content” field that assigns the value to the calculated field or another submittable field in the form.

Please note that this question is not specific to our plugin. If you require custom coding services to implement this behavior on your form, please contact us through the plugin website. Contact Us.

Best regards.

Thanks for your reply.
I finally found a convenient solution, which is a combination between a Radio button, CSS and JS.

Best regards,

Radovan D.