Access Form Builder

From the Shopify Admin dashboard, navigate to Apps -> Formpify-Visual Form Builder.

Click Forms from the left sidebar.

Click “Create New Form” or select an existing form to edit.

Choose a template and click Use Template.

Enter the Form Title and Form Builder interface.

You will be directed to the Form Builder screen.

Add a Rating Scale Field

In the right panel, open the Elements tab. Under Advanced Fields, click Rating Scale.

The Rating Scale field will be.

Edit Rating Scale Field Settings

Click the Edit (pencil) icon on the Rating Scale field to open the settings panel.

General Section

Label

Sets the name of the Rating Scale field displayed on the form.

Description

Enter additional instructions for users (e.g., Please rate our service from 1 to 5). This text appears below the

Rating Scale Field Settings

Scale Type

The Scale Type setting defines how the rating options are structured and displayed in the form.

There are three available types:

1. Numeric Rating Scale

Displays a sequence of numeric values (e.g., 1–5 or 1–10).

Users select a number that represents their rating level.

Characteristics:

Uses only numbers
Simple and easy to understand
Suitable for quick scoring

Common Use Cases:

Overall satisfaction rating
Service quality score
Performance evaluation

2. Likert Scale

Displays agreement or frequency-based response options.

Instead of numbers only, this scale represents levels of agreement or opinion.

Characteristics:

Represents a progression from negative to positive
Often used in surveys

Common Use Cases:

Opinion surveys
Feedback forms
Behavioral research questionnaires

3. Semantic Differential Scale

Displays a scale between two opposite adjectives.

Users select a position between two contrasting terms.

Characteristics:

Two endpoints represent opposite meanings
Numeric scale appears between the two adjectives
Measures perception or attitude

Common Use Cases:

User experience evaluation
Brand perception surveys
Product usability assessment

Number of Scale Points

Specify how many rating options will be displayed.
Example:
5 → Displays 1, 2, 3, 4, 5
10 → Displays 1 to 10

Box Shape

Defines the shape of each rating option. Available options may include:

Square
Circle

This setting changes the visual appearance of the rating buttons only and does no

Left Adjective (Available when using Semantic Differential Scale)

Defines the label displayed on the left side of the scale. This represents one end of the rating spectrum.

Right Adjective (Available when using Semantic Differential Scale)

Defines the label displayed on the right side of. This represents the opposite end of the rating spectrum.

Show Numbers

Checkbox: Show Numbers

Checked → Displays numeric values inside the rating boxes
Unchecked → Hides the numbers and displays only visual indicators.

This option affects only the visual display.

Orientation

Controls the layout direction of the rating scale. Available options:

Horizontal – Rating options are displayed in a row.
Vertical – Rating options are displayed in a column.

Default Value

Sets a pre-selected rating when the form loads.

Enter a numeric value corresponding to one of the scale points.

Field Width

Controls the width of the Rating Scale field relative to the form container.

Set as a percentage (%).
Example:
100% → Full width
50% → Half width

Scale Alignment

Defines how the rating options are aligned within the field container. Available options: Left, Center, Right.

Box Padding

Controls the inner spacing inside each rating option box.

You can set padding individually (in px) for: Top, Right, Bottom, Left

Leave empty to use default padding based on the selected shape.

Selected Color: Defines the background color of the selected rating option. Users will see this color when a rating is chosen.

Unselected Color: Defines the background color of unselected rating options.

Selected Text Color: Defines the text color of the selected rating value.

Unselected Text Color: Defines the text color of unselected rating values.

Required

Determines whether the Rating Scale field must be completed before submitting the form.

Checked → Users must select a rating. The form cannot be submitted if no option is chosen.
Unchecked → The field is optional.

Appearance section

Placeholder

Defines the hint text displayed inside the field before the user enters a value.

Field Label Visibility

Controls whether the field label is displayed.

Visible → The label is shown.
Hidden → The label is not displayed.

Field Label Margin

Controls the spacing (in px) around the field label.
You can set Top, Right, Bottom, and Left individually.

Field Padding

Controls the inner spacing (in px) inside the field container.

Field Margin

Controls the outer spacing (in px) around the entire field.

Custom CSS Class

Allows you to add a custom CSS class name to the field. This can be used for additional styling or custom scripts.

Advanced Section

Visibility - Controls who can see the field:

Visible → The field is displayed to users on the form.
Hidden → The field is not visible to users but still exists in the form.
Administrative → The field is only visible to administrators (not shown to end users).

Conditional Logic - Enables conditional behavior for the field.

Enabled → The field can be shown, hidden, or triggered based on defined conditions.
Disabled → The field is always displayed without conditions.