Skip to main content

Address lookup

When to use​

Use an address lookup when you’re asking users for an address within the Bristol City Council (BCC) area. It asks users to enter the postcode and choose from a list of street addresses.

When not to use​

As this address lookup only works for Bristol City Council area addresses, use a manual option such as text inputs or a textarea when you're collecting other UK or international addresses.

Step one​

This is the default state.

Find your postcode on royalmail.com
<section class="address-loookup-block">
  <div class="field field--postcode">
    <div class="bcc-form-question">
      <label for="postcode" class="field__label field__label--block">Postcode</label>
      <input
        id="postcode"
        name="postcode"
        class="field__input"
        type="text"
        value=""/>
    </div>
    <div class="bcc-form-answer">
      <button type="submit" class="button secondary">Find address</button>
      <small class="field__message">Find your postcode on
        <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
      </small>
    </div>
  </div>
</section>

You should allow users to enter their postcode:

  • in upper or lower case
  • without spaces or with additional spaces at the beginning, middle or end

This is better for the user than rejecting the input and telling them they have entered an invalid postcode.

Step two​

A postcode has been entered. Now the user can select an address.

Find your postcode on royalmail.com
Tell us your address isn't listed
<section class="address-loookup-block">
  <div class="field field--postcode">
    <div class="bcc-form-question">
      <label for="postcode" class="field__label field__label--block">Postcode</label>
      <input
        id="postcode"
        name="postcode"
        class="field__input"
        type="text"
        value=""/>
    </div>
    <button type="submit" class="newcta">Find address</button>
    <h6 class="field__message">Find your postcode on
      <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
    </h6>
  </div>
  <div class="field">
    <div class="bcc-form-question">
      <label for="address" class="field field__label field__label--block">Your address</label>
    </div>
    <div class="drop drop--block">
      <select id="address" name="address">
        <option selected>Please select</option>
        <option value="000000106069">2 Baldwin Street Bristol BS1 1SA</option>
        <option value="000000353708">3 Baldwin Street Bristol BS1 1SA</option>
        <option value="000000299768">4 Baldwin Street Bristol BS1 1SA</option>
        <option value="000000317825">6 Baldwin Street Bristol BS1 1SA</option>
        <option value="000000106070">8-10 Baldwin Street Bristol BS1 1SA</option>
      </select>
      <div class="drop__background"></div>
    </div>
    <h6 class="field__message">
      <a href="https://www.bristol.gov.uk/address-not-listed">Tell us your address isn't listed</a>
    </h6>
  </div>
</section>

Step three​

An address has been selected and a panel is displayed.

Find your postcode on royalmail.com
Tell us your address isn't listed

Your selected address

2 Baldwin Street Bristol BS1 1SA

<div class="field field--postcode">
  <label for="postcode" class="field__label field__label--block"
    >Postcode</label>
  <input
    id="postcode"
    name="postcode"
    class="field__input"
    type="text"
    value=""/>
  <button type="submit" class="newcta">Find address</button>
  <div class="field__message">Find your postcode on
    <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
  </div>
</div>
<div class="field">
  <label for="address" class="field field__label field__label--block">Your address</label>
  <div class="drop drop--block">
    <select id="address" name="address">
      <option selected disabled>Please select</option>
      <option selected defaultValue="000000106069">2 Baldwin Street Bristol BS1 1SA</option>
      <option value="000000353708">3 Baldwin Street Bristol BS1 1SA</option>
      <option value="000000299768">4 Baldwin Street Bristol BS1 1SA</option>
      <option value="000000317825">6 Baldwin Street Bristol BS1 1SA</option>
      <option value="000000106070">8-10 Baldwin Street Bristol BS1 1SA</option>
    </select>
    <div class="drop__background"></div>
  </div>
  <div class="field__message">
    <a href="https://www.bristol.gov.uk/address-not-listed">Tell us your address isn't listed</a>
  </div>
</div>
<div class="info info--affirm info--reverse">
  <div class="info__title">Your selected address</div>
  <div class="info__copy">2 Baldwin Street Bristol BS1 1SA</div>
</div>

This step includes a link for users to tell BCC that an address is not listed.

Error messages​

Display an error when there's a problem.

Make sure:

  • The form control has the aria-describedby attribute and references an associated error message
  • The associated error message has a unique ID

Standard error messages​

There are 3 standard error messages which should be used on all address lookups:

Service not available​

If the postcode service is not available:

Find your postcode on royalmail.com
Service not available. Please try again later.
<div class="field field--postcode field-error">
  <label for="postcode" class="field__label field__label--block">Postcode</label>
  <input
    aria-describedby="postcode-error"
    id="postcode"
    name="postcode"
    class="field__input"
    type="text"
    value=""/>
  <button type="submit" class="newcta">Find address</button>
  <div class="field__message">
    Find your postcode on
    <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
  </div>
  <div id="postcode-error" class="field__message field__message--error">
    Service not available. Please try again later.
  </div>
</div>

User enters an invalid postcode​

If a user enters an invalid postcode. For example, 20B 2PH:

Find your postcode on royalmail.com
This must be a valid postcode. Check you've entered it correctly.
<div class="field field--postcode field-error">
  <label for="postcode" class="field__label field__label--block"
    >Postcode</label
  >
  <input
    aria-describedby="postcode-error"
    id="postcode"
    name="postcode"
    class="field__input"
    type="text"
    value=""/>
  <button type="submit" class="newcta">Find address</button>
  <div class="field__message">Find your postcode on
    <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
  </div>
  <div id="postcode-error" class="field__message field__message--error">
    This must be a valid postcode. Check you've entered it correctly.
  </div>
</div>

User enters a postcode outside the BCC area​

If a user enters a postcode that's outside the BCC area:

Find your postcode on royalmail.com
We couldn't find that postcode in the Bristol City Council area

Check which local authority you're in (GOV.UK)
Tell us your postcode isn't listed
<div class="field field--postcode field-error">
  <label for="postcode" class="field__label field__label--block">Postcode</label>
  <input
    aria-describedby="postcode-error"
    id="postcode"
    name="postcode"
    class="field__input"
    type="text"
    value=""/>
  <button type="submit" class="newcta">Find address</button>
  <div class="field__message"> Find your postcode on
    <a href="https://www.royalmail.com/find-a-postcode">royalmail.com</a>
  </div>
  <div id="address-error" class="field__message field__message--error">
    We couldn't find that postcode in the Bristol City Council area
  </div>
  <br /><br />
  <a href="https://www.gov.uk/find-local-council">
    Check which local authority you're in (GOV.UK)</a>
  <br />
  <a href="https://www.bristol.gov.uk/address-not-listed">
    Tell us your postcode isn't listed</a>
</div>