Multistep form

When to use this component

Use the multistep form component to split up a form into multiple, smaller steps when:

  • The form otherwise would become too complex or too long.
  • Splitting up the form into multiple, smaller steps makes it easier for user to fill in.

For example:

  • Send a more complex request.
  • Enter multiple sets of data.

When not to use this component

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.

How it works

The multistep form component is a collection of form components that each collect certain user input.

Layout

On desktop resolutions and tablets in landscape mode, the multistep form has the following layout:

  • At the left-hand side, the steps of the multistep form are shown.
  • At the right-hand side, the container where the form components are loaded is presented.

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.

Validation

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.

{% extends '@form' %}

{% block content %}
  <div class="form--multistep">
    {% render '@form-steps--vertical' %}

    <div class="form-content">
      <h2>Active step</h2>
      {{ parent() }}
    </div>
  </div>
{% endblock %}
<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 class="form-disclaimer">All fields are required, unless they are marked as optional.</p>

              <fieldset>
                  <legend>Contact details</legend>
                  <div class="form-item ">
                      <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 ">
                      <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 ">
                      <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 ">
                      <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>
              </fieldset>

              <fieldset class="form-item ">
                  <legend>
                      Date
                  </legend>
                  <div class="form-columns">
                      <div class="form-item-column">
                          <div class="radio">

                              <input type="radio" id="input---default-radio-1" name="default-radiogroup" class="radio" />
                              <label for="input---default-radio-1">Wednesday 6 june 2018</label>
                          </div>
                          <div class="radio">

                              <input type="radio" id="input---default-radio-2" name="default-radiogroup" class="radio" />
                              <label for="input---default-radio-2">Thursday 7 june 2018</label>
                          </div>
                          <div class="radio">

                              <input type="radio" id="input---default-radio-3" name="default-radiogroup" class="radio" />
                              <label for="input---default-radio-3">Friday 8 june 2018</label>
                          </div>
                      </div>
                      <div class="form-item-column">

                      </div>
                  </div>
              </fieldset>

              <fieldset>
                  <legend>Form row</legend>
                  <div class='form-row'>
                      <div class="form-item  error stacked">
                          <label for="default-postal-code_id">Postal code
                          </label>
                          <div class="field-message " id="default-postal-code_id-description">
                              Wrap form items in a .form-row element.
                              <div class="accolade "></div>
                          </div>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="default-postal-code_id" aria-describedby="default-postal-code_id-message" name="default-postal-code_name" class="text error" aria-invalid="true" />
                              </div>
                              <div class="form-item-column">
                                  <div class="field-message error" role="alert" id="default-postal-code_id-message">
                                      Almost there!
                                      <div class="accolade "></div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="form-item  success stacked">
                          <label for="default-municipality_id">Municipality
                          </label>
                          <div class="field-message " id="default-municipality_id-description">
                              Place modifier .stacked on the form-items.
                              <div class="accolade "></div>
                          </div>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="default-municipality_id" aria-describedby="default-municipality_id-message" name="default-municipality_name" class="text success" />
                              </div>
                              <div class="form-item-column">
                                  <div class="field-message success" role="alert" id="default-municipality_id-message">
                                      Very good!
                                      <div class="accolade "></div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </fieldset>

              <fieldset>
                  <legend>Another fieldset</legend>
                  <div class="form-item  error">
                      <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 ">
                      <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>

                  <fieldset>
                      <legend>Nested fieldset</legend>
                      <div class="form-item ">
                          <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 ">
                          <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>
                  </fieldset>
              </fieldset>

              <fieldset class="form-item ">
                  <legend>
                      Newsletter
                  </legend>

                  <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</label>
                          </div>
                      </div>
                      <div class="form-item-column">

                      </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">Info about size and extension (optional)</span>
                          </div>
                          <div class="form-item-column"></div>
                      </div>
                  </div>
              </section>

              <div class="form-actions">

              </div>

          </form>

      </div>
  </div>
/* No context defined for this component. */
  • Content:
    .form--multistep {
      @include desktop {
        display: flex;
    
        >.form-content {
          @include set-layout('width-9');
        }
    
        >.form-steps {
          @include set-layout('width-3');
          margin-right: gutter();
        }
      }
    }
    
  • URL: /components/raw/multistep-form/_multistep-form.scss
  • Filesystem Path: components/41-organisms/multistep-form/_multistep-form.scss
  • Size: 225 Bytes