Form - Astridd

Overview

Forms are to be used when you want the user to submit data. They have many visual and configurable variations. A form's default behaviour is to naturally span the full width of its container, therefore maximising its functionality on all screen sizes and devices.

Examples

Horizontal variation

<form action="/bin/myob/formstandard" class="form form--horizontal form--animate" id="form-horizontal"
  data-myob-form-submission-type="ASYNCHRONOUS"
  data-myob-form novalidate>
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__inline">
      <div class="form__group input">
        <label for="formInput1" class="input__label">Text input</label>
        <input type="text" id="formInput1" name="inputName1" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group input">
        <label for="formInput2" class="input__label">Text input</label>
        <input type="text" id="formInput2" name="inputName2" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group">
        <button class="btn btn--primary" type="submit" value="Submit">Submit</button>
      </div>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
    <a href="" class="link-advanced">Download whitepaper</a>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

Vertical variation

Form heading

Text input

This field is required

Text input

This field is required

Text input

This field is required

Select input

This field is required

Choose your options

Option 1

Option 2

Option 3

Please check at least 2 checkboxes

Select an option

Option 1

Option 2

Option 3

Please check at least 1 radio button

Textarea input

This field is required

Congratulations! Your form has been sucessfully sent

Download whitepaper

There is a problem with the form submission

<form action="/bin/myob/formstandard" class="form form--animate border bg-storm-6 radius p-2" id="form-vertical"
  data-myob-form-submission-type="ASYNCHRONOUS"
  data-myob-form novalidate>
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__group input my-2">
      <label for="formInput" class="input__label">Text input</label>
      <input name="textInput" type="text" id="formInput" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="row mt-n2">
      <div class="col col-6 col-12--sm mb-n2">
        <div class="form__group input my-2">
          <label for="firstnameInput" class="input__label">Text input</label>
          <input name="textInput" type="text" id="firstnameInput" class="input__field" required>
          <div class="form__error-message">
            This field is required
          </div>
        </div>
      </div>
      <div class="col col-6 col-12--sm mb-n2">
        <div class="form__group input my-2">
          <label for="lastnameInput" class="input__label">Text input</label>
          <input name="textInput" type="text" id="lastnameInput" class="input__field" required>
          <div class="form__error-message">
            This field is required
          </div>
        </div>
      </div>
    </div>
    <div class="form__group select my-2">
      <label for="formSelect" class="select__label">Select input</label>
      <select name="formSelect" id="formSelect" class="select__field" required>
        <option value=""></option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
        <option value="option-4">Option 4</option>
        <option value="option-5">Option 5</option>
      </select>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group checkbox my-2" data-required-min="2" required>
      <fieldset>
        <legend>Choose your options</legend>
        <div class="checkbox__group">
          <label for="formCheckboxTest1" class="checkbox__label">
            Option 1
            <input type="checkbox" name="formCheckboxTest" id="formCheckboxTest1" class="checkbox__field" value="Option 1" data-validator="min_required">
            <span class="checkbox__indicator"></span>
          </label>
        </div>
        <div class="checkbox__group">
          <label for="formCheckboxTest2" class="checkbox__label">
            Option 2
            <input type="checkbox" name="formCheckboxTest" id="formCheckboxTest2" class="checkbox__field" value="Option 2" data-validator="min_required">
            <span class="checkbox__indicator"></span>
          </label>
        </div>
        <div class="checkbox__group">
          <label for="formCheckboxTest3" class="checkbox__label">
            Option 3
            <input type="checkbox" name="formCheckboxTest" id="formCheckboxTest3" class="checkbox__field" value="Option 3" data-validator="min_required">
            <span class="checkbox__indicator"></span>
          </label>
        </div>
      </fieldset>
      <div class="form__error-message">
        Please check at least 2 checkboxes
      </div>
    </div>
    <div class="form__group radio my-2" data-required-min="1" required>
      <fieldset>
        <legend>Select an option</legend>
        <div class="radio__group">
          <label for="formRadioTest1" class="radio__label">
            Option 1
            <input type="radio" name="formRadioTest" id="formRadioTest1" class="radio__field" name="Option 1" data-validator="min_required">
            <span class="radio__indicator"></span>
          </label>
        </div>
        <div class="radio__group">
          <label for="formRadioTest2" class="radio__label">
            Option 2
            <input type="radio" name="formRadioTest" id="formRadioTest2" class="radio__field" required name="Option 2" data-validator="min_required">
            <span class="radio__indicator"></span>
          </label>
        </div>
        <div class="radio__group">
          <label for="formRadioTest3" class="radio__label">
            Option 3
            <input type="radio" name="formRadioTest" id="formRadioTest3" class="radio__field" name="Option 3" data-validator="min_required">
            <span class="radio__indicator"></span>
          </label>
        </div>
      </fieldset>
      <div class="form__error-message">
        Please check at least 1 radio button
      </div>
    </div>
    <div class="form__group textarea my-2">
      <label for="formTextarea" class="textarea__label">Textarea input</label>
      <textarea name="textArea" id="formTextarea" class="textarea__field" cols="30" rows="10" required></textarea>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group my-2">
      <button class="btn btn--primary" type="submit" value="Submit">Submit</button>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
    <a href="" class="link-advanced">Download whitepaper</a>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

Data Layer Submission variation

This is for all the data layer form submissions.

