How can I use 'star ratings' in my CFv5 form?

Written Nov 23, 2014 11:45

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

FAQs