HaveInsights FlowCraft
FlowCraft · Live demo

FlowCraft Service Area Checker

"Do we serve your area?" answered in a second. Visitors type their ZIP code and see yes or not yet, with a lead form either way, so nobody leaves at a dead end. It runs the same app.js that comes with the paid component.

Sample list. The demo serves a few Tacoma-area ZIP codes as an example. It isn't a real business, and nothing you enter here is saved or sent.

Try it

  1. Enter a ZIP code. Try 98402, or use the sample buttons under the checker.
  2. See the answer. "Yes" names the area and its note. "Not yet" still offers a way to stay in touch.
  3. Reload the page. Your last answer is still there, so returning visitors don't have to check again.
A map with a highlighted service area, location pins and a service van

Service area

Do we serve your area?

Enter your ZIP code to check in a second.

Areas we serve

  • Tacoma & Lakewood
  • Gig Harbor
  • Puyallup
  • Spanaway

Checked by ZIP code. Near the edge of an area? Contact us and we'll confirm.

Try a sample ZIP For this catalogue page only. They are not in the product. The sample list covers a few Tacoma-area ZIP codes.
How it works

Your areas, written the way you think of them

The list of served areas sits in index.html as plain JSON, and all the logic lives in app.js, commented so a junior developer can follow it.

  1. Exact codes, ranges and prefixesList one ZIP, a range like 98371-98375, or every code starting with 984*. Mix them in one area.
  2. A clear answerThe first matching area wins, and its name and note ("Same-day service") appear in the answer.
  3. A lead either wayThe quote form changes its wording for each answer and sends the ZIP code with the email, so you can see where people want you to go next.

Honest about what it checks: it compares ZIP codes with your list. It doesn't look up street addresses or driving distance, which would need a paid map service and a server, so a small line invites visitors near a boundary to confirm with you.

<script type="application/json" data-service-areas>
[
  { "name": "Tacoma & Lakewood",
    "codes": "984*",
    "note": "Same-day service" },
  { "name": "Gig Harbor",
    "codes": "98332-98335" }
]
</script>
Postcodes work too: spaces are ignored and letters are compared in capitals. Set a pattern for UK or Canadian codes and use prefixes like SW1*.

What the full version includes

Delivered as a ZIP download through Payhip.

  • index.htmlThe checker, both answers, the quote form and your list of served areas, styled with Tailwind CSS
  • app.jsExact codes, ranges and prefixes, the answers, the returning-visitor memory and the quote form, heavily commented
  • style.cssThe answer animation, area chips and the red box for a mistyped code
  • assets/images/A sample map illustration, plus README.txt and an optional .htaccess

Requirements

  • Your own list of served areas. ZIP codes, ranges or prefixes in the JSON block in index.html. The sample Tacoma list is only an example.
  • Any web host, or none. The page also works when index.html is opened directly from your computer. No server code, map service or API key.
  • A form endpoint to receive leads (optional). Any service that accepts a JSON POST, for example Formspree, Make or Zapier. Until you add one, the quote form sends nothing and says so.
  • An internet connection for visitors. Tailwind CSS loads from its public CDN. No npm install or build step.

Get the Service Area Checker

Start with the free static shell to check the layout, or get the full version with the working checker you just tried.

Free

Free Static HTML Shell

The layout: map image, ZIP box, both answers, quote form and area chips, so you can review the design and markup.

  • Complete visual layout with the sample image
  • Sample structure and markup
  • Does not include the checking or form logic
Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Service Area Checker — $67

The working checker you just tried, ready for your own areas.

  • Your own list of ZIP codes, ranges (98371-98375) and prefixes (984*)
  • An instant answer with the area's name and a note like "Same-day service"
  • A lead form for every answer, including visitors outside your area
  • Quote form sends each visitor's email, ZIP code and answer to your form service
Buy the Full Service Area Checker — $67

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components.