{% set form_children %}
{% set category_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Category',
displayType: 'floating',
attributes: {
for: 'category',
},
} only %}
{% endset %}
{% set select %}
{% include '@bolt-components-form/form-select.twig' with {
options: [
{
type: 'option',
value: '',
label: '- Select a category -',
},
{
type: 'option',
value: 'option-a',
label: 'Option A'
},
{
type: 'option',
value: 'option-b',
label: 'Option B'
}
],
attributes: {
id: 'category',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: select,
} only %}
{% endset %}
{% set first_name_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'First name',
displayType: 'floating',
attributes: {
for: 'first-name',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter first name',
type: 'text',
id: 'first-name',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set last_name_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Last name',
displayType: 'floating',
attributes: {
for: 'last-name',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter last name',
type: 'text',
id: 'last-name',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set work_email_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Work email',
displayType: 'floating',
attributes: {
for: 'work-email',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter work email',
type: 'email',
id: 'work-email',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set phone_number_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Phone number',
displayType: 'floating',
attributes: {
for: 'phone-number',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
placeholder: 'Enter phone number',
type: 'tel',
id: 'phone-number',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set country_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Country',
displayType: 'floating',
attributes: {
for: 'country',
},
} only %}
{% endset %}
{% set select %}
{% include '@bolt-components-form/form-select.twig' with {
options: [
{
type: 'option',
value: '',
label: '- Select a country -',
},
{
type: 'option',
value: 'option-a',
label: 'Option A'
},
{
type: 'option',
value: 'option-b',
label: 'Option B'
}
],
attributes: {
id: 'country',
required: true,
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: select,
} only %}
{% endset %}
{% set message_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Message',
displayType: 'floating',
attributes: {
for: 'message',
},
} only %}
{% endset %}
{% set textarea %}
{% include '@bolt-components-form/form-textarea.twig' with {
attributes: {
placeholder: 'Enter a message',
rows: 5,
required: true,
id: 'message',
}
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: textarea,
} only %}
{% endset %}
{% set agreement_input %}
{% set label %}
{% include '@bolt-components-form/form-label.twig' with {
title: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
displayType: 'inline-checkbox',
attributes: {
for: 'agreement',
name: 'agreement',
},
} only %}
{% endset %}
{% set input %}
{% include '@bolt-components-form/form-input.twig' with {
attributes: {
type: 'checkbox',
id: 'agreement',
},
} only %}
{% endset %}
{% include '@bolt-components-form/form-element.twig' with {
label: label,
children: input,
} only %}
{% endset %}
{% set submit_button %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Send',
display: 'block',
attributes: {
type: 'submit'
},
} only %}
{% endset %}
{% include '@bolt-components-grid/grid.twig' with {
items: [
{
column_start: '1',
column_span: '12',
content: category_input,
},
{
column_start: '1',
column_span: '12 6@small',
content: first_name_input,
},
{
column_start: '1 7@small',
column_span: '12 6@small',
content: last_name_input,
},
{
column_start: '1',
column_span: '12 6@small',
content: work_email_input,
},
{
column_start: '1 7@small',
column_span: '12 6@small',
content: phone_number_input,
},
{
column_start: '1',
column_span: '12',
content: country_input,
},
{
column_start: '1',
column_span: '12',
content: message_input,
},
{
column_start: '1',
column_span: '12',
content: agreement_input,
},
{
column_start: '1',
column_span: '12',
content: submit_button,
},
]
} only %}
{% endset %}
{% include '@bolt-components-form/form.twig' with {
children: form_children,
} only %}