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>
Marketo Form Example
Squiz Form Example
Two Column Form Example
Form Documentation
Use
In the example above the form sits within a container. Each row sits with in a fieldset tag with the class form__rom. This provides the layout of the form.
Content
Labels - keep labels to a couple of words long, ensuring to check the label fits the input box on the smallest screen resolution.
Placeholders - must also be kept short enough to be hidden by the overlaying label element.
Input message - This is the small sentence that is added under the input. This text is temporarily replaced when there is an error with the error message.
Validation
Add to an input by applying js-validation class to it's parent container. The validation type is then specified using one of the following classes: js-required-validation, js-email-validation, js-url-validation.