Select Buttons Guide – How to Make Multi-Select Answers

Buttons let you make things happen with your forms and quizzes. You can even make multiple selections at once with the Select Click Action.

How to set up Multi-Select Buttons:

1. Make sure your instructions indicate to the user that you can select more than one choice (ie “Select all that apply”).



2. Create buttons for all of your possible choices.
3. Set the click action to “Select Button”



4. Create a Next button set to “Submit Form”



Note: you may have to turn on the form and hide all of the fields so they don’t display. Then you can configure for your form settings, such as “after form submit” etc.

Styling Select Buttons

There are 4 states for Select Buttons:

• Default – This is the default state of the button when not selected or hovered.
• Hover – This is how the button looks on mouseover, but it’s not selected yet.
• Selected – This is the state of the button when the user has clicked on it and it is selected as an option.
• Selected + Hover – This is how the button looks when it’s selected and hovering over it with your mouse.

You can edit the Font, Border, Background and Extra CSS styles for every state. By default “ALL” will be selected and apply to all for styles.

When you click on the arrow above each section a dropdown menu appears that lets you select the different states.

It’s very important that you design your buttons in a way that clearly indicates to the user when they have selected and unselected options.

Select Button Examples

Here are some suggestions on how to style buttons:

Text Select Buttons

Default: This should look pretty similar to any single select buttons you have.

Hover: This should also look similar to the hover state of any single select buttons you have. We recommend indicating mouseover on desktop with a subtle change, like a slightly darker background color.

Selected: To indicate a button is selected it has to look clearly different from the default button. You outline the button or change the fill color, but one of the most reliable ways to indicate that a button is selected, is to add a background image of a checkmark.

Note: You may have to add some Extra CSS, such as a background-size and background position.
In this case, we have:

background-size: 25px;
background-position: 10px 50%

Selected + Hover: Make sure that the Selected + Hover state has the same indicator as the Selected state so the user doesn’t have to guess if they have already selected that button when their mouse is over it. In this case, we have the same checkmark image and outline color as the selected state, but the same background color as the default hover state.

Image Select Buttons

Since image buttons already have a background image, it’s not as easy to add a checkmark. However you can usually make a selected button different enough by changing the outline color or fill color to indicate it has been selected.

Being consistent with your design will help convey the states to the user. It’s vital that you can tell the button is selected for both the “Selected” and “Selected + Hover” states.

Default: The default style of the button before its selected or hovered.

Hover: The background color has been made darker to indicate mouseover.

Selected: The background color matches the default style, but now a 2px outline has been added.

Selected + Hover: The background color matches the hover style, and the 2px outline from the selected state is also present.

Advanced:

If you’re really skilled with CSS you can add 2 background images and positions and include an image and a checkmark. You would need to add CSS for each state with something like:

background: url('icon.png') 50% 50% no-repeat, url('checkmark.png') no-repeat, white;

It’s up to you to decide how you want to style select buttons, but just keep these tips in mind and make sure it’s easy to tell when a button is selected vs unselected.