Hy Chris,
thanks for the Plugin its awesome and i have been looking for somethink like it for a lon time.
Since i also needed the Star rating funktionality i made myself a little quick ad dirty Javascript Workaround and want to share it, because by searching for it i realised, that many others would like it aswell.
Here is what i did:
- add a custom field type “text” fith the name “rating” to your form
- in your view add the “rating”-field type “text” with class “testimonial-rating-stars”
- add the following code on the page where your form is displayed:
<script type="text/javascript">
jQuery( document ).ready(function() {
//FORM
var feedback_rating_field = jQuery('#wpmtst_rating');
feedback_rating_field.before('<div class=""><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="1"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="2"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="3"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="4"></a><a href="javascript:void(0)" class="fa fa-star rating-star" data-ratingstar="5"></a></div>');
feedback_rating_field.css({
'visibility' : 'hidden',
'height' : '0',
'margin' : '0',
'padding' : '0',
});
jQuery(document).on("click","a.rating-star",function() {
var clicked_star_value = jQuery(this).attr('data-ratingstar');
feedback_rating_field.val(clicked_star_value).attr('value',clicked_star_value);
jQuery('a.rating-star').removeClass('active');
jQuery.each( jQuery('a.rating-star'), function( key, value ) {
if(jQuery(this).attr('data-ratingstar') <= clicked_star_value){
jQuery(this).addClass('active');
}
});
});
});
</script>
- add the following code on the page where your output is displayed:
<script type="text/javascript">
jQuery( document ).ready(function() {
//OUTPUT
var stars_output_wrapper = jQuery('.testimonial-rating-stars');
var stars_output_value = stars_output_wrapper.text();
stars_output_wrapper.empty();
var arr = [1,2,3,4,5];
var output_stars = '';
jQuery.each(arr, function (index, value) {
if(value <= stars_output_value){
var star_class = ' active';
} else{
var star_class = '';
}
output_stars += '<a href="javascript:void(0)" class="fa fa-star rating-star'+star_class+'" data-ratingstar="'+value+'"></a>';
});
stars_output_wrapper.append(output_stars);
stars_output_wrapper.fadeIn();
});
</script>
- give the stars some css
i hope this helps even if it’s just quick and dirty and might not be for everyone.
