Back to Layouts List

Parking Apply Permit

Renew Form 1

Your details

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

You can find this...

Parking permit expiry date
For example, 31 08 2015
<h1 class="heading-large">Your details</h1>

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

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

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Parking permit expiry date
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 31 08 2015</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="Child.DateOfBirth.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="Child.DateOfBirth.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="Child.DateOfBirth.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <div class="form-step-buttons">
        <button class="button" type="submit">Continue</button>
    </div>

</div>
</form>