Streaming live at 10am (PST)

Postcode search which returns a pre-programmed response


#1

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


#2

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?


#3

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

https://zipid.com.au/postcodes

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


#4

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.


#5

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


#6

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>

#7

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


#8

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.