Use the multistep form component to split up a form into multiple, smaller steps when:
For example:
Do not use the multistep form component for simple or short forms. In this case, use the form component instead.
Do not use the multistep form component when helping users collect user input is not the main goal, but rather splitting up a complex problem or task that requires user input into multiple steps or multiple subtasks or guiding users through a process. In this case, use the wizard component instead.
The multistep form component is a collection of form components that each collect certain user input. It uses the form actions component to let users navigate to the next or previous step in the form.
On desktop resolutions and tablets in landscape mode, the multistep form has the following layout:
On tablets in portrait mode and mobile resolutions, the steps of the multistep form are shown above the container where the form components are loaded.
The steps of the multistep form are displayed so that it is clear for the user what is the current, active step, which steps are not active, which steps are enabled or disabled and which steps are clickable. See the example.
The validation of user input in the form components in each step of a multistep form works as it does for simple or short forms. See the documentation of the form component.
<div class="form--multistep">
{% render '@form-steps--vertical' %}
<div class="form-content">
<h2>Active step</h2>
{% include '@form' with {
primary_button: 'Confirm and continue',
secondary_button: 'Return to the previous step'
} %}
</div>
</div>
<div class="form--multistep">
<nav class="form-steps vertical" aria-labelledby="form-steps-73-vertical">
<h2 id="form-steps-73-vertical" class="visually-hidden">Steps in this wizard</h2>
<ol class="form-steps-list">
<li class="completed"><a href="#"><span>first step</span></a></li>
<li class="completed"><a href="#"><span>second step</span></a></li>
<li class="active"><span><span>active step</span></span></li>
<li class=""><a href="#"><span>Step with a long name</span></a></li>
<li class=""><span><span>inactive fifth step</span></span></li>
<li class=""><span><span>inactive sixth step</span></span></li>
<li class=""><span><span>inactive seventh step</span></span></li>
</ol>
</nav>
<div class="form-content">
<h2>Active step</h2>
<form action="#" method="#">
<p>All fields are required, unless they are marked as optional.</p>
<div class="form-item ">
<label for="default-input1_id">Some input field
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input1_id" name="default-input1_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item ">
<label for="default-input2_id">Some more input
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input2_id" name="default-input2_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item ">
<label for="default-input3_id">How do you feel about fieldsets?
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input3_id" name="default-input3_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<fieldset class="webform-type-fieldset">
<legend>
<span class="legend-title">Contact details</span>
<span class="label-optional">(optioneel)</span>
</legend>
<div class='form-row'>
<div class="form-item stacked">
<label for="default-name_id">Name
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-name_id" name="default-name_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-firstname_id">First name
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-firstname_id" name="default-firstname_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-email_id">E-mail address
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="email" id="default-email_id" name="default-email_name" class="email" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-tel_id">Phone number
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="tel" id="default-tel_id" name="default-tel_name" class="tel" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-input_select">Select
</label>
<div class="form-columns">
<div class="form-item-column">
<select name="default-input_select" id="default-input_select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-input_disabled">Disabled
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input_disabled" name="default-input_disabled" class="text" disabled="disabled" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-input_disabled">Disabled
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-input_disabled" name="default-input_disabled" class="text" disabled="disabled" />
</div>
<div class="form-item-column"></div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-item error">
<legend>
<span class="legend-title">Date</span>
</legend>
<div class="form-item">
<div class="field-message " id="-description">
You can add an optional field description here.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<div class="radio">
<input type="radio" id="input--error-default-radio-1" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-1">Wednesday 6 june 2018</label>
</div>
<div class="radio">
<input type="radio" id="input--error-default-radio-2" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-2">Thursday 7 june 2018</label>
</div>
<div class="radio">
<input type="radio" id="input--error-default-radio-3" name="default-radiogroup" class="radio error" />
<label for="input--error-default-radio-3">Friday 8 june 2018</label>
</div>
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="-validation">
Lorem ipsum dolor sit amet.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<span class="legend-title">Address details</span>
</legend>
<div class='form-row'>
<div class="form-item stacked">
<label for="default-street_id">Street
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-street_id" name="default-street_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item error stacked">
<label for="number_id">Number
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="number_id" aria-describedby="number_id-message" name="number_name" class="text error" aria-invalid="true" />
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="number_id-message">
Lorem ipsum dolor sit amet.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<div class="form-item stacked">
<label for="mailbox_id">Mailbox
<span class="label-optional">
Optional
</span>
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="mailbox_id" name="mailbox_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="postal-code_id">Postal code
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="postal-code_id" name="postal-code_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="municipality_id">Municipality
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="municipality_id" name="municipality_name" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
</div>
<div class="form-item ">
<label for="select">Country
</label>
<div class="form-columns">
<div class="form-item-column">
<select name="select" id="select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="form-item-column"></div>
</div>
</div>
</fieldset>
<fieldset class="webform-type-fieldset">
<legend>
<span class="legend-title">Another fieldset</span>
</legend>
<fieldset>
<legend>
<span class="legend-title">Nested fieldset</span>
</legend>
<div class='form-row'>
<div class="form-item stacked">
<label for="default-textfield_id--2">Label textfield
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-textfield_id--2" name="default-textfield_name--2" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item stacked">
<label for="default-textfield_id--3">Label textfield
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-textfield_id--3" name="default-textfield_name--3" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
</div>
</fieldset>
<fieldset class="webform-type-fieldset">
<legend>
<span class="legend-title">And another one</span>
<span class="label-optional">(Optional)</span>
</legend>
<div class='form-row'>
<div class="form-item error stacked">
<label for="default-textfield_id">Label textfield
<span class="label-optional">
Optional
</span>
</label>
<div class="field-message " id="default-textfield_id-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-textfield_id" aria-describedby="default-textfield_id-message" name="default-textfield_name" class="text error" aria-invalid="true" />
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="default-textfield_id-message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<div class="form-item stacked">
<label for="default-textfield_id--1">Label textfield
</label>
<div class="form-columns">
<div class="form-item-column">
<input type="text" id="default-textfield_id--1" name="default-textfield_name--1" class="text" />
</div>
<div class="form-item-column"></div>
</div>
</div>
</div>
</fieldset>
</fieldset>
<fieldset class="form-item ">
<legend>
<span class="legend-title">Newsletter</span>
</legend>
<div class="form-item">
<div class="form-columns">
<div class="form-item-column">
<div class="checkbox">
<input type="checkbox" id="input-default-newsletter_id--default-checkbox-1" name="default-checkboxgroup" class="checkbox" />
<label for="input-default-newsletter_id--default-checkbox-1">Subscribe to the newsletter and then some really really long text that comes after this small piece of information</label>
</div>
</div>
<div class="form-item-column"></div>
</div>
</div>
</fieldset>
<section class="file-upload">
<div class="form-item">
<label for="default-file--">Attachment
</label>
<div class="form-columns">
<div class="form-item-column">
<div class="file" data-file="No file chosen">
<input type="file" id="default-file--" aria-describedby="default-file---description" name="--default-file--" />
<span id="default-file---description" class="file__button">Select your files here to upload</span>
</div>
<span class="help-text">Allowed file formats: jpg, jpeg, png and gif. Maximum file size: 2 MB. Images must be larger than 744x465 pixels.</span>
</div>
<div class="form-item-column"></div>
</div>
</div>
</section>
<p> <strong>
The City of Ghent treats the personal data you fill in with respect for
your
<a href='#privacy'>
privacy </a>
.
</strong>
</p>
<div class="form-actions">
<button type="submit" class="button button- button button-primary icon-arrow-right">
Confirm and continue
</button>
<button type="button" class="button button-secondary icon-arrow-left icon-left ">
Return to the previous step
</button>
</div>
<div class="privacy-disclaimer" id="privacy">
<h2>With respect for your privacy</h2>
<p> <strong>
The City of Ghent treats the personal data you fill in with respect
for your privacy. For this purpose, we follow the
<a href='https://#'>
General Data Protection Ordinance </a>
.
</strong>
</p>
<h3>For what, with whom and for how long?</h3>
<p>This is a short text describing what the personal data entered in the form above are for, with whom they are shared and for how long they are kept. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales nisi in mi fringilla malesuada. Donec sapien nibh, facilisis id enim a, malesuada lacinia magna. Aenean at sagittis ipsum, nec condimentum quam. Etiam interdum convallis justo, eu sodales erat.</p>
<h3>Your rights</h3>
<p>This is a short text describing the rights. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales nisi in mi fringilla malesuada. Donec sapien nibh, facilisis id enim a, malesuada lacinia magna. Aenean at sagittis ipsum, nec condimentum quam.</p>
<p> Do you suspect someone is using your personal information illegally? Report it to us at
<a href='mailto:#'>
privacy@stad.gent </a>
.
You also have the right to complain to the
<a href='https://#'>
Flemish Supervisory Commission for the processing of personal data </a>
.
</p>
<p> <a href='#'>
Learn more about your rights and privacy </a>
</p>
</div>
</form>
</div>
</div>
/* No context defined. */
$grid-gutter-width: $gutter-width;
.form--multistep {
display: flex;
flex-direction: column;
gap: $grid-gutter-width;
@include desktop {
display: flex;
flex-direction: row;
>.form-content {
@include col(9);
}
>.form-steps {
@include col(3);
}
}
}