University of Derby

Find Us 

<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

Find us form, allows the user to enter their postcode and select a campus. Submitting the form opens Google Maps in a new window.