<form action="/bin/myob/formstandard" class="form form--horizontal form--animate" id="form-data-layer"
  data-myob-form-submission-type="ASYNCHRONOUS_SFMC"
  data-myob-form novalidate>
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__inline">
      <div class="form__group input">
        <label for="formInput1" class="input__label">Text input</label>
        <input type="text" id="formInput1" name="inputName1" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group input">
        <label for="formInput2" class="input__label">Text input</label>
        <input type="text" id="formInput2" name="inputName2" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group">
        <button class="btn btn--primary" type="submit" value="Submit">Submit</button>
      </div>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

Data Layer Submission With Redirect variation

This is for all the data layer form submissions, that have a redirect in place.

<form action="/bin/myob/formstandard" class="form form--horizontal form--animate" id="form-data-layer-redirect"
  data-myob-form-redirect-url="http://www.google.com.au"
  data-myob-form-submission-type="ASYNCHRONOUS_SFMC"
  data-myob-form novalidate>
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__inline">
      <div class="form__group input">
        <label for="formInput1" class="input__label">Text input</label>
        <input type="text" id="formInput1" name="inputName1" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group input">
        <label for="formInput2" class="input__label">Text input</label>
        <input type="text" id="formInput2" name="inputName2" class="input__field" required>
        <div class="form__error-message">
          This field is required
        </div>
      </div>
      <div class="form__group">
        <button class="btn btn--primary" type="submit" value="Submit">Submit</button>
      </div>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

Synchronous variation

<form action="https://info.myob.com/l/502331/2018-05-09/3b12ww"
      class="form form--animate border bg-storm-6 radius p-2"
      id="au_enterprise_advanced_demo-pardot-psuedo"
      data-myob-form
      novalidate
      data-myob-form-submission-type="SYNCHRONOUS"
      data-myob-form-return-self="true"
      method="POST">
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__group input">
      <label for="Firstname" class="input__label">First name</label>
      <input name="Firstname" type="name" id="Firstname" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group input">
      <label for="Lastname" class="input__label">Surname</label>
      <input name="Lastname" type="name" id="Lastname" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group input">
      <label for="Email" class="input__label">Email</label>
      <input name="Email" type="email" id="Email" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group input">
      <label for="Business_name" class="input__label">Business name</label>
      <input name="Business_name" type="text" id="Business_name" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group input">
      <label for="Phone" class="input__label">Phone number</label>
      <input name="Phone" type="phoneNumber" id="Phone" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <input type="hidden" name="formId" value="au_enterprise_advanced_demo">
    <input type="hidden" id="pardot_extra_field" name="pardot_extra_field" value=" ">
    <div class="form__group">
      <button class="btn btn--primary" type="submit" value="btnSubmit">Submit</button>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

File Upload Submission variation

This is for all the file upload form submissions.

<form action="" class="form form--animate" id="form-data-layer-with-upload"
  data-myob-form-submission-type="ASYNCHRONOUS"
  data-myob-form novalidate>
  <div class="form__body">
    <h2>Form heading</h2>
    <div class="form__group my-2 input">
      <label for="formInput1" class="input__label">Text input</label>
      <input type="text" id="formInput1" name="inputName1" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group my-2 input">
      <label for="Lastname" class="input__label">Text Input</label>
      <input name="Lastname" type="name" id="inputName2" class="input__field" required>
      <div class="form__error-message">
        This field is required
      </div>
    </div>
    <div class="form__group my-2 input">
      <div class="file-inline-upload"></div>
      <input type="hidden" />
      <div class="file-inline-upload-success no-display"> Uploaded successfully </div>
    </div>
    <div class="form__group my-2">
      <button class="btn btn--primary" type="submit" value="Submit">Submit</button>
    </div>
  </div>
  <div class="form__success-response no-display">
    <h2 aria-hidden="true">
      <svg role="img" class="icon icon-check-circle icon--md icon--fg-success">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#check-circle"></use>
      </svg>Form response
    </h2>
    <p>Congratulations! Your form has been sucessfully sent</p>
  </div>
  <div class="form__error-response no-display">
    <svg role="img" class="icon icon-cross-circle icon--md icon--fg-alert left m1--r" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross-circle"></use>
    </svg>
    <p>There is a problem with the form submission</p>
  </div>
</form>

Usage guidelines

Dos	Donts
Do provide a meaningful response message after the form has been submitted.	Don't create forms that are longer, or ask for more user input than is necessary.
If using Horizontal Forms, don't exceed a maximum of 3 fields.

Implementation guidelines

Name	Class	Attribute	Description
Horizontal display	`.form__inline`		Renders the Form elements inline. Requires wrapping `.form__group` elements within a containing element.
Background colour	`.bg-storm-6` `.bg-storm-100` `.bg-white`		Apply a background colour to the Form container.
Border	`.border`		Apply a border to the Form container.
Border radius	`.radius`		Apply a border radius to the Form container. Should only be used in conjunction with a `.border`.
Animate labels	`.form--animate`		Animates Form labels upon user interaction.
Disable browser validation		`novalidate`	Disables HTML5 default browser validaiton.
Submission type		`data-myob-form-submission-type`	Change Form submission. Accepts ASYNCHRONOUS and SYNCHRONOUS.
Return to page		`data-myob-form-return-self`	Return user to Form origin page on successful submission. Accepts true, false.