Form
Forms are highly interactive components that are critical for establishing a relationship with an individual user. An effective form needs to be easy for users to fill out, and it must ask the right questions to generate useful data for the university.
2.0.1
28 Nov 2019
Form groups
A form consists of one or more form groups. Form groups are the groups of individual elements that make up each question – such as multiple text fields for a person's first and last name, along with any hint text, error messages and so on.
Components
Form fields and states
Input fields must have associated label text, supplemented with hint text as needed. This should describe what the user needs to enter in the field.
Text fields can be displayed in inactive, active and disabled states – as well as an error state, and a focused state showing a user's location when navigating by keyboard.
Inactive
Active
Focused
Disabled
Error
Drop down field
Drop down fields nest multiple options a user can select. The downward arrow indicates a drop down.
Inactive
Active
Focused
Active
Focused
Error
Form checkbox
A checkbox allows the user to agree with a statement by clicking the element, or disagree by leaving it unclicked. Checkboxes display focused, active, disabled or error states.
Focus
Active
Disabled
Error
Form grouped button
Form grouped buttons allow the user to select one option to a given question. Text contained in these buttons must be brief and clearly explain the option to be selected. Buttons appear in focused, inactive or disabled states.
Focus
Inactive
Disabled
Radio button
Radio buttons give the user two or more options, only one of which can be selected at a time. Each radio button is accompanied by very brief text explaining the option the button represents. They appear in focused, active, disabled or error states.
Focus
Active
Disabled
Error
Form list
The nested options inside a drop down field appear as a form list. Form lists may allow users to select only one item, or they may let users select multiple items through a checkbox list.
List example
Checkbox example
Container
The whole form is housed in a container. A white container is used as the default, with sand as a second option. Form containers are responsive, changing in width according to the size of the screen they are being displayed on.
White container
Sand container
Placement
A form can occupy 6 columns on the grid of a one-column page. It should be centred, unless it requires supporting text, in which case the form should be placed on the left.
Hint text
Up to one line of hint text may be used in addition to label text, to help the user complete a form field. It can be visible at all times, or only in the focused state.
Label text
Label text must only take up one line.
Form Styles
Form Example
<form class="form" action="index.html" method="post" >
<div class="form__header">
<h3 class="h3 form__title">Ask us a question</h3>
</div>
<h4 class="h4 form__subtitle">About you</h4>
<fieldset class="form__row form__input js-validation js-required-validation">
<input type="text" name="first-name" value="" placeholder="Your given names" id="first-name" required />
<label for="email">First Name</label>
</fieldset>
<fieldset class="form__row form__input js-validation js-required-validation">
<input type="text" name="last-name" value="" placeholder="Your family names" id="last-name" required />
<label for="email">Surname</label>
</fieldset>
<fieldset class="form__row form__input js-validation js-email-validation js-required-validation">
<input type="text" name="email" value="" placeholder="Your student email" id="email" required />
<label for="email">Email</label>
<span class="form__field-message">Please use your student email</span>
</fieldset>
<fieldset class="form__row">
<div class="form__telephone">
<div class="form__input dropdown" role="group">
<select class="dropdown__select" data-type="basic" name="enquiry-title" id="select">
<option value="+61" selected>+61 AUS</option>
<option value="+93">+93 Afghanistan</option>
<option value="+62">+335 Albania</option>
<option value="+62">+213 Algeria</option>
</select>
<label class="dropdown__label" for="select">Prefix</label>
</div>
<div class="form__input js-validation js-required-validation">
<input type="tel" name="tel" value="" id="email" required />
<label for="email">Phone Number</label>
</div>
</div>
</fieldset>
<fieldset class="form__row">
<legend>Are you a local or international student?*</legend>
<div class="form__radio">
<ul class="form__list">
<li class="form__radio">
<input type="radio" name="location" checked="checked" id="location-local">
<label for="location-local">Local</label>
</li>
<li class="form__radio">
<input type="radio" name="location" id="location-international">
<label for="location-international">International</label>
</li>
</ul>
</div>
</fieldset>
<h4 class="h4 form__subtitle">About your enquiry</h4>
<p>What is your enqiry about? This is a long form question that can’t be placed in form field.</p>
<fieldset class="form__row form__input dropdown js-validation js-required-validation" role="group">
<select class="dropdown__select" data-type="basic" name="enquiry-title" id="select">
<option data-type="placeholder" disabled selected>Please provide more details</option>
<option value="Course information">Course information</option>
<option value="Credit information">Credit information</option>
<option value="Entry requirements">Entry requirements</option>
<option value="Fees">Fees</option>
<option value="Important dates">Important dates</option>
<option value="other">other</option>
</select>
<label class="dropdown__label" for="select">I need more information on...</label>
</fieldset>
<fieldset class="form__row form__input js-validation js-required-validation">
<textarea name="enquiry" rows="8" cols="80" id="enquiry" placeholder="Please provide more details"></textarea>
<label for="enquiry">My Enquiry</label>
<span class="form__field-message">Please provide further details.</span>
</fieldset>
<fieldset class="form__row">
<div class="form__checkbox js-validation js-required-validation">
<input type="checkbox" name="#NAME" value="#VALUE" id="checkbox">
<label for="checkbox">Sign up to receive information about Macquarie and upcoming events</label>
</div>
</fieldset>
<fieldset class="form__row">
<button type="submit" name="button" class="button button--primary button--block">Submit</button>
</fieldset>
</form>