Form widget: rating

Modified on Thu, 20 Jul, 2023 at 10:24 AM

The icon for elements of type Rating.

Overview

This plugin adds a new form widget that is available in the FORMCYCLE Designer. It lets the user choose a rating by clicking on the appropriate number of icons. You can change the number of icons as well as the icon type and color in the properties panel to the right of the FORMCYCLE Designer. When the user selects a rating, that rating is transmitted to the server as the value of the rating form field. You can also configure that value in the FORMCYCLE Designer.

The rating plugin adds a list of icons where the user can choose a rating by clicking on one of the icons.

Installing

Install the plugin as a client or system plugin. You can find a tutorial on how to install plugins here: here.

Settings

This widget offers the following settings in the properties panel to the right of the FORMCYCLE Designer:

Options

Sample configuration for a rating plugin.

Rating element have ad additional options section. Here you can select the number of icons and enter the value that is submitted when the user chooses a rating. You can either enter this data manually, or select a CSV data source that contains the available ratings and the corresponding value.

Word and PDF export

Layout of a rating widget when the form is exported as a Word or PDF document

When the form is exported as a Word or PDF document, rating element are displayed like normal select elements with the configured options.

CSS layout

You can adjust the layout of the icons and the colors via custom CSS.

For example, if you would like to change the third icon of the rating element with the name rate1:

[xn=rate1] .idx3 i::before{
  content: "\e906";
}

To change the color of the sixth icon for the rating element with the name rate2 (only when it is active or the user hovers over the icon):

[xn=rate2] .idx6.hover i,
[xn=rate2] .idx6.active i {
  color: #55C937;
}