Rating input
Learn how to create a rating input.
Last updated
Learn how to create a rating input.
Last updated
Here's a rating input with only the required parameter(s):
Given below is another rating input with all the available parameters. The parameter names are case insensitive, and the ones without values after =
are boolean parameters. You can find details about all of them in the available parameters section.
A form field is a Markdown paragraph in the following format:
The {fieldName}
is the name of the input. It is used as the key for the value of the input in the form data (which is submitted as JSON). The {fieldName}
can also be used to reference the input's value in the template. It must adhere to the following rules:
Not start with a number
Not contain a dash or hyphen (-
)
Not contain a space
The {optionalAsterisk}
is an *
which (if provided) indicates that the field is required. If this is omitted, then the field becomes optional.
The {fieldType}
must be one of the following: TextInput
, EmailInput
, TelInput
, NumberInput
, SelectBox
, ChoiceInput
, PictureChoice
, RatingInput
or OpinionScale
(case insensitive).
For example, here's a required email input form field with a class name added to the wrapping container:
The following is not a valid form field because the empty line means that there are two Markdown paragraphs, and none of them follow the valid format:
Parameters are information provided within the (...)
when creating form fields. They must be separated by the form-delimiter
, which by default is |
. The form-delimiter
can be changed as a setting. For example, this would render the exact same email input from above:
Please note once again that parameter names are case insensitive, and boolean parameters only require their names to have effect (no need for values after =
).
The following parameters are available for number inputs:
question
The main question of the form field. Here, the question is placed inside a <legend>
element, which in turn is placed inside the wrapping <fieldset>
.
description
Any extra information that the user may need to fill out the form.
fieldSize
When set to sm
, the font sizes of the question, description, and answer are made smaller. Can also be globally set via the #! field-size = sm
setting.
subfield
Boolean parameter. When set, the question of the form field is made smaller. This is useful for creating subfields, especially inside .col-*
classes. For example:
autofocus
Boolean parameter. When set, the input will be automatically focused when the parent slide becomes active, or immediately after page load (in case of single page layout). Can also be globally set via the #! autofocus = all-slides
setting (only for slides).
disabled
Boolean parameter. When set, the input is disabled.
outOf
The maximum rating possible. By default, this is set to 5
, creating a 5-star rating input. Must be an integer value between 1-10
(included).
icon
The icon used for the rating input. By default, stars are used. You can set this to heart
or hearts
to create a heart-rating input instead of the default star-rating.
hideLabels
Boolean parameter. When set, the small number labels beneath the stars are hidden.
value
If set, this becomes the default value of the input.