Auto-detecting city from zip code entry in a form field

Hi guys!

I have a potential client who has a strange request. She is requiring that her site have a form where customers can add their zip code and have it auto-detect the city. What is the best way to go about this? Custom code with a database? A third-party integration? Help! Thanks in advance!

It was an iInteresting challenge so I went ahead and hacked a quick solution using www.zippopotam.us API. It works so far. Demo here.

If you put a valid zip code (e.g. 90210), it will autofill the city and the state.

I haven’t set up an error state in case user enters a wrong zip code. But since they have an ability to override the city and state, then it shouldn’t be a big deal.

You can grab the code from my read-only version. The code is under page settings. In the body tag.

Here’s what you need to do to implement it:

  1. Paste the code the same way under the Body tag.

  2. Give these exact IDs to each field: zip, city, state. You can label them as you want, but the ID values have to be exactly these or the code won’t work. ID is in the field settings. The full settings on the right panel. It doesn’t show on the small popup settings.

  3. Change the form method to POST. That’s under Form settings. Form element, not Form Block. Full settings.

Let me know if you get stuck.

2 Likes

Oh wow – Thank you SO much! This was incredibly helpful. I really appreciate it! It’s exactly what I needed.

No problem. It’s a useful thing. I’ll find a use for it too at some point.