Patterns

Asking for addresses

Use this pattern when you want the user to provide you an address. You can use a combination or one of the following:

  • address lookup
  • select menu
  • textboxes

Address lookup

Usually, you will be asking the user to provide your address.

When using our address lookup, there will 4 scenarios

Empty state

Addresses found for the postcode

Address has already been added to their account

Postcode not found

Address lookup

When we get the user to select their already added address, we have to build the web form step as per our documentation, but also include customAddressModal() function in the custom javascript for the step.

Select menu method

You can use this if you want the user to select an address that we already know of theirs. If we know their addresses then we should display it in a dropdown for the user to select.

Select your address

Text fields

There will be times when we need the user to input an address that does not matter what the format is.

What is your address?

                            
                            <h3>Address lookup</h3>
<p>When we get the user to select their already added address, we have to build the web form step as per our documentation, but also include customAddressModal() function in the custom javascript for the step.</p>
<h3>Select menu method</h3>
<p>You can use this if you want the user to select an address that we already know of theirs. If we know their addresses then we should display it in a dropdown for the user to select.</p>
<h2>Select your address</h2>
<select>
<option>123 Madeup Lane, South Gloucestershire, BS30 1AE</option>
<option>123 Madeup Lane, South Gloucestershire, BS30 1AE</option>
<option>123 Madeup Lane, South Gloucestershire, BS30 1AE</option>
<option>123 Madeup Lane, South Gloucestershire, BS30 1AE</option>
</select>

<h3>Text fields</h3>
<p>There will be times when we need the user to input an address that does not matter what the format is.</p>
<h2>What is your address?</h2>
<form>
<div class="form__control">
<label class="form__label">Building and street</label>
<input type="text" style="max-width:500px; width:100%;"/>
<input type="text" class="mtop-10" style="max-width:500px; width:100%;"/>
</div>
<div class="form__control mtop-20">
<label class="form__label">Town or city</label>
<input type="text" style="max-width:320px; width:100%;"/>
</div>
<div class="form__control mtop-20">
<label class="form__label">County</label>
<input type="text" style="max-width:320px; width:100%;"/>
</div>
<div class="form__control mtop-20">
<label class="form__label">Postcode</label>
<input type="text" style="max-width:260px; width:100%;"/>
</div>
</form>

When to use this

Address lookup

  • This should be used when you want the user to tell you their address that we do not know about already. If they are searching for their address this method is appropriate in the first instance as then it will validate against a set list of addresses.

Select menu

  • This should be used when you want the user to select an address from a predefined list. This could be of their stored addresses in an account, or from a set list of locations.

Text fields

  • This can be used when you know the address is not going to be inside the UK and you can find a format that suits all expected type of addresses.
  • Only make the inputs mandatory if you really need to use them.
  • Make the inputs the appropriate length of content expected. The postcode field is shorter as it is not expecting a large amount of content.
  • Let the user enter in the data in any format they want to; all uppercase, all lowercase, a mixture.

About this

Usage of appropriate input purposes

If you are able to, set valid input purposes of fields as this lets the user enter the data in quicker as they have entered it before on another website. You can check the list of valid input purposes here

Back to top