How to create a feild where a customer can search postal codes?

  • PPPoCI
    Asked on August 14, 2017 at 1:17 AM

    With 1000's of postal codes it will be difficult for a client to scroll through them all. I have conditions set up so the for will display contract sign-up fields if their postal code area is listed. Is it possible to have a search field to search a data base and attach conditions to the field if it comes up with a match from the data base and it it does not find a match to redirect to a message with a survey? If this is not available can we hire a programmer to ad this functionality to Jot Form?

     

    Thanks Mitch

  • Nik_C
    Replied on August 14, 2017 at 2:41 AM

    You could use our Postal code search widget https://widgets.jotform.com/widget/postal_code_search which will allow your users to select the country and search the postal code. You can check how it works in my test form: https://form.jotformpro.com/72251397286968

    Please let us know how it worked for you.

    Thank you!

  • PPPoCI
    Replied on August 16, 2017 at 12:07 AM

    This is close to what I am looking for. Where do we enter the postal code data base?

    Also if the postal code is available how do I redirect?

  • BJoanna
    Replied on August 16, 2017 at 1:23 AM

    The widget already has a list of available postal codes for cities of the available countries. It is not possible to update this list. 

    I am not sure if I understood your other question correctly. Where do you want to redirect your users to? Do you want to redirect them conditionally to a custom thank you page if the postal code is available? If so, please check this guide:

    Change Thank You Page URL Based on a Condition

  • PPPoCI
    Replied on August 17, 2017 at 8:43 PM
    Yes I did see that link but it is very limited. I must not be clear. If a
    user entered in a postal code that matched approved service areas the the
    condition on the form would show the hidden fields and allow them to
    complete the contract and submit it with a payment.
    But I can not seem to find a way to list searchable postal codes.
    ...
  • Elton Support Team Lead
    Replied on August 17, 2017 at 10:34 PM

    How about using the autocomplete field? You can define all the postal codes in the list options and the users will be able to see the available items as soon as they type a value.

    How to create a feild where a customer can search postal codes? Image 1 Screenshot 30

    Example:

    How to create a feild where a customer can search postal codes? Image 2 Screenshot 41

    Then perform show/hide fields condition if the autocomplete field is filled.

    http://www.jotform.com/help/196-How-to-Hide-or-Show-Multiple-Fields-at-Once-Based-On-a-Single-Conditional-Entry

     

  • Elton Support Team Lead
    Replied on August 19, 2017 at 2:55 AM

    I found a workaround using Spreadsheet to Form Widget.

    Here's how:

    1. Add Spreadsheet To Form Widget to your form

    How to create a feild where a customer can search postal codes? Image 1 Screenshot 80

    How to create a feild where a customer can search postal codes? Image 2 Screenshot 91

    2. Then add a Textbox (Short Text Entry) field under it and label it "Available" or anything you prefer as long as the label matches the 2nd column name in the spreadsheet file which you need to create in the following step.

    3. Create a spreadsheet file or you can download this spreadsheet. Open the spreadsheet and place all your postal codes under the Postal Column (1st column). You can leave the 2nd column as it is. It will be used in the conditions later.

    How to create a feild where a customer can search postal codes? Image 3 Screenshot 102

    4. Open the Spreadsheet to Form Widget settings and upload the spreadsheet file.

    How to create a feild where a customer can search postal codes? Image 4 Screenshot 113

    5. In the same settings go to Custom CSS tab and paste this CSS codes. This will modify the "found" and "not found" search result message so it would relate to its purpose.

    div#message[style*="accept"], div#message[style*="delete"] {visibility: hidden; font-size: 0; text-align: center; padding-left:0; font-weight:bold; } div#message[style*="accept"]:before {content: "Postal Code Found!"; font-size: 12px; visibility: visible; color:green; } div#message[style*="delete"]:before {content: "Can't Find Postal Code"; font-size: 12px; visibility: visible; color:red; }

    How to create a feild where a customer can search postal codes? Image 5 Screenshot 124

    6. Create a condition that shows the fields you want whenever the "Available" field is filled or equal to Yes. Example:

    How to create a feild where a customer can search postal codes? Image 6 Screenshot 135

    7. That's it! Save your form and make some tests.

    Here's my demo form: https://form.jotformpro.com/72287687695983 (try searching 1234)

    How to create a feild where a customer can search postal codes? Image 7 Screenshot 146

    If you want to copy this form into your account, you can clone it. Here's how: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

    Hope this will work for you.