Back to Layouts List

Archived Online Payments

Form 4

Your details

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

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

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

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

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

     <div class="form-group">
        <label class="form-label-bold" for="email2">Retype email address</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 type="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="panel-indent js-hidden postcode-search" 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 type="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-step-buttons">
        <a href="form_3" class="button">Previous</a>
        <button class="button">Continue</button>
    </div>

</div>
</form>