Find a Salesperson

Updated

Usage

The Find a Salesperson block is a heading, a line of instructions, and a zip code box with a Search button. Search for Find a Salesperson in the block inserter. It is always full width, and a page can hold only one.

When a visitor searches (with Search or the Enter key), every published salesperson whose Zipcodes list that exact zip code appears under the box, shown as their page. Nothing reloads. Once a search finds someone, the heading and instructions step aside: the block shrinks to one slim row ("Your salesperson for", the zip code box and Search) with the result straight under it, and the page scrolls up to it if the visitor had scrolled past. A search that finds no one, or an invalid zip code, brings the heading back with the message under the box. Screen readers hear the result, and keyboard focus moves to the rep's name. A form on a rep's page works inside the results, and each entry records the rep and the zip code searched; one form can serve every rep (see One form for every salesperson).

When to use it

Put it on a "Find a rep", "Where to buy", or "Contact sales" page. Nothing else is needed on the page, though a short paragraph above it helps.

Tips

  • The box only accepts a five-digit zip code or ZIP+4. Anything else shows "Please enter a valid zip code."
  • Title Tag sets the heading level in the page outline; Title Style sets how it looks. Keep Title Tag at h1 only when the block is the page's main heading.
  • Results depend on each rep's Zipcodes field. A rep who never appears usually has an empty one.
  • A Map block on a rep's page shows compact in the results (about 13rem tall, 9rem on phones). It reads best inside a column, under the rep's address and phone, rather than full width at the end of the page.

Settings

Find a Salesperson

Title

The heading above the search box (default Find a salesperson.).

Title Tag

The heading level in the page outline. Pick h1 only when this is the page's main heading. Title Style sets how it looks.

  • h1
  • h2
  • h3
  • h4default
  • h5
  • h6
Title Style

How the heading looks, from your site's heading styles. It doesn't change the heading level.

  • h1
  • h2default
  • h3
  • h4
  • h5
  • h6
Prompt

The line under the heading that tells visitors what to do.

Placeholder

The grey hint inside the empty zip code box.

Built by Dirigible Studio. Get in touch