The Select All That Apply (SATA) element is a powerful element type that lets consumers select multiple items on one screen. It offers a variety of functionality to create engaging experiences and collect data flexibly.
Before you begin
Ensure you have access to the experience where you intend to add the SATA element.
Add a select all that apply element
Go to the screen where you want to add the element.
Select Add Element and go to the Response types section.
Click the Select All That Apply option.
Configure the select all that apply element
If a user selects multiple options on a select all that apply screen, all the mapped values will be ORed with one another.
In the example below, if the end user selects Orange and Grey, Jebbit will filter by all products with Orange OR Grey tied to them.
"Select All That Apply" (SATA) and Multiple Columns: For screens with form elements or "select all that apply" options, you can add additional branches or logic based on responses. If your layout includes two columns, a container is required to maintain structure. Using two columns for SATA responses essentially creates AND logic instead of OR logic. This means the system searches for products matching the value in column A and the value in column B. If you put these in the same column, it would search for value A or value B, which might not be desirable for things like dietary restrictions.
Set minimum and maximum requirements
You can set minimum and maximum selection requirements.
The end user must select at least the minimum number of choices to continue.
If the user selects more than the maximum, they receive an error message.
To enable these validations, set your SATA Controls to Required.
Choose the select style
There are three button types available: Checkboxes (default), Buttons, Image Buttons.
Add bulk responses
Easily add None of the Above or All of the Above options. Selecting None of the Above unselects all other items.
Select the Other - Open Response checkbox to add a text input field. This allows consumers to enter their own answer and helps uncover new insights.
Note that the Other option only works with a Checkbox-style Select All That Apply. For Buttons or Image Buttons, add a separate Open Response form element below the SATA element.
Configure desktop layouts
Optimize screen space by setting different layouts for desktop and mobile.
Adjust the layout using Columns or by setting button width.
Set the number of columns to display.
Adjust the Desktop Size (S, M, L).
Set button width, and the builder automatically aligns them.
Set up branching
Create personalized consumer experiences with branching based on item combinations.
You can weight paths to determine which path the consumer takes in case of a tie.
Configure reporting
Question Analytics shows which screens have form fields and the type of each form field.
For Select All That Apply fields, a label provides a breakdown of responses.
When exporting CSV data, choose to view multiple items in one cell or each item in its own column.
Next steps
Review your experience to ensure the SATA element functions as intended.
Monitor analytics to gain insights from user responses.
FAQ
Is it possible to cap the number of selected options on a Select All That Apply form?
You can set minimum and maximum validations on your Select All That Apply form in Jebbit. This allows you to cap the number of responses a user can submit. To add validations, first set your SATA form to Required.
Why aren't my "select all that apply" form options showing as selected when clicked?
If your “select all that apply” form options don’t appear selected when clicked, it’s likely because the “Selected” state is styled the same as the default. To fix this, click on the form element in the screen editor, scroll to the State section in the left-hand panel, toggle on the Selected state, and adjust the background color or other styling to visually indicate when an option has been selected.
How do I add space between the button/options in a Select All That Apply form?
To add space between options in a Select All That Apply form, click on an individual option (button) within the form, then open the Edit Controls panel and locate the Spacing section. From there, adjust the Vertical or Bottom spacing values to increase the space between each option so they display with the desired layout.