The world is increasingly digital, yet one thing remains constant: the need for a physical address. Whether you’re a financial institution, verifying a customer’s identity or a merchant gathering shipping details, your customers’ physical location is central to the transaction. Unfortunately, online address collection is prone to error. Studies have shown that 20% of addresses entered online contained some type of mistake.
The heart of the challenge lies with the HTML form itself. You likely verify that Street and City aren’t empty and that the Zip has 5 digits. But beyond these rudimentary constraints, how do you truly know that an address is “correct”? At Lob, we wondered if we could tackle this problem, using our print and mail expertise. Having sent over 1 billion pieces of mail and delivered to 1 out of 4 US households, uniquely positions us to understand how to improve the user experience and deliver higher quality data.
Our vision at Lob is to connect the online and offline worlds, and we offer a range of print and mail APIs that do just that. Two of these are particularly relevant to online address collection: US Address Autocompletion and US Address Verification. While some customers have implemented custom solutions that incorporate these APIs into their address collection workflows, we wondered if we couldn’t create a packaged solution to simplify their use in a standard HTML form.
From our vantage point, we’ve discovered that an HTML form is the perfect place to enhance the user experience. Considerable time has already been invested, styling and arranging the fields. And the form itself is probably part of a well-defined workflow. But what’s missing from these solutions is a semantic understanding of what an “address” actually is.
Consider the following Web form used for an e-commerce site. It collects a user’s name, address, email, and phone. It’s well designed and already includes consistent branding, styles and behaviors, but it accepts any user input, regardless of accuracy.
The problem begins with the underlying HTML. Although it’s well-designed, it uses standard HTML inputs to collect the address. There’s nothing special about the input elements, and that’s exactly the problem. They will cheerfully accept any string the user types.
<script src="https://gist.github.com/lobot/304bdc3fd18221a78ad30597a2465c37.js"></script>
Our strategy involves tagging standard HTML elements with custom attributes to identify their true purpose. We then connect these fields to our Autocompletion and Verification APIs, augmenting and validating the user’s input as they type. For example, adding data-lob-primary turns a standard HTML input, into an Address Autocompletion input. It’s a minor change with a big impact.
<script src="https://gist.github.com/lobot/bf1def39efef930f194f8ef876861088.js"></script>
As users type in the primary address field, their input is sent to Lob’s Autocompletion API in the background. A few keystrokes and one click later, the address is ready for submission with fewer errors in a fraction of the time.
Even with autocompletion enabled, users are bound to enter data incorrectly or lacking necessary information like a suite or unit number. And depending upon your specific use case, you may want to allow these to pass through or not.
Lob Address Elements verifies an address by intercepting the original form submission and pre-validating the address fields with Lob. In this case, the address is missing the suite number, and the user has been prompted to fix before final form submission is allowed.
Each time the user submits the form, the address fields are pre-validated with Lob.com. In this case, the validation has succeeded and the form is automatically submitted to its original endpoint. From the user’s standpoint, nothing has changed, but from a data quality standpoint, it’s a game changer.
We created Lob Address Elements to make it easier to leverage our APIs in your address entry workflows. And a key principle is to leverage what you’re already doing well. There’s nothing to rewrite--just a few additional attributes to add to your existing markup, and you’ll be up and running with a few minutes of work.
1. Register for a Free Account
Create an account at Lob.com, and then access your Public API Key from the Settings Panel. The key to use begins with the prefix, “live_pub”.
2. Add Lob Address Elements
Open your existing markup and add the Lob Address Elements script immediately above the closing body tag. Include your Live Public Key, using the attribute, data-lob-key.
<script src="https://gist.github.com/lobot/79f910905d79db777b381a19349423a6.js"></script>
3. Identify Key Elements
Add attributes to your existing HTML markup to identify key elements to enhance. For example, the data-lob-primary attribute is used to identify the primary address field in your form. Add other attributes as necessary to complete the experience.
Please let us know what you think. We’ve included some additional links to help get you started.
.png)
.png)
.png)