Back to Snippets List

school - School Lookup

<fieldset class="school-search">

	<div>
		<div class="form-group">
			<label for="school_name">
				<span class="form-label-bold">Name of school</span>
			</label>
			<input type="text" class="form-control" name="school_name" id="school_name" data-school-search="search_name">
		</div>

		<div class="form-group" data-school-search="postcode_input">
			<label for="school_postcode">
				<span class="form-label-bold">Postcode</span>
			</label>
			<input type="text" class="form-control half-width" name="school_postcode" id="school_postcode" data-school-search="search_postcode">
		</div>

		<div class="form-group" data-school-search="button">
			<button class="button">Search for address</button>
		</div>
	</div>

    <div class="js-hidden" data-school-search="results">
        <p>
            <span class="strong">Name of school</span><br>
            <span data-school-search="school_name"></span>
        </p>

        <p>
            <span class="strong">Postcode</span><br>
            <span data-school-search="school_postcode"></span>
        </p>

        <input type="hidden" name="school_name" data-school-search="school_name_field">
        <input type="hidden" name="school_postcode" data-school-search="school_postcode_field">

        <div class="js-hidden" data-school-search="choose_result">
            <label for="school_select">
                <span class="form-label">School</span>
            </label>
            <div class="form-select">
                <select name="school_select" id="school_select"></select>
                <span class="arrow"></span>
            </div>
        </div>

        <p class="form-block">
            <button class="text-button" data-school-search="change">Change</button>
        </p>
    </div>

    <div class="js-hidden" data-school-search="fallback">
        <p class="indent-error-message">This postcode is outside of Medway. Type your address  below.</p>

        <div class="form-group">
            <label for="headteacher_name">
                <span class="form-label-bold">Headteacher name</span>
            </label>
            <input type="text" class="form-control" id="headteacher_name" name="headteacher_name">
        </div>

        <div class="form-group">
            <label for="main_phone">
                <span class="form-label-bold">Main phone</span>
            </label>
            <input type="text" class="form-control" id="main_phone" name="main_phone">
        </div>

        <div class="form-group">
            <label for="building_and_street">
                <span class="form-label-bold">Building and street</span>
            </label>
            <input type="text" class="form-control" id="building" name="building">
            <input type="text" class="form-control" id="street" name="street">
        </div>

        <div class="form-group">
            <label for="town_or_city">
                <span class="form-label-bold">Town or city</span>
            </label>
            <input type="text" class="form-control" id="town_or_city" name="town_or_city">
        </div>

        <div class="form-group">
            <label for="country">
                <span class="form-label-bold">Country <span class="unbold">(optional)</span></span>
            </label>
            <input type="text" class="form-control" id="country" name="country">
        </div>

        <div class="form-group">
            <label for="postcode">
                <span class="form-label-bold">Postcode</span>
            </label>
            <input type="text" class="form-control" id="postcode" name="postcode">
        </div>
    </div>

</fieldset>