Skip to content

Instantly share code, notes, and snippets.

@taeo
Last active November 8, 2022 15:18
Show Gist options
  • Save taeo/3ae264fa4aad3463b26f to your computer and use it in GitHub Desktop.
Save taeo/3ae264fa4aad3463b26f to your computer and use it in GitHub Desktop.
Quick hack / jQuery plugin to enable visual star ratings from Gravity Forms radio fields.
<!--
GRAVIY FORMS NOTES:
1. Create a “radio” group on any form
2. In the “appearance" tab, give the custom css class `js-gf-rating-stars`
3. The radio values should be in order from low -> high (1,2,3,4,5,etc…).
4. You can have as many stars as you want, it’s based off the number of radio elements in the group.
5. You could technically have as many groups of ratings stars as you want.
JS CONFIG:
This assumes you are using some iconfont, but the setup would work otherwise with some custom css.
Default assumes font awesome. To modify the icon font, just follow the below example:
$('.js-gf-rating-stars').gformsRatings({
iconClass: "class-name-for-your-icon-fonts-star-icon"
});
-->
<style type="text/css">
.gf-rating-star {
color: gray;
cursor: pointer;
font-size: 2em;
}
.gf-rating-star + .gf-rating-star {
padding-left: 4px;
}
.gf-rating-star-active {
color: orange;
}
</style>
<script>
(function($) {
$(document).ready(function() {
$('.js-gf-rating-stars').gformsRatings();
});
// The meat and potatoes
$.fn.gformsRatings = function( options ) {
// Setup options
var settings = $.extend({
'labels' : false,
'activeClass' : 'gf-rating-star-active',
'iconClass' : 'fa fa-star'
}, options);
return this.each(function() {
// Store the object
var $this = $(this),
$container = $('.ginput_container', $this),
$radioGroup = $('.gfield_radio', $this),
$radios = $('input[type="radio"]', $radioGroup),
$stars = null,
$currentIndex = null;
// Initialize
var init = function() {
$radioGroup.css('display', 'none');
$wrap = $('<div class="gf-rating-stars"></div>');
for (var i = 0; i < $radios.length; i++) {
var label = $radios.eq(i).siblings('label').text(),
value = $radios.eq(i).val(),
$star = $('<i class="js-gf-rating-star gf-rating-star"></i>');
$star
.addClass(settings.iconClass)
.data('index', i)
.data('value', value)
.data('label', label)
.attr('title', label)
.appendTo($wrap);
}
$wrap.appendTo($container);
$stars = $('.js-gf-rating-star');
// Star Interactions
$stars.on('hover', function() {
handleHover($(this));
}).on('click', function() {
handleClick($(this));
});
// Restore to currently checked next field
$wrap.on('mouseout', function() {
$checked = $radios.filter(':checked');
if (!$checked.length) {
$stars.removeClass(settings.activeClass);
} else {
highlight($currentIndex);
}
});
}
var highlight = function(index) {
$stars.filter(':gt(' + index + ')').removeClass(settings.activeClass);
$stars.filter(':lt(' + index + '), :eq(' + index + ')').addClass(settings.activeClass);
}
var handleHover = function(el) {
var index = el.data('index');
highlight(index);
}
var handleClick = function(el) {
var index = el.data('index');
$currentIndex = index;
$radios.eq(index).trigger('click');
}
// Kick it off
init();
});
};
})(jQuery);
</script>
@gfarquhar
Copy link

I created a form and had this working fine and then duplicated that form to work off of and it won't work on the second form. Any suggestions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment