Back to Layouts List

Parking Apply Permit

Replace Form 1

Your details

We’ll only use this to send you a receipt of your application
Where to find this

You can find this...

Do you have a crime reference number?
Is this your billing address?
<h1 class="heading-large">Your details</h1>

<form action="replace_form_2" method="post">
<div class="content-block">

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

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

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

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

    <div class="form-group">
        <label for="email">
            <span class="form-label-bold">Email address <span class="unbold">(optional)</span></span>
        </label>
        <span class="form-hint">We’ll only use this to send you a receipt of your application</span>
        <input class="form-control" id="email" type="text" name="email">
    </div>

    <div class="form-group">
        <label for="email2">
            <span class="form-label-bold">Retype email address</span>
        </label>
        <input class="form-control" type="text" id="email2" name="email2">
    </div>

    <fieldset class="postcode-search">
        <div class="form-group">
            <label class="form-label-bold" for="postcode">Postcode</label>
            <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

            <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
                <b data-postcode-search="postcode_term"></b>
                <button class="text-button" data-postcode-search="change">Change</button>
            </p>

            <div class="js-hidden" data-postcode-search="results">

                <div class="form-select">
                    <select class="form-select" name="postcode" id="postcode"></select>
                    <span class="arrow"></span>
                </div>

                <input type="hidden" name="result-saontext" data-result="saontext">
                <input type="hidden" name="result-paontext" data-result="paontext">
                <input type="hidden" name="result-paonrange" data-result="paonrange">
                <input type="hidden" name="result-streetname" data-result="streetname">
                <input type="hidden" name="result-locality" data-result="locality">
                <input type="hidden" name="result-town" data-result="town">
                <input type="hidden" name="result-county" data-result="county">
                <input type="hidden" name="result-postcode" data-result="postcode">
                <input type="hidden" name="result-uprn" data-result="uprn">
            </div>

            <div class="js-hidden" data-postcode-search="fallback">
                <p class="indent-error-message">Please type your address below.</p>

                <div class="form-group">
                    <label for="building-and-street" class="form-label-bold">Building and street</label>
                    <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
                    <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
                </div>

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

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

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

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

     <div class="form-group">
        <label for="existing_permit_num">
            <span class="form-label-bold">Existing permit number <span class="unbold">(if known)</span></span>
        </label>
        <details>
            <summary><span class="summary">Where to find this</span></summary>
                <div class="panel-indent">
                <p>You can find this...</p>
            </div>
        </details>
        <input class="form-control" type="text" id="existing_permit_num" name="existing_permit_num">
    </div>

	<fieldset class="form-group">
		<legend>
			<span class="form-label">
				Do you have a crime reference number?
			</span>
		</legend>
		<div class="form-group-compound inline">
			<label class="block-label" data-target="crime-ref-num-yes-fields" for="crime-ref-yes">
				<input id="crime-ref-yes" type="radio" name="chrime-ref-num" value="Yes">
				Yes
			</label>
			<label class="block-label" data-target="crime-ref-num-no-fields" for="crime-ref-no">
				<input id="crime-ref-no" type="radio" name="chrime-ref-num" value="No">
				No
			</label>
		</div>
		<div class="js-hidden" id="crime-ref-num-yes-fields">
			<div class="panel-indent">
				<div class="form-group">
					<label for="crime-ref-num">
						<span class="form-label-bold">Crime reference number</span>
					</label>
					<input class="form-control" type="text" id="crime-ref-num">
				</div>
			</div>
			<div class="form-step-buttons">
		        <!-- <button class="button" type="submit">Send my application</button> -->
		        <a href="replace_form_2" class="button">Send my application</a>
		    </div>
		</div>
		<div class="js-hidden" id="crime-ref-num-no-fields">
			<div class="panel-indent">
				<fieldset class="inline">
			        <legend>
			            <span class="form-label">
			                Is this your billing address?
			            </span>
			        </legend>
			        <div class="form-group form-group-compound">
			            <label class="block-label" for="billing-address-yes">
			            <input id="billing-address-yes" type="radio" name="billing-address" value="Yes">
			                Yes
			            </label>

			            <label class="block-label" data-target="billing-address-fields" for="billing-address-no">
			            <input id="billing-address-no" type="radio" name="billing-address" value="No">
			                No
			            </label>
			        </div>

			        <fieldset class="postcode-search panel-indent js-hidden" id="billing-address-fields">
			            <div class="form-group">
			                <label class="form-label-bold" for="postcode">Postcode</label>
			                <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

			                <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
			                    <b data-postcode-search="postcode_term"></b>
			                    <button class="text-button" data-postcode-search="change">Change</button>
			                </p>

			                <div class="js-hidden" data-postcode-search="results">

			                    <div class="form-select">
			                        <select class="form-select" name="postcode" id="postcode"></select>
			                        <span class="arrow"></span>
			                    </div>

			                    <input type="hidden" name="result-saontext" data-result="saontext">
			                    <input type="hidden" name="result-paontext" data-result="paontext">
			                    <input type="hidden" name="result-paonrange" data-result="paonrange">
			                    <input type="hidden" name="result-streetname" data-result="streetname">
			                    <input type="hidden" name="result-locality" data-result="locality">
			                    <input type="hidden" name="result-town" data-result="town">
			                    <input type="hidden" name="result-county" data-result="county">
			                    <input type="hidden" name="result-postcode" data-result="postcode">
			                    <input type="hidden" name="result-uprn" data-result="uprn">
			                </div>

			                <div class="js-hidden" data-postcode-search="fallback">
			                    <p class="indent-error-message">Please type your address below.</p>

			                    <div class="form-group">
			                        <label for="building-and-street" class="form-label-bold">Building and street</label>
			                        <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
			                        <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
			                    </div>

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

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

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

			            <div class="form-group" data-postcode-search="button">
			                <button class="button">Search for address</button>
			            </div>
			        </fieldset>
			    </fieldset>
		    </div>
		    <div class="form-step-buttons">
		        <!-- <button class="button" type="submit">Continue</button> -->
		        <a href="replace_form_3" class="button">Continue</a>
		    </div>
		</div>
	</fieldset>

</div>
</form>