Skip to main content

Documentation Portal

Address Form Experience

The Checkout page address form is designed with shoppers in mind, offering multiple input methods, robust validations, and localized support to ensure a seamless and accurate checkout experience. Whether entering an address manually, using autocomplete, or selecting from saved addresses, shoppers are guided every step of the way.

Filling in the Address Form

When shoppers reach the address form in the checkout page, they are presented with a dynamic and intuitive experience designed to simplify the entry of billing and shipping addresses.

Options for Entering an Address

  • Manual Input: Shoppers can manually type their address into the form fields. Field hints and validations guide users to input accurate and formatted data.

  • Autocomplete (Available in US and AU): Shoppers can begin typing their address, and autocomplete suggestions powered by Google Autocomplete appear below the field. Selecting an option automatically populates the remaining address fields, reducing errors and speeding up the process.

  • Saved Addresses for Registered Users: If the shopper is a registered user, previously saved addresses are displayed in a dropdown menu. Selecting a saved address autofills the form.

  • Browser Autofill: If enabled in the shopper's browser, saved address data can autofill the fields directly.

Language Support

Shoppers can enter their address in local languages (by configuration). While the input is accepted in local characters, currently, it is not translated into other languages.

Format validations ensure compatibility with regional requirements.

Customizing the Address Form

The address form and field names can be customized, however some fields are mandatory for all address forms. For more information see Address Field Formats and Error Handling.

address-fields-1a.png
Field Hints

Hints can be added to the address and billing fields to guide customers by displaying the required input format.

image-20240529-100011__1_.png
Supported Characters

The following requirement defines a list of characters that the checkout supports:

  • Basic regex: "(^[, A-Z, a-z,0-9,""'\s@&%$#\*._\-\s\\/]*$)"

  • Special Characters for non-English languages (accents).

If a field should allow a different set of characters, the characters can be specified in the requirement.

Error Handling

Real-Time Feedback

Shoppers receive immediate error notifications for incorrect or incomplete fields. Errors are highlighted in red, with an "X" symbol and explanatory text.

Correction Guidance

Clear instructions are provided to resolve issues, such as "Please enter a valid postal code for your region."