<section class="form-wrapper">
<h2>Get directions</h2>
<p>Our three campuses are located in the centre of the UK and are easily accessible by car and public transport. Enter your post code and select a campus to get directions, which will open in a new tab.</p>
<form action="https://maps.google.com/maps" method="get" target="_blank">
<div class="form-group field-required">
<label for="saddr">Your postcode<span class="required">*</span></label>
<div>
<input id="saddr" name="saddr" class="form-control" type="text" placeholder="eg DE22 1GB" aria-label="Your postcode" required>
</div>
</div>
<div class="form-group">
<fieldset id="daddr">
<legend>Main sites</legend>
<div>
<div class="radio radio-pretty radio-inline">
<label for="derby-campus">
<input id="derby-campus" type="radio" name="daddr" value="DE22 1GB" aria-label="Derby Campus" checked>
<span></span>
Derby Campus </label>
</div>
<div class="radio radio-pretty radio-inline">
<label for="buxton-campus">
<input id="buxton-campus" type="radio" name="daddr" value="SK17 6RY" aria-label="Buxton Campus">
<span></span>
Buxton Campus </label>
</div>
<div class="radio radio-pretty radio-inline">
<label for="chesterfield">
<input id="chesterfield" type="radio" name="daddr" value="S41 7LU" aria-label="Chesterfield">
<span></span>
Chesterfield </label>
</div>
</div>
</fieldset>
</div>
<hr>
<div class="submitButtons">
<button class="button-yellow button-giant" role="button" type="submit" tabindex="0" data-scroll>
Get directions
<span class="button-overlay"><span>
Get directions
</span></span></button> </div>
</form>
</section>
<section class="form-wrapper">
<h2>Get directions</h2>
<p>Our three campuses are located in the centre of the UK and are easily accessible by car and public transport. Enter your post code and select a campus to get directions, which will open in a new tab.</p>
<form action="https://maps.google.com/maps" method="get" target="_blank">
{% include '@input' with {
id: 'saddr',
name: 'saddr',
label: 'Your postcode',
ariaLabel: 'Your postcode',
placeholder: 'eg DE22 1GB',
type: 'text',
required: true
} %}
{% include '@input-choice' with {
id: 'daddr',
name: 'daddr',
label: 'Main sites',
type: 'radio',
inline: true,
choices : [
{
id: 'derby-campus',
label: 'Derby Campus',
value: 'DE22 1GB',
ariaLabel: 'Derby Campus',
checked: true
},
{
id: 'buxton-campus',
label: 'Buxton Campus',
value: 'SK17 6RY',
ariaLabel: 'Buxton Campus',
},
{
id: 'chesterfield',
label: 'Chesterfield',
value: 'S41 7LU',
ariaLabel: 'Chesterfield',
},
]
} %}
<hr>
<div class="submitButtons">
{% include '@button' with {
label: 'Get directions',
href: '#',
scheme: 'yellow',
size: 'giant',
submit: true,
} %}
</div>
</form>
</section>
/* No context defined for this component. */
Find us form, allows the user to enter their postcode and select a campus. Submitting the form opens Google Maps in a new window.