Postcode search which returns a pre-programmed response

Hey,

I am in no way a coder. I offer a service were I am limited to certain postcodes in sydney, australia.
Basically I wanted a simple search box where they type in their post code and after hitting enter it shows up with a message like, “Yes! we come to your area. Call now to make a booking!” or (if not in the list) “Sorry! it doesn’t look like your area is currently serviced”

Is this possible with CMS?

A push in the right direction would be greatly appreciated
Thanks in advanced

Do you have the UI created already? Could you provide a share link to your project, as well as a published link to the page on your site? Can you provide more info, like what post codes you are currently supporting?

Hey,
Thanks for your response. Basically I want something very similar to this website.

Just very basic where you input the postcode, say, 2232 and it comes up saying that it’s available in that area.

Just looking for a nudge in the right direction of an app or tutorial of where I should be looking.

I currently don’t have any UI. Was really hoping for an app where you just manually fill in the post codes or desired information.

Thanks again

That’s just a table with a bit of JS code to filter the rows with a simple text match.

It’s actually simple to do this directly within Webflow, but you’ll need some JavaScript know-how.

You’ll need to ask yourself how often does the data change? If not often, you can hardcode the data into the table with the Embed Code component, otherwise it’s also possible to generate the table via CMS and some custom code.

Absolute champion. Thanks a lot for your response. Has been really helpful! I’ll start studying

If you don’t need to update the postcodes very often, you could get even hackier and just so something simple like this:

  1. Drag a Webflow text input into your page (holding the alt key so you don’t get the form block error),
  2. Drag a Webflow button just below it for your submit button,
  3. Give the text input a HTML id of ‘input’ from the Webflow settings,
  4. Give the button a HTML id of ‘submit’ from the Webflow settings,
  5. Add some custom code to your site’s body like this:
<script>
    var submit = document.getElementById('submit');
    var input = document.getElementById('input');
    var postCodes = [
        '1234',
        '5678',
        '9101',
        '1213',
        '1415'
    ];

    submit.addEventListener('click', function() {
        if (postCodes.includes(input.value.trim())) {
            alert('Postcode is supported');
        } else {
            alert('Postcode is unsupported');
        }
    });
</script>
1 Like

I’ll give them all a go! Thanks heaps for your responses. That list script seems like it may be the way to go. Only needs to be very basic! Thanks heaps

Cool, if you get stuck just post back here with some more details and maybe a read only link and I should be able to help you more.

Nice one! I’ve just implemented this on my website, and it works perfectly!

However, I tried to make the postcodes dynamic as well and this didn’t work out. What I did; I’ve added a text field in the CMS and pasted the postcodes within this field like this: ‘1234’, ‘5678’, ‘9101’, ‘1213’, ‘1415’. Then I inserted a dynamic field in place of the numbers and selected the text field. After this change, the solution stopped working.

Any idea of how to solve it/make it dynamic?

Cheers,
Martin

Hi. I’m dragging and pressing option when dropping my input field. But it’s saying it can only be placed into a form block. Any ideas why?

Is there anyway to have a modal popup instead of a browser alert?

This is great! It works fine for a small batch of zip codes, but after 10,000 characters Webflow won’t accept the code. Any workarounds for this? Tried embedding an html from github with this solution but I couldn’t make it work.