You can create a form with the simple JSON schema as follows.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdn.form.io/js/formio.embed.js"></script>
<div id="formio"></div>
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true,
tooltip: 'Enter your <strong>First Name</strong>',
description: 'Enter your <strong>First Name</strong>',
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true,
tooltip: 'Enter your <strong>Last Name</strong>',
description: 'Enter your <strong>Last Name</strong>',
},
{
type: 'select',
label: 'Favorite Things',
key: 'favoriteThings',
placeholder: 'These are a few of your favorite things...',
data: {
values: [
{
value: 'raindropsOnRoses',
label: 'Raindrops on roses',
},
{
value: 'whiskersOnKittens',
label: 'Whiskers on Kittens',
},
{
value: 'brightCopperKettles',
label: 'Bright Copper Kettles',
},
{
value: 'warmWoolenMittens',
label: 'Warm Woolen Mittens',
},
],
},
dataSrc: 'values',
template: '<span>{{ item.label }}</span>',
multiple: true,
input: true,
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary',
},
],
}).then(function (form) {
form.on('submit', function (submission) {
console.log(submission);
});
});