Using radio buttons in HTML embedded forms
How it works
To match your designs, consider substituting a radio button for a multi-select in your form. Using a radio button instead of a multi-select lets users pick only one option at a time, making it easier to choose. This is especially useful when you have a small number of options and want to steer users towards a specific choice.
Setup Guide
This guide explains how to use the Formli multiple-choice data field with radio buttons on your website. The example includes instructions on how to connect it with a Webflow page.
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 for radio buttons.
- Save the data field first, and then save the block.
Open the HTML script
- 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.
For using multiple choice data fields you should 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>
and 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>How to connect with Webflow radio buttons
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 <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!
