Custom zipcode delivery validator

Heya everybody!

I’ll do my very best to explain my issue.

I have taken an already built zipcode delivery validator for a milk/fruit delivery company in Melbourne, Australia. It was built for Wordpress so I had to change a few things around.

The first validator is to live in the header bar, its function is for;

  • user enters zipcode (called postcode here in Australia)
  • system returns whether zipcode is on the the delivery list or not via the uploaded csv

I managed to get that working through the custom code and embedded html.

The second validator needs to live within the enquiry form. This I am having more trouble with for whatever reason.
The client and I have decided to launch the site without the second validator - but are still trying to find a way to get it working.

If anybody has an idea on how it may work, or has any questions for more info, please shoot them through.

Thanks in advance!!

Zach.


Read only link:

https://preview.webflow.com/preview/ddmilkstaging?utm_medium=preview_link&utm_source=designer&utm_content=ddmilkstaging&preview=7865faa9482bbffea6fd55adfe5f5b80&workflow=preview

What is the second validator meant to do?
If you’re trying to prevent form submission when the postcode is not on your coverage-area list, you can take two approaches.

APPROACH 1
Check and block client side with custom code. Basically on submission, you do your check and block the submit if it fails. No data is submitted. You handle the error display yourself.

APPROACH 2
Submit the form to a webhook e.g. Make .com. Do your validation server-side. Save the data regardless, for reporting, but only process the order if it matches a valid postcode. On a failed match, return an HTTP error response code. Client side, display the error message, e.g. “this postcode is not in our delivery area.”.

More involved in the build, but it captures your abandoned cart data which is valuable, and is good for dynamic lists, e.g. a google sheet of postcodes.

If you go with #2, have a look at SA5’s custom form submit handler. It works with Make, and will detect error response codes and show the form’s error message automatically.