I am in need of assistance with some feature I want to implement on a client website.
Product:
Wix Velo on Wix Editor
What are you trying to achieve:
I want to implement a feature whereby when a client enters a zip code, they are provided with the company that covers that particular zip code. This can be a pop-up that appears when they click on submit. If the zip code isn’t included in the cms, they get another message telling them that the area isn’t covered.
What have you already tried:
I have added the zip codes on the CMS, but since I have never worked with user input before on the database, I don’t know how to proceed.
Additional information:
My client wants his customers to be able to enter their zip codes and get matched to either of his companies supporting different regions.
This should be possible with some code. Feel free to reach out to have it completed.
Hii @Writside , To connect user input with your CMS and show a matching company based on the ZIP code entered, you’ll need to use a bit of Wix Velo code.
Below are the steps you need to follow to apply the same -
Set up your CMS collection
First, make sure your collection (for example, ZipCodeDirectory) includes a Zip Code field (zipCode) —this will be a text or number, and a Company Name field (companyName) to be present in your collection.
Design your page
Add the following elements in the Editor-
- A text input (#zipInput) for the user to type their ZIP code.
- A submit button (#checkZipBtn) for submitting the code.
- A text element (#resultText) or a popup to show the message.
Add this Velo code to your page
Go to Dev Mode > Turn on Dev Mode, then paste the following:
import wixData from ‘wix-data’;
$w.onReady(function () {
$w("#checkZipBtn").onClick(() => {
let userZip = $w("#zipInput").value;
if (!userZip) {
$w("#resultText").text = "Please enter a ZIP code.";
return;
}
wixData.query("ZipCodeDirectory")
.eq("zipCode", userZip)
.find()
.then((results) => {
if (results.items.length > 0) {
let company = results.items[0].companyName;
$w("#resultText").text = `This area is covered by: ${company}`;
} else {
$w("#resultText").text = "Sorry, we don’t cover this area yet.";
}
})
.catch((err) => {
console.error(err);
$w("#resultText").text = "Something went wrong. Please try again.";
});
});
});
Customize the pop-up or message
Instead of showing a message in a text element, you can use a Lightbox or custom modal if your client wants it to appear in a pop-up
If you’d prefer a no-code solution, I recommend using the Zipcode Checker & Validator App, which lets you upload ZIPs and display a result . Based on your requirement — displaying a specific company based on the entered ZIP code and showing a message if the area isn’t covered — It works well for you.
