Back to Layouts List

Pest Control

Content 1

Start now

What you’ll need

  • Your reference number
  • The amount you need to pay

What you need to know:

  • You can make more than one payment in a single transaction
  • We accept most major credit and debit cards (Insert images of the cards here)
<header class="page-header">
  <div>
    <h1>Book for pest control</h1>
  </div>
</header>
<div class="article-container group">
  <div class="content-block">
    <div class="inner">

      <p><a href="form_1" class="button button-get-started" role="button">Start now</a></p>

      <h2>What you’ll need</h2>
      <ul>
        <li>Your reference number</li>
        <li>The amount you need to pay</li>
      </ul> 

      <h2>What you need to know:</h2>
      <ul>
        <li>You can make more than one payment in a single transaction</li>
        <li>We accept most major credit and debit cards (Insert images of the cards here)</li>
      </ul>


      <div class="content-legal">
        <h2>Data Protection Act 1998</h2>
        <p>Please note that your personal details supplied on this form will be held and/or computerised by Medway Council for the purposes of processing your payment. Some personal details will be disclosed to banks and other financial institutions in order to process the payment. Your personal details will be safeguarded and will not be divulged to any other individuals or organisations for any other purposes.</p>
      </div>

    </div>
  </div>
</div>

Form 1

Step 1 of 6

Your details

We will use your email to send you a confirmation
We may use your number to contact you
<h2 class="progress">Step 1 of 6</h2>

<h1 class="heading-large">Your details</h1>

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

      <div class="form-group">
          <label class="form-label-bold" for="FirstName">First name</label>
          <input class="form-control" type="text" id="FirstName" name="FirstName" data-val="true" data-val-requiredif="Enter first name " data-val-requiredif-operator="NotEqualTo" data-val-requiredif-targetvalue="">
      </div>

      <div class="form-group">
          <label class="form-label-bold" for="LastName">Last name</label>
          <input class="form-control" type="text" id="LastName" name="LastName" data-val="true" data-val-requiredif="Enter last name " data-val-requiredif-dependentproperty="FirstName" data-val-requiredif-operator="NotEqualTo" data-val-requiredif-targetvalue="">
      </div>

      <fieldset class="postcode-search">
          <legend class="hidden">Postcode Search</legend>
          <div class="form-group">
              <label class="form-label-bold" for="postcode">Address you want us to visit</label>
              <span class="form-hint">Postcode</span>
              <input class="form-control half-width" id="postcode" type="text"  data-uppercase data-postcode-search="search_term" data-val="true" data-val-required="You must enter a billing address">

              <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" data-val="true" data-val-required="You must choose a billing address"></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">
                  <input data-result="ismedwayaddress" id="Address_IsMedwayAddress" name="Address.IsMedwayAddress" type="hidden" value="">
              </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 class="form-control"
                      data-address="building-and-street"
                      data-val="true"
                      data-val-requiredif="Building and street"
                      data-val-requiredif-dependentproperty="Address_IsMedwayAddress"
                      data-val-requiredif-operator="EqualTo"
                      data-val-requiredif-targetvalue="true"
                      id="Address_Address1" name="Address.Address1" type="text" value="">
                      <input class="form-control" data-address="address2" id="Address_Address2" name="Address.Address2" 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" data-val="true" data-val-required="Enter 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" id="Address_County" name="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" data-val="true" data-val-required="The Postcode field is required." >
                  </div>
              </div>
          </div>

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

      <div class="form-group">
          <label class="form-label-bold" for="email">Email</label>
          <span class="form-hint">We will use your email to send you a confirmation</span>
          <input class="form-control" type="text" id="email" name="email"  data-val="true" data-val-email="Enter a valid email address">
      </div>

      <div class="form-group">
          <label class="form-label-bold" for="phone">Phone number</label>
          <span class="form-hint">We may use your number to contact you</span>
          <input class="form-control" type="text" id="phone" name="phone">
      </div>

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

    </div>
</form>

Form 2

Step 2 of 6

Treatment details

We will need to know how many bedrooms your home has, so that we can treat them all.

Number of bedrooms

Total cost:

One bedroom for £160

<h2 class="progress">Step 2 of 6</h2>

