Zip code form

Responsive example

The zip code form is wrapped in grid columns that constrain the width at certain breakpoints. The stackUntil prop is set to lg so the input and button begin displaying side-by-side at that breakpoint.

Pre-populate zipcode example

Same as above, except the zip code form can accept an initial zip code value, facilitating the pre-population of zip codes from a form. This feature is beneficial for scenarios where a pre-determined zip code needs to be set, which users can subsequently modify. If the user does not alter the zip code, it will default to the initial value provided.

Dark responsive example

Same as above, except the zip code form is inside a container with a dark background and the dark prop is set to true.

Constrained responsive example

This form has stackUntil set to sm and appears within a smaller-width container. It has constrained set to true in order to make better use of the limited space. This reduces the horizontal padding on the submit button and reduces the size of the privacy text.

Side-by-side example with no privacy section

This form has stackUntil set to xs so it is always side-by-side. It also has the privacy section disabled by setting showPrivacySection to false.

Constrained stacked example

This example remains stacked at every breakpoint, in a limited-width container. This shows how the form would display within a card on the sidebar of a page.

Product specific CTA

This example shows how to specify a product parameter that will be passed along when the form is submitted.

Context message example

This example shows how to use the contextMessage prop to display a message above the ZIP code input.

EsZipCodeForm slots

EsZipCodeForm props