Skip to main content

Custom Elements

While Postcode Lookup can reduce much of the friction by rendering postcode lookup elements inside the provided context, this is less ideal for forms with complex designs and styling rules. In these instances, you may create one or more custom postcode lookup elements and provide them to Postcode Lookup.

Postcode Lookup consists of 5 main elements with the following order and hierarchy:

  • Context
    • Text Input <input>
    • Button <button>
    • Dropdown Container <div>
    • Message Container <p>

Identify custom elements to Postcode Lookup by supplying CSS Selectors or node references to your DOM elements. When a custom element is specified, the corresponding element will no longer be rendered in context. Listed below are elements of Postcode Lookup which can be supplied to the plugin:

Postcode Lookup Input Field​

input

Identify an alternate element to use as the Postcode Lookup field.

Search Button​

button

Identify an alternate element to trigger a postcode lookup.

Message​

message

Identify an alternate text element to convey messages to the user.

Address Dropdown Container​

selectContainer

Identify an alternate element and location to render the address selection dropdown.

Example​

Our WooCommerce plugin takes such an approach to to styling the Postcode Lookup UI to conform with the WooCommerce checkout. Our plugin creates an input, button and select container in with the same WooCommerce conventions and leaves the context to manage the message box. See the plugin code here

Demo​

Loading...