How do I display City, ST on page 2 based on zip code entered in form on page 1

S

On http://refinance.certysfinancial.com/testing/ the user would enter a zip code and the form header area in page 2 http://refinance.certysfinancial.com/testing-1/ should display the City and State abbreviation.

I expect there are two steps to this - 

Step 1: Hidden fields in the first page’s form to autopopulate the city and state and pass them on as URL parameters to the second page. I registered with zipcodeapi.com and added their script with hidden fields but those fields don’t seem to be populating. I tested this by adding visible fields named “city” and state" as per the script, but they don’t populate. So I imagine the hidden fields don’t either.

Step 2: The second page should display the city,state URL parameters in the designated area with the correct formatting. I plan to do this using dynamic text replacement.

Can someone help?

12 replies

Stuart_Mitchell

Hi Sidney,

Can you post the script you’re using from zipcodeapi, my first guess would be that it’s not targetting the right element names and that’s why it’s not updating the fields, if we can crack this for you then I think we should be good to go. Seems like you almost had it worked out, just a little tweak and fingers crossed you’ll be where you want.

I’ll most likely be looking at this either late tonight or first thing tomorrow morning but if I can be quicker I will 🙂

Cheers

Stuart.

S

Stuart,

Thanks for responding! The script code is below. I did name the form fields as “city” and “state” since that’s what it appears to be in the script, but I’m not a coder, so any help or corrections will be appreciated.

I also manually loaded jquery 2.1.3 and disabled jquery 1.4.2 since Mark Wainwright’s answer on the following link says that this script requires a newer version.

/topics/anyone-know-how-to-use-zip-to-autofill-state-and-city…

Stuart_Mitchell

Hi Sydney,

Before I go the whole hog and setup an example of this and test it I’d like to ask you to try two things jump out at me. 

Firstly we need to update the bit of code right at the start that says…

var container = $ ("#example1");

to read…

var container=$("#lp-pom-form-46");

And secondly  the code you posted is looking for a field called Zipcode, the actual name of the field on your unbounce form is Zip.

You have two choices, either edit the code to look for Zip, or edit the name of the field on your unbounce form to call it Zipcode. The later is obviously the easier version for you to do so I recommend changing the field name to Zipcode. Could we give that a try first please? 

Once we have the hidden fields populating we can move on to the next step of passing those values to your second form in the process. 

Hope that makes sense, ping me back if your not sure.

Cheers

Stuart.

S

Stuart - you rock. That fixed it!

And I had step 2 set up correctly so the whole thing works now. Thanks for your help! 🙂

Stuart_Mitchell

You’re very welcome Sidney… I always get a buzz of excitement when something gets fixed 🙂

Feel free to shout if you need anything else 🙂

Cheers

S.

S

Yeah I know the buzz. It’s even higher when a marketer like me fixes a tech issue he’s been struggling with for a while. 😉

EDIT: Deleted and posted the question separately, since it’s another issue altogether. Thanks!

Drivetrain

I’m trying to recreate the success here but not having luck just yet 🙂 Any help appreciated. Did I miss something simple?

Here’s what I did start to finish:

  1. Disabled jQuery 1.4.2 and manually enabled jQuery 2.1.4 using script in head, 1st in line:
" rel="nofollow" target="\_blank" title="Link: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"\>"\>https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"\>

  1. Script 2, using this zipcodeapi registered script on page. Made sure to use field ‘zipcode’ on my Unbounce page 1.

  2. Created hidden fields on 2nd step form called “city” and “state”

Also made sure I am using www. and non www. in my registered app on www.zipcodeapi.com

Script as follows:

Isn’t working though, I get to 2nd page and hidden fields empty. Tried it with fields showing as well. Did I miss something simple?

Stuart_Mitchell

Hi Drive,

The line that says

var container = $("#lp-pom-form-46");

Is specific to the other landing page, you need to use the actual element name of your form. You can get this by in chrome by right clicking on your form header and choosing inspect element. It should have form in the name but probably end in different numbers. If you can fix that it should work fine.

Cheers

S.

Drivetrain

Gotcha–checked, and it’s the same 46
Here’s my test page:

www.transmissionrepairquotes.com/ziptest

Stuart_Mitchell

Hmmmm okies, will take a look in the morning bit late for me atm…  I’m sure we can sort it. 

Drivetrain

Did you have a chance to take a peek at it? Let me know if it was something I did on my end.

M

Hey all,
Sorry to bump this.
I have a question related to the same api:

I’m trying to integrate this into a specific wordpress page .
now the thing is, I know the elements IDs but, I’m not so sure which of the values in the script I need to change.
Plus, I’m not using the city field [just Zip and State]

so lets say my div-id is 'mydivid’
and my zip field id called 'myzipfield’
and state field id called ‘mystateid’

in mysql :
zip = 'zip’
state = ‘state’

how the code should be look like ?

the original code is (I’ve subtracted the client key) :

**many thanks and appreciation.**

 

Reply


Terms & ConditionsCookie settings