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 action="/bin/myob/formstandard" class="form form--animate border bg-grey-100 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="formInput1_vert" class="input__label">Text input</label>
<input name="textInput" type="text" id="formInput1_vert" 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="formInput2_vert" class="input__label">Text input</label>
<input name="textInput" type="text" id="formInput2_vert" 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="formInput3_vert" class="input__label">Text input</label>
<input name="textInput" type="text" id="formInput3_vert" 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="formInput4_vert" class="select__label">Select input</label>
<select name="formInput4_vert" id="formInput4_vert" 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>Checkbox input</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>Radio input</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="formInput5_vert" class="textarea__label">Textarea input</label>
<textarea name="textArea" id="formInput5_vert" 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 variation
Submit the form via AJAX post
<form action="/bin/myob/formstandard" class="form form--horizontal form--animate" id="seer_test_form"
data-myob-form-submission-type="ASYNCHRONOUS_SFMC"
data-myob-form novalidate
data-myob-form-debug="true"
>
<div class="form__body">
<h2>Form heading</h2>
<div class="form__inline">
<div class="form__group input">
<label for="formInput1_dl" class="input__label">Email input</label>
<input type="text" id="formInput1_dl" name="email" class="input__field" required>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="form__group input">
<label for="formInput2_dl" class="input__label">Text input</label>
<input type="text" id="formInput2_dl" name="name" 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 with redirect variation
Submit the form via AJAX post, that has a URL redirect to handle the returned success response
<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_redirect" class="input__label">Text input</label>
<input type="text" id="formInput1_redirect" 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_redirect" class="input__label">Text input</label>
<input type="text" id="formInput2_redirect" 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
Synchronously submit either a standard form or a progressive profiling form to Salesforce Pardot.
<form action="https://info.myob.com/l/502331/2018-05-09/3b12ww"
class="form form--animate border bg-grey-100 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 my-2">
<label for="Firstname_syn" class="input__label">Text input</label>
<input name="Firstname_syn" type="name" id="Firstname_syn" class="input__field" required>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="form__group input my-2">
<label for="Lastname_syn" class="input__label">Text input</label>
<input name="Lastname_syn" type="name" id="Lastname_syn" class="input__field" required>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="form__group input my-2">
<label for="Email_syn" class="input__label">Email input</label>
<input name="Email_syn" type="email" id="Email_syn" class="input__field" required>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="form__group input my-2">
<label for="Business_name_syn" class="input__label">Text input</label>
<input name="Business_name_syn" type="text" id="Business_name_syn" class="input__field" required>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="form__group input my-2">
<label for="Phone_syn" class="input__label">Phone input</label>
<input name="Phone_syn" type="phoneNumber" id="Phone_syn" 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="">
<input type="hidden" id="GATRACKID" name="GATRACKID" value="">
<input type="hidden" id="GACLIENTID" name="GACLIENTID" value="">
<input type="hidden" id="GAUSERID" name="GAUSERID" 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 variation
<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_upload" class="input__label">Text input</label>
<input type="text" id="formInput1_upload" 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="formInput2_upload" class="input__label">Text Input</label>
<input name="formInput2_upload" 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 | Don'ts |
|---|---|
 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-grey-100
.bg-grey-800
.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. | |
| Run in debug |
data-myob-form-debug
|
Displays API errors to the user. Only for use in authoring forms, must not be used for production. | |
| Progressive profiling |
data-myob-form-progressive
|
Used to enable progressive profiling of Enterprise leads using Salesforce Pardot |