<h1 class="heading-large">Treatment details</h1>

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

    <p>We will need to know how many bedrooms your home has, so that we can treat them all.</p>
    <!-- <p> <span class="strong">£420.00</span></p> -->

    <div class="data-bottom-buttons">
      <div class="form-group">

          <h1 class="heading-large">Number of bedrooms</h1>

          <div class="form-select small">
              <select name="bedrooms" id="bedrooms" data-val="true" data-val-required="You must choose a number">
                <option value="1">
                  1
                </option>
                <option value="2">
                  2
                </option>
                <option value="3">
                  3
                </option>
                <option value="4">
                  4
                </option>
                <option value="5">
                  5
                </option>
                <option value="6">
                  6
                </option>
              </select>
              <span class="arrow"></span>
          </div>
      </div>
    </div>

    <div class="data-bottom-buttons">
        <div class="data-text">

            <p>Total cost:</p>
            <p>
                <span class="strong">One bedroom for £160</span>
            </p>
            <div class="form-step-buttons">
              <!-- <a href="form_1" class="button">Previous</a> -->
                <button class="button">Continue</button>
            </div>
        </div>
    </div>

  </div>
</form>

Form 3

Step 3 of 6

Pick a date and time

Calendar DOM Picker
<h2 class="progress">Step 3 of 6</h2>

<h1 class="heading-large">Pick a date and time</h1>

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

    <img src="/public/images/cal-dom.png" alt="Calendar DOM Picker" />

    <div class="form-step-buttons">
        <!-- <a href="form_2" class="button">Previous</a> -->
        <button type="submit" class="button">Continue</button>
    </div>

</div>
</form>

Form 4

Step 4 of 6

Check your treatment booking details


Your details Fred Bloggs

Email: Red@bloggs.com

Phone number: 5555555555


Address for the pest visit 1 Pest Lane

Chatham ME6 A65

Type of pest and cost Bedbugs

Three bedroom home

Cost: £250

Visit date and time Friday 7 July 2016

Morning: 8.30 am - 1.00 pm

Declaration
Reminder: Any cancellations or changes need to be made by 4pm the day before your visit day. If you miss a visit you will not be given a refund.


<h2 class="progress">Step 4 of 6</h2>

<h1 class="heading-large">Check your treatment booking details</h1>

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

        <div class="form-group">

            <div class="data-bottom-right-button">

                <div class="data-text"></div>

                <div class="data-button">
                    <a class="text-button" href="form_1.html">Start again</a>
                </div>
            </div>
            <br>
            <div class="rwd-table">
              <div class="rwd-table-row">
                <div class="rwd-table-content">
                  <p>
                    <span>Your details</span>
                    <span>Fred Bloggs</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Email: Red@bloggs.com</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Phone number: 5555555555</span>
                  </p>
                  <br>
                  <p>
                    <span>Address for the pest visit</span>
                    <span>1 Pest Lane</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Chatham ME6 A65</span>
                  </p>
                </div>
                <div class="rwd-table-actions">
                  <a href="#">Change</a>
                </div>
              </div>

              <div class="rwd-table-row">
                <div class="rwd-table-content">
                  <p>
                    <span>Type of pest and cost</span>
                    <span>Bedbugs</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Three bedroom home</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Cost: £250</span>
                  </p>
                </div>
                <div class="rwd-table-actions">
                  <a href="#">Change</a>
                </div>
              </div>

              <div class="rwd-table-row">
                <div class="rwd-table-content">
                  <p>
                    <span>Visit date and time</span>
                    <span>Friday 7 July 2016</span>
                  </p>
                  <p>
                    <span></span>
                    <span>Morning: 8.30 am - 1.00 pm</span>
                  </p>
                </div>
                <div class="rwd-table-actions">
                  <a href="#">Change</a>
                </div>
              </div>
            </div>

            <div class="data-bottom-right-button">
              <div class="data-text">
                  <p>
                    <span class="strong">Declaration</span><br>
                    Reminder: Any cancellations or changes need to be made by 4pm the day before your visit day. If you miss a visit you will not be given a refund.
                  </p>
              </div>
            </div>
            <br>
            <div class="form-group">
              <label class="block-label" for="confirm-terms">
                <input id="confirm-terms" name="confirm-terms" type="checkbox" value="confirm-terms">
                I confirm that I have read and agree with the <a href="javascript:void(0)">terms of conditions</a> of the pest control service.
              </label>
            </div>

        </div>

        <div class="form-step-buttons">
            <!-- <a href="form_3" class="button">Previous</a> -->
            <button type="submit" class="button"> Accept and continue</button>
        </div>

    </div>
</form>

Form 5

Step 5 of 6

Billing details

Billing address

1 Pest Lane
Chatham ME6 A65


Is this correct?

<h2 class="progress">Step 5 of 6</h2>

<h1 class="heading-large">Billing details</h1>

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

    <h2 class="heading-large">Billing address</h2>
    <p>
      1 Pest Lane <br>
      Chatham ME6 A65
    </p>

    <br>

    <fieldset class="inline">
        <legend>
            <span class="form-label">
                <h2 class="heading-large">Is this correct?</h2>
            </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_2" class="button">Previous</a> -->
        <button type="submit" class="button">Pay</button>
    </div>

</div>
</form>

Form 6

Step 6 of 6

Enter card details

<h2 class="progress">Step 6 of 6</h2>

<h1 class="heading-large">Enter card details</h1>

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

    <iframe id="card_details_frame" src="/public/HTML/card_details.html" frameborder="0" style="width: 100%; height: 850px; background: #fff;"></iframe>

</div>
</form>

Form 7

Enter card details

3D Authentication

<h1 class="heading-large">Enter card details</h1>
<h1 class="heading-large">3D Authentication</h1>

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

    <iframe id="secure_auth_frame" src="/public/HTML/authorisation.html" frameborder="0" style="width: 100%; height: 650px; background: #fff;"></iframe>

</div>
</form>

Form 8

Thank you, your treatment has been booked


Reference Number: # 1000187654

Date of visit: Thursday 4 July 2016

Time: Morning (8:30 AM - 11:30 AM)

Amount paid: £250.00


If you have provided a valid email address you will be sent an email to confirm your booking with confirmation on how to prepare for your visit.

Prepare for your visit

  • You need to prepare for your visit by following the instructions on preparing for your bedbug visit.
  • A pest technician will then visit your home on the date of your treatment.

Cancel or change your booking

You can only cancel or change your booking until 4pm the day before your scheduled visit. If you need to cancel or amend your booking, please have your reference number ready and call our customer service centre at 5555555555.

What do you think of this service? (Opens in new window)

Your comments let us know what we’re doing well and where we can improve

<!--
    This code must be placed on the transaction confirmation page or the
    ‘thank you’ page following every successful transaction. It should be
    placed immediately after the Universal Analytics page view code
-->
<script>
    ga('require', 'ecommerce', 'ecommerce.js');
    ga('ecommerce: addTransaction', {
        'id': '1234', // Transaction ID Required
        'affiliation': 'Medway Council', // store name.
        'revenue': '60.00', // total revenue.
        'shipping': '', // Shipping.
        'tax': '6.00' // Tax.
    });
    ga('ecommerce: addItem', {
        'id': '1234', // Transaction ID. Required.
        'name': 'Council Tax Business Rates Payment',// Product name. Required.
        'sku': 'MW76YTH',// Product SKU.
        'category': 'School Transport',// Product Category or variation.
        'price': '60.00',// Product price.
        'quantity': '1'// Product Quantity.
    });
    ga('ecommerce: send');
</script>


<h1 class="heading-large">Thank you, your treatment has been booked</h1>

<div class="content-block">

    <br>
    <p>Reference Number: <span class="strong"># 1000187654</span></p>
    <p>Date of visit: <span class="strong">Thursday 4 July 2016</span></p>
    <p>Time: <span class="strong">Morning (8:30 AM - 11:30 AM)</span></p>
    <p>Amount paid: <span class="strong">£250.00</span></p>
    <br>
    <p>If you have provided a valid email address you will be sent an email to confirm your booking with confirmation on how to prepare for your visit.</p>

    <h2 class="heading-large">Prepare for your visit</h2>
    <ul class="list">
      <li>You need to prepare for your visit by following the instructions on <a href="javascript:void(0)">preparing for your bedbug visit</a>.</li>
      <li>A pest technician will then visit your home on the date of your treatment.</li>
    </ul>

    <h2 class="heading-large">Cancel or change your booking</h2>
    <p>You can only cancel or change your booking until 4pm the day before your scheduled visit. If you need to cancel or amend your booking, please have your reference number ready and call our customer service centre at 5555555555.</p>

    <div class="panel-indent hide-on-print">
        <p><a href="http://www.medway.gov.uk/apps/surveys/bsd/digital/business_rates_satisfaction_survey/index.htm" target="_blank">What do you think of this service?</a>
            <span class="font-xsmall">(Opens in new window)</span></p>
        <p>Your comments let us know what we’re doing well and where we can improve</p>
    </div>

    <div class="print-page hide-on-print">
        <a class="print-page" href="#">Print this page</a>
    </div>

    <!-- <div class="panel-indent">
        <p><span class="strong">Direct debit is pure peace of mind<br>Find out more about switching your business rates payment to direct debit at</span></p>
        <a href="http://www.medway.gov.uk/payyourcounciltax">www.medway.gov.uk/payyourcounciltax</a>
    </div> -->
</div>