Back to Layouts List

Archived Online Payments

Form 1

What do you want to pay?

Where to find this

Your account number can be found in the top right corner of your bill.
If it includes any dashes or hyphens, leave these out

£
Account number
Where to find this

Your account number can be found in the top right corner of your bill
If it includes any dashes or hyphens, leave these out

£
Where to find this

Your invoice number is 8 digits long
It can be found on the right hand side of your invoice

£
Where to find this

Your invoice number is 18 digits long and always starts with the digits ‘16’
It can be found in the top right corner of your invoice
When you enter your invoice number, leave out any gaps

16
£
Where to find this

Your customer number is 12 digits long and always starts with the digits ‘1799’
It can be found in the top right corner of your service charge invoice

1799
£
Where to find this

Your membership number starts with the letters ‘MFTS HI’ and ends in four digits
It can be found in the top left corner of your fair trader invoice

MFTS HI
£
Where to find this

Your reference number is 18 digits long and always starts with the digits ‘16’
It can be found in the bottom left corner of your invoice
When you enter your reference number, leave out any gaps

16
£
Where to find this

Your serial number is 5 digits long
It can be found at the top of the fixed penalty notice

£
Where to find this

Your account number is 14 characters long

£
Where to find this

Your reference number is 10 characters long

£
£
£
<h1 class="heading-large">What do you want to pay?</h1>

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

    <div class="form-group">

        <label class="block-label" for="radio-2" data-target="council_tax_fields">
            <input id="radio-2" type="radio" name="online_payment" value="Council Tax">
            Council Tax
        </label>
        <div class="js-hidden" id="council_tax_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="council_tax_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number can be found in the top right corner of your bill. <br>
                            If it includes any dashes or hyphens, leave these out</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="council_tax_acct_no">
                </div>
                <div class="form-group">
                    <label for="council_tax_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="council_tax_amount" name="council_tax_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="business_rates" data-target="business_rates_fields">
            <input id="business_rates" type="radio" name="online_payment" value="Business Rates">
            Business Rates
        </label>
        <div class="js-hidden" id="business_rates_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <labelfor="business_rates_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number can be found in the top right corner of your bill <br>
                            If it includes any dashes or hyphens, leave these out</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="business_rates_acct_no">
                </div>
                <div class="form-group">
                    <label for="business_rates_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="business_rates_amount" name="business_rates_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="housing_benefit_overpayment" data-target="housing_benefit_overpayment_fields">
            <input id="housing_benefit_overpayment" type="radio" name="online_payment" value="Housing benefit overpayment">
            Housing benefit overpayment
        </label>
        <div class="js-hidden" id="housing_benefit_overpayment_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="housing_benefit_overpayment_inv_no">
                        <span class="form-label-bold">Invoice number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your invoice number is 8 digits long <br>
                            It can be found on the right hand side of your invoice</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="housing_benefit_overpayment_inv_no">
                </div>
                <div class="form-group">
                    <label for="housing_benefit_overpayment_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="housing_benefit_overpayment_amount" name="housing_benefit_overpayment_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="invoices_sundry_income" data-target="invoices_sundry_income_fields">
            <input id="invoices_sundry_income" type="radio" name="online_payment" value="Invoices">
            Invoices
        </label>
        <div class="js-hidden" id="invoices_sundry_income_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="invoices_inv_no">
                        <span class="form-label-bold">Invoice number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your invoice number is 18 digits long and always starts with the digits ‘16’ <br>
                            It can be found in the top right corner of your invoice <br>
                            When you enter your invoice number, leave out any gaps
                            </p>
                        </div>
                    </details>

                    <div class="form-split-inputs" data-grouped-inputs>
                        <span class="digit">16</span>
                        <input data-grouped-input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
                        <input data-grouped-input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
                    </div>
                </div>
                <div class="form-group">
                    <label for="invoices_inv_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="invoices_inv_amount" name="invoices_inv_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="service_charges" data-target="service_charges_fields">
            <input id="service_charges" type="radio" name="online_payment" value="Service charges">
            Service charges
        </label>
        <div class="js-hidden" id="service_charges_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="service_charge_cust_no">
                        <span class="form-label-bold">Customer number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your customer number is 12 digits long and always starts with the digits ‘1799’<br>
                            It can be found in the top right corner of your service charge invoice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <span class="digit">1799</span>
                        <input type="text" class="form-control" maxlength="8" size="16" id="service_charge_cust_no" name="service_charge_cust_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="service_charge_amount">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="service_charge_amount" name="service_charge_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="fair_trader_membership_fee" data-target="fair_trader_membership_fee_fields">
            <input id="fair_trader_membership_fee" type="radio" name="online_payment" value="Fair trader membership fee">
            Fair trader membership fee
        </label>
        <div class="js-hidden" id="fair_trader_membership_fee_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="fair_trader_mem_no">
                        <span class="form-label-bold">Membership number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your membership number starts with the letters ‘MFTS HI’ and ends in four digits<br>
                            It can be found in the top left corner of your fair trader invoice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <span class="digit">MFTS HI</span>
                        <input type="text" class="form-control" maxlength="4" size="8" id="fair_trader_mem_no" name="fair_trader_mem_no" name="fair_trader_mem_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="fair_trader_mem_fee">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="fair_trader_mem_fee" name="fair_trader_mem_fee">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="social_care_fee" data-target="social_care_fee_fields">
            <input id="social_care_fee" type="radio" name="online_payment" value="Social care fee">
            Social care fee
        </label>
        <div class="js-hidden" id="social_care_fee_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="social_care_ref">
                        <span class="form-label-bold">Reference number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your reference number is 18 digits long and always starts with the digits ‘16’<br>
                                It can be found in the bottom left corner of your invoice<br>
                                When you enter your reference number, leave out any gaps
                            </p>
                        </div>
                    </details>

                    <div class="form-split-inputs" data-grouped-inputs>
                        <span class="digit">16</span>
                        <input data-grouped-input type="text" class="form-control" maxlength="4" size="8" id="social_care_ref[ name="social_care_ref"1]" name="social_care_ref[1]">
                        <input data-grouped-input type="text" class="form-control" maxlength="10" size="20" id="social_care_ref[2]" name="social_care_ref[2]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="social_care_amount[1]">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="social_care_amount" name="social_care_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="fixed_penalty_notice" data-target="fixed_penalty_notice_fields">
            <input id="fixed_penalty_notice" type="radio" name="online_payment" value="Fixed Penalty Notice">
            Fixed Penalty Notice
        </label>
        <div class="js-hidden" id="fixed_penalty_notice_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="fpn_ser_no">
                        <span class="form-label-bold">Serial number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your serial number is 5 digits long<br>
                            It can be found at the top of the fixed penalty notice</p>
                        </div>
                    </details>
                    <div class="form-split-inputs">
                        <input class="form-control" maxlength="5" size="10" type="text" id="fpn_ser_no">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label-bold" for="fpn_amount">Amount <span class="unbold">(£ 0000.00)</span></label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="fpn_amount" name="fpn_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="housing_rent" data-target="housing_rent_fields">
            <input id="housing_rent" type="radio" name="online_payment" value="Housing rent">
            Housing rent
        </label>
        <div class="js-hidden" id="housing_rent_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="housing_rent_acct_no">
                        <span class="form-label-bold">Account number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your account number is 14 characters long</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="housing_rent_acct_no">
                </div>
                <div class="form-group">
                    <label for="housing_rent_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="housing_rent_amount" name="housing_rent_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="allotments" data-target="allotments_fields">
            <input id="allotments" type="radio" name="online_payment" value="Allotments">
            Allotments
        </label>
        <div class="js-hidden" id="allotments_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="allotments_ref_no">
                        <span class="form-label-bold">Reference number</span>
                    </label>
                    <details>
                        <summary><span class="summary">Where to find this</span></summary>
                        <div class="panel-indent">
                            <p class="form-block">Your reference number is 10 characters long</p>
                        </div>
                    </details>
                    <input class="form-control" type="text" id="allotments_ref_no">
                </div>
                <div class="form-group">
                    <label for="allotments_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <div class="form-split-inputs">
                            <span class="digit">£</span>
                            <input class="form-control" type="number" size="8" id="allotments_amount" name="allotments_amount">
                        </div>
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="school_transport" data-target="school_transport_fields">
            <input id="school_transport" type="radio" name="online_payment" value="School transport">
            School transport
        </label>
        <div class="js-hidden" id="school_transport_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="school_transport_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="school_transport_amount" name="school_transport_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>


        <label class="block-label" for="archives" data-target="archives_fields">
            <input id="archives" type="radio" name="online_payment" value="Archives">
            Archives
        </label>
        <div class="js-hidden" id="archives_fields">
            <div class="panel-indent">
                <div class="form-group">
                    <label for="archives_amount">
                        <span class="form-label-bold">Amount <span class="unbold">(£ 0000.00)</span></span>
                    </label>
                    <div class="form-split-inputs">
                        <span class="digit">£</span>
                        <input class="form-control" type="number" size="8" id="archives_amount" name="archives_amount">
                    </div>
                </div>
            </div>
            <button class="button">Continue</button>
        </div>

    </div>

</div>
</form>