Star ratings replace a set of radio buttons with star images so the user can select 1 star, 2 stars, etc. typically these are used in 'review' or 'rating' forms.
There are several jQuery plug-ins that will let you add stars to reviews. I used the fyneworks Star Rating plug-in available here.
1. Download the fyneworks Star Rating package, unzip it and copy the contents to a new /components/com_chronoforms5/extras/fyneworks-star-rating folder on your site. You should also copy the index.html file from one of the other folders into the new folders.
2. In your form add this PHP to a Custom Code action in the On Load event:
<?php
JHtml::_('jquery.framework');
$doc = JFactory::getDocument();
$doc->addScript(JUri::root().'/components/com_chronoforms5/extras/fyneworks-star-rating/jquery.rating.pack.js');
$doc->addStyleSheet(JUri::root().'/components/com_chronoforms5/extras/fyneworks-star-rating/jquery.rating.css');
?>
This will include the JavaScript and CSS files when the page loads.
3. Add a Radio Button element to your form in the Designer tab and set the Options with no text e.g.:
1= 2= 3= 4= 5=
Set the Radio Button layout to Horizontal and add star to the Class box.
4. Test your form, it should now include an element looking like this:
For ChronoForms v4 with MooTools, please see this FAQ
