Ranking Field

The Ranking field lets users arrange options in their preferred order. Respondents reorder choices with drag handles or up/down arrows. You can customize the layout, add photos to options, and define as many ranking choices as you need.

This guide walks you through adding and customizing the Ranking field in Fluent Forms.

NOTE

The Ranking field requires Fluent Forms Pro. See Upgrade to Fluent Forms Pro Add-on.

Adding the Ranking Field

Go to Forms from the Fluent Forms navbar, select the form you want to edit, and click Edit to open the form editor.

NOTE

If you do not have any existing forms, see How to Create a Form with Fluent Forms or Create a Form using Templates.

On the Editor page, click the Plus icon and open Advanced Fields.

Click or drag the Ranking field into the editor.

Customizing the Ranking Field

Hover over the field and click the Pencil icon to open Input Customization.

Ranking Field Options

A. Element Label: The field title users see on the form.

B. Admin Field Label: A label shown only to admins when viewing submissions.

C. Options: Customize rankable choices:

• Rename individual option labels
• Add options with the Plus (+) icon
• Remove options with the Minus (−) icon
• Enable Show Values for backend values or Photo to display images alongside text (both can be used together)
• Use Bulk Edit / Predefined Data Sets to edit in bulk or import datasets

D. Shuffle the available options: Randomize the initial order when the form loads.

E. Label Placement: Set label position to Top, Right, Bottom, Left, Hide Label, or Default.

F. Required: Require users to complete the ranking before submission.

G. Ranking Layout: Choose how options are displayed:

• List Ranking: Standard vertical list
• Grid Ranking: Horizontal grid layout. When selected, use Grid Columns to set the number of columns.

H. Show Position Number: Display numbered badges (1, 2, 3) next to each option.

I. Accent Color: Set a custom color for position number badges.

J. Show Reset Icon: Show a button that clears ranking selections so users can start over.

Advanced Options

A. Name Attribute: The HTML name attribute. You usually do not need to change this.

B. Help Message: Guidance text shown below the field.

C. Container Class: Custom CSS classes for the field wrapper.

D. Element Class: Custom CSS classes for the input field.

E. Conditional Logic: Show or hide the field based on other values. See Set up Forms with Conditional Logic in Fluent Forms.

Embed the Form into the Front

Click Save Form to apply your changes.

Copy the form Shortcode from the forms list and paste it into a Page or Post. Click Preview & Design at the top of the editor to preview the form.

Preview of Added Ranking Field

Here is a preview of the form with the Ranking field active.

Users reorder options with up/down arrows or by dragging the handles on the right side of each item.