Back to Layouts List

Pest Control

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>