Form banner
The form banner pattern allows form elements to be used in full-width banner sections.
Rules for form banner
- There must be no more than one form banner on a page.
- May be used anywhere within the main body of a page.
- Styling must not deviate from the options provided. This includes colours and form elements.
- The background colour must either be light grey, light blue or dark green.
- If any other form banner options are required, please contact: digitalcommunications@st-andrews.ac.uk.
- For complicated or lengthy forms, a standard implementation of a form may be more suitable.
Options available
Form banner
The simplest implementation places the form underneath a heading and optional sub heading.
Code
Example
<!-- Begin pattern: form banner //-->
<div class="form-banner form-banner__grey ">
<div class="container dpl-form">
<form action="">
<fieldset aria-describedby="help-text-form-banner">
<legend><h3 class="form-banner__heading">Forgotten your library username?</h3></legend>
<p class="form-banner__sub-heading" id="help-text-form-banner">Enter your University email address to receive a secure recovery link.</p>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-label" for="form-banner-email">Email</label>
<input id="form-banner-email" class="form-control" type="email" title="Enter your email address" maxlength="256" name="form-banner-email" placeholder="" value="">
</div>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- End pattern: form banner //-->Form banner - side by side
This places the form alongside a column of text content. This option is most suited to simple forms that have an introduction that would wrap over multiple lines. This example shows a basic newsletter subscription implementation.
- The form should have no more than three or four rows of input fields.
Code
Example
<!-- Begin pattern: form banner //-->
<div class="form-banner form-banner__dkgreen ">
<div class="container dpl-form">
<form action="">
<fieldset>
<div class="row">
<div class="col-md-6">
<h3 class="form-banner__heading">Interested in Philosophy at St Andrews?</h3>
<p class="form-banner__sub-heading">Subscribe to receive important information including visiting days and other events for prospective students. The University will only use this information to contact your about this specific topic and you may unsubscribe at any time.</p>
</div>
<div class="col-md-6">
<div class="form-group">
<fieldset class="radio-button inline">
<legend><span class="font-weight--bold">1. Choose degree level</span></legend>
<ul>
<li>
<input type="radio" value="default" id="radio-ug" name="option-radio-inline">
<label for="radio-ug">Undergraduate</label>
<div class="check"></div>
</li>
<li>
<input type="radio" value="default" id="radio-pg" name="option-radio-inline">
<label for="radio-pg">Postgraduate</label>
<div class="check"></div>
</li>
</ul>
</fieldset>
</div>
<div class="form-group select-box">
<label class="form-label" for="form-banner2-subject">2. Choose a subject</label>
<select class="conditional-select form-control" id="form-banner2-subject" name="select-box">
<option value="">Please select from the following</option>
<option value="art-history">Art history</option>
<option value="biology">Biology</option>
<option value="classics">Classics</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="form-banner2-email">3. Enter your email</label>
<input id="form-banner2-email" class="form-control" type="email" title="Enter your email address" maxlength="256" name="form-banner2-email" placeholder="" value="">
</div>
<button type="submit" class="btn btn-lg btn-warning">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- End pattern: form banner //-->Form banner - inline
This option places the form directly underneath the text content. This example shows a set of filters that can alter a set of results.
- Inline form elements should only be used for filters.
Code
<!-- Begin pattern: form banner //-->
<div class="form-banner form-banner__blue ">
<div class="container dpl-form">
<form action="">
<fieldset aria-describedby="help-text-filter-options">
<legend><h3 class="form-banner__heading">Filter by subjects or country</h3></legend>
<p class="form-banner__sub-heading" id="help-text-filter-options">If you are a Joint honours student, please select both 'subject' and 'joint subject'.</p>
<div class="row">
<div class="col-md-4">
<div class="form-group select-box">
<label class="form-label" for="form-banner3-subject1">Subject</label>
<select class="conditional-select form-control" id="form-banner3-subject1" name="select-box">
<option value="">Please select from the following</option>
<option value="art-history">Art history</option>
<option value="biology">Biology</option>
<option value="classics">Classics</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group select-box">
<label class="form-label" for="form-banner3-subject2">Joint subject</label>
<select class="conditional-select form-control" id="form-banner3-subject2" name="select-box">
<option value="">Please select from the following</option>
<option value="joint-art-history">Art history</option>
<option value="joint-biology">Biology</option>
<option value="joint-classics">Classics</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group select-box">
<label class="form-label" for="form-banner3-country">Country</label>
<select class="conditional-select form-control" id="form-banner3-country" name="select-box">
<option value="">Please select from the following</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="germany">Germany</option>
</select>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- End pattern: form banner //-->