ZIP CODE plugin

Malzdesigns13 · June 27, 2023

Hello Squarespace Community,

Website Test: https://pigeon-cyan-pmfb.squarespace.com/
Goal: Display a summary excerpt Phone Numbers on search results
1. Enter Zip Code "29169"
2. Search Results Page of Content is Midlands East Region
<how do I add in the phone number link insert included in the search results?>

Instead of users clicking through to the region they could immediately get the phone number to dial out immediately
I'm assuming the excerpt is purely a part of the summary block functionality. What code would it be to get this same thing to display on the search for searching just this blog?

Thank you and open to suggestions of reconfiguring. I've never tried to do something this advanced before.

paul2009 · June 27, 2023

Squarespace search isn't a suitable solution for this.

Instead, I'd recommend using some custom code. If you create a table of telephone numbers and the zip codes they service, and store this JSON, you could write some JavaScript to check the list for a matching zip code and provide the corresponding telephone number.

Here's a quick proof of concept that you could add to a Code Block on a page to prompt the user for a zip code and provide the required information. It isn't a finished example, but it should get you started.

<form id="zipform">
  <label for="zipCode">Enter your ZIP code:</label>
  <input type="text" id="zipCode" name="zipCode" placeholder="e.g., 12345" />
  <button type="submit">Submit</button>
</form>

<div id="result"></div>

<script>
  const telephoneNumbers = {
    "12345": "1-843-779-7513",
    "29053": "Call the Midlands East Region on 1-803-462-5243",
    "29160": "Call the Midlands East Region on 1-803-462-5243"
    // Add more zip codes and telephone numbers as needed
  };
</script>

<script>
  const myForm = document.getElementById('zipform');
  const resultDiv = document.getElementById('result');

  myForm.addEventListener('submit', function (event) {
    event.preventDefault();

    const zipCode = document.getElementById('zipCode').value;

    // Check if the zip code exists in the JSON table
    if (telephoneNumbers.hasOwnProperty(zipCode)) {
      const phoneNumber = telephoneNumbers[zipCode];

      // Display the telephone number to the user
      resultDiv.innerHTML = 'Telephone number: ' + phoneNumber;
    } else {
      resultDiv.innerHTML = 'Telephone number not found for this ZIP code.';
    }
  });
</script>

Add it to a Code Block wherever you want it to appear, like this:

And it should work something like this:

Did this help? Please give feedback by clicking an icon below ⬇️

Malzdesigns13 · June 28, 2023

Thank you very much kind sir. Very Helpful.

iamyouroleksii · October 28, 2023

Hey hey!

I have a client who wants to add a plugin to their site that will allow the ability to plug in a zip code and have the user alerted as to whether or not they currently service that area.

Has anyone had experience with this? Any good solutions out there?

I am attaching a screenshot with the needed result below

Thanks in advance,

paul2009 · October 28, 2023

20 minutes ago, iamyouroleksii said:

I have a client who wants to add a plugin to their site that will allow the ability to plug in a zip code and have the user alerted as to whether or not they currently service that area.

I published some simplified code in June that would allow a user to type in a zip code and receive a response. You didn't say what you wanted to happen after they click the button, but this may help to get you started 🙂

Did this help? Please give feedback by clicking an icon below ⬇️

iamyouroleksii · October 29, 2023

@paul2009 hi! I want it to say if service is available in that area or not.

paul2009 · October 29, 2023

9 minutes ago, iamyouroleksii said:

I want it to say if service is available in that area or not.

Then the code I provided should get you started.

iamyouroleksii · November 1, 2023

@paul2009 hi Paul, is it possible to customize that code and change the shape, size, font, and colors of the zip code finder code block? I would like it to look similar to the image I have attached.

ZIP CODE plugin

Recommended Posts

Malzdesigns13

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009

Posted Images

paul2009

Malzdesigns13

iamyouroleksii

paul2009

iamyouroleksii

paul2009

iamyouroleksii

Create an account or sign in to comment

paul2009

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources