Back to Layouts List

Parking Apply Permit

First Form 2

Your details

We’ll only use this to send you a receipt of your application
Is this your billing address?
Previous
<h1 class="heading-large">Your details</h1>

<form action="first_form_3" 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>

    <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>


    <!-- Optional step, depending in early selections -->
    <div class="form-group" style="display: none;" data-test-prev-selection="Resident permit">
        <h2>Proof of address</h2>
        <p>We require proof of your address. You can do this by giving us your council tax number or uploading a copy of one of your utility bills.</p>

        <div class="form-group">
            <label for="council-tax-no">
                <span class="form-label-bold">Council Tax Number</span>
            </label>
            <details>
                <summary><span class="summary">Where to find this</span></summary>
                <div class="panel-indent">
                    <p>You can find it...</p>
                </div>
            </details>
            <input class="form-control" type="text" name="council-tax-no" id="council-tax-no">
        </div>

        <p>Or</p>

        <div class="form-group">
            <label>
                <span class="form-label-bold">Upload a copy of one of your utility bills, which shows your name and address (dated within the last 3 months)</span>
            </label>
        </div>
        <div class="file-upload">
            <div class="form-group" data-file-upload="button">
                <div class="form-upload-button">
                    <span class="button">Browse and upload a file</span>
                    <input type="file">
                    <span class="file-name"></span>
                </div>
            </div>
        </div>

    </div>

    <!-- Optional step, depending in early selections -->
    <div class="form-group" style="display: none;" data-test-prev-selection="Business permits">
        <h2>Proof of employment</h2>
        <div class="form-group">
            <label>
                <span class="form-label-bold">Upload a letter from your employer on company headed paper, dated within the last 3 months, which proves you are an employee and require a parking permit</span>
            </label>
        </div>
        <div class="file-upload">
            <div class="form-group" data-file-upload="button">
                <div class="form-upload-button">
                    <span class="button">Browse and upload a file</span>
                    <input type="file">
                    <span class="file-name"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional step, depending in early selections -->
    <div class="form-group" style="display: none;" data-test-prev-selection="Carer permit">
        <h2>Proof you are a carer</h2>
        <div class="form-group">
            <label>
                <span class="form-label-bold">Upload a letter from your manager on company headed paper, dated within the last 3 months, which proves you are a carer and require a parking permit to carry out your duties</span>
            </label>
        </div>
        <div class="file-upload">
            <div class="form-group" data-file-upload="button">
                <div class="form-upload-button">
                    <span class="button">Browse and upload a file</span>
                    <input type="file">
                    <span class="file-name"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="form-step-buttons">
        <a class="button" href="first_form_1">Previous</a>
        <span class="spacer"></span>
        <button class="button" type="submit">Continue</button>
    </div>

</div>
</form>