Use multiple-choice data fields as select inputs, radio buttons, or checkboxes.
How it works
Multiple-choice options can be displayed as select fields, radio buttons, or checkboxes.
Select fields allow users to choose one or more options from a dropdown list. Radio buttons let users to pick only one option. Checkboxes allow users to select one or more options.
Step 2: Open the HTML script and find the code
Setup Guide
This guide explains how to use the Formli multiple-choice data field on your website. The example includes instructions on how to connect it with a Webflow page elements.
Step 1: Create data field
- Open your Data Fields block
- Create new data field with Type = “Multiple choice”
- Add multiple choice options that will be used as values.
- Save the data field first, and then save the block.
Step 2. Open the HTML script and find multiple choice field
- Open
Moremenu and click on theEmbed on website.
- Select
HTMLin the dropdown list.
- Copy the script code and paste it before
</head>tag on you webpage.
- Copy the HTML Code and paste it inside
<body>element if you want to use tha form ‘as is’.
- Or find
data-os-element="multiple-choice”and connect it manually.
Code structure
For using multiple choice data fields as select input you don’t need to change the structure of HTML code. Find this part:
<div>
<label for="df54x7d3yle">Frequency</label>
<select data-os-element="multiple-choice" data-os-uuid="df54x7d3yle" id="df54x7d3yle">
<option value="" label=" "></option>
<option selected="selected" value="mo81v65pjev">Weekly</option>
<option value="mo647n985e2">Bi-weekly</option>
<option value="mo918nj301p">Monthly</option>
</select>
<div data-os-element="field-error" data-os-for="df54x7d3yle" class="os-hidden"></div>
</div>
Example:
To use it as radio buttons, you should replace it with this structure, keeping the same UUIDs:
<div data-os-element="multiple-choice" data-os-uuid="df54x7d3yle">
<input
name="df54x7d3yle"
type="radio"
id="mo81v65pjev"
value="mo81v65pjev"
/>
<label for="mo81v65pjev">Weekly</label>
<input
name="df54x7d3yle"
type="radio"
id="mo647n985e2"
value="mo647n985e2"
/>
<label for="mo647n985e2">Bi-weekly</label>
<input
name="dfk4qqjmol4"
type="radio"
id="mo918nj301p"
value="mo918nj301p"
/>
<label for="mo918nj301p">Monthly</label>
</div>Example:
To use it as checkboxes list, you should replace it with this structure, keeping the same UUIDs:
<div data-os-element="multiple-choice" data-os-uuid="df54x7d3yle">
<input data-os-element="option" type="checkbox" data-os-uuid="mo81v65pjev">
<label for="mo81v65pjev">Weekly</label>
<input data-os-element="option" type="checkbox" data-os-uuid="mo647n985e2">
<label for="mo647n985e2">Bi-weekly</label>
<input data-os-element="option" type="checkbox" data-os-uuid="mo918nj301p">
<label for="mo918nj301p">Monthly</label>
</div>Example:
How to connect Formli with Webflow form
If you want to use Webflow elements, instead of pasting the Formli HTML code inside the <body> tag, follow these steps:
- Create form element. Check and add custom attributes, which connect to the Formli block:
Action = "https://app.formli.com/api/v1/data_responses"
Method = POST
data-os-element = “form”
data-os-uuid = “” (uuid of the Formli block)
- Add elements to the form and connect them by following the instructions below.
Select input
- Add
Selectinput to the form.
- Add custom attributes to the select field to connect with the Formli data field:
data-os-element="multiple-choice"
data-os-uuid="” (uuid of the data field)
- Connect each select choice with its option value.
- Check the results - there is a select list where you can choose only one option.
- To allow multiple selection, mark the checkbox in the field settings. Users can choose multiple options using the cmd (ctrl) key.
Checkboxes
Your multiple choice options can be displayed as checkboxes so that your responder can select on or more options.
- Add
<div>container and add custom attributes to it.
data-os-element="multiple-choice"
data-os-uuid="” (uuid of the data field)
- Add checkbox fields to the
div. - For each checkbox add:
data-os-element="option"
data-os-uuid="" (multiple-choice option value)
- Save and check the results:
Radio buttons
Your multiple choice options can be displayed as radio buttons so that your responder is limited to selecting only one option.
- Add <div> container inside the form and add its custom attributes to connect with multiple-choice data field:
data-os-element="multiple-choice"
data-os-uuid="” (uuid of the data field)
- Add the radio buttons into the <div> container.
- Change settings for each radio button:
Group Name = "" (uuid of the data field)
Choice Value = "" (uuid of the multiple choice option)
- Publish your website and check the results!
Nested elements
There are times when one multiple choice option contains several dependent multiple choice options. In these cases, one set of multiple choice options can be nested inside of another set of multiple choice options.
- Create the necessary data fields with their options.
- Create an equal number of div containers. You may nest them inside one another. For each div, add custom attributes that correspond to data fields:
- Connect each checkbox (or other element) with their option value by adding custom attributes:
data-os-element="multiple-choice"
data-os-uuid="” (uuid of the data field)
data-os-element="option"
data-os-uuid="" (multiple-choice option value)
data-os-for="” (uuid of the data field)
- Save and publish the results.