Link to 2 different pages from same form

  • 2 September 2011
  • 10 replies
  • 18 views
J

Can I link to 2 different pages from a single form, where the next page is conditional on what the user in inputs on the form? The form would be one field only.

Specifically, I want to ask the user for their postcode/zipcode on one page. If it exactly matches the area where I’m running a pilot I want to take them to a page with the lead capture form for the pilot. If it’s anything else I want to take them to a separate page with a different lead capture form.

I have an alternative flow in mind if this isn’t possible, but it would be fantastic if it is.

10 replies

J

Hi Julian,

It is possible but it will require a bit of custom Javascript. Custom javascript can be pasted in the Manage Scripts dialog that is accessible by clicking on the Scripts button in the tool bar above the editor. Here is a script that changes the URL of the form based on the value of a text input field. It assumes that the input field is named “Zip” or “zip”. In this example, if the user enters “12345” then they will go to “http://apple.com” otherwise the got to "http://unbounce.com": Here is the script:

<script> <br /> jQuery(document).ready(function() { <br />
var submitButton = jQuery('#'+window.module.lp.form.data.formButtonId); <br />
var submitAction = submitButton.data('events').click[0]; <br />
submitButton.unbind('click', submitAction); <br />
submitButton.click(function(e) { <br />
  if (jQuery('#zip')[0].value == "12345") { <br />
    window.module.lp.form.data.confirmData = "http://apple.com"; <br />
  } else { <br />
    window.module.lp.form.data.confirmData = "http://unbounce.com"; <br />
  }; <br />
  submitAction.handler(e); <br />
}); <br /> }) <br /> </script>
J

This is absolutely great, thanks Justin.

I have one more question about the same form. As I said above it’s a single-field form (zipcode only) with a ‘submit’ button alongside. Because it’s single field I expect a lot of users will just type in the zip and hit return/enter.

Trouble is, when they do this the field clears and they don’t go anywhere. They have to re-key their zip and click the submit button.

Is there a way to make the form submit when they hit return/enter? Maybe another bit of custom javascript?

J

Hi. Not heard back on this 2nd question. Since it’s unrelated to my original question I will post it as a separate thread. So consider this question dealt with - that custom javascript works perfectly, thanks Justin.

J

Hi, sorry for the delay in getting back to you. What browser and operating system are you using?

J

Hi. No problem Justin, thanks for picking this up.

Using Chrome on Mac OS (leopard). Just got a new notebook running lion (also using chrome), but haven’t tested this on that.

J

Hi Justin. Any update on this?

I’m sorry to hassle but can you please give me a timeframe for looking into it or likelihood that there’s a fix.

I’m ready to launch this but holding off because I think it’s quite a big usability issue with the way I currently have the page set up (single-field form). Initial testing has resulted in every user so far typing in their zip and hitting ENTER, at which point the zip disappears and they go nowhere.

If it’s unlikely that there’s an easy fix I’ll have to think about alternatives ways to structure the page flow that this is part of. I’m hopeful that there’s a bit of code I can add in to fix it though.

cheers
julian

J

Update on this after some further testing…

The issue occurs only when I’m using the above custom javascript, which enables linking to 1 of 2 different pages based on zipcode. That code is awesome if the user keys the zip then clicks the button, but there’s a problem if they key and hit enter (as described in my posts above).

I’m not very technical, but I think the issue is caused by a conflict between what the custom javascript is doing and the ‘form confirmation’ properties which are set in the standard editing interface. I have tested a few scenarios which I hope will help with a resolution:

  1. If I take out the custom javascript and just link to a single web page from the form, it works fine if a user just keys their zip and hits enter. Unfortunately this doesn’t meet my need to link to 2 different pages.

  2. When using the custom javascript, if I set the ‘form confirmation’ properties to “go to another web page” but leave the “URL” field blank, the custom javascript works fine ONLY IF if the user clicks the submit button. If they hit enter then the issue described in above posts occurs. This is how I had it set up when I originally reported this problem.

  3. The problem is not that the data doesn’t submit. The zip is actually captured as a new lead even when the user hits enter. It’s just that they don’t move to the next page.

  4. If I keep the custom javascript in there but also add a URL destination into the ‘form confirmation’ properties, then the form submits as soon as the user hits enter (which is great) but it always goes to the same page next (i.e. the URL in the ‘form confirmation’ properties seems to override the custom javascript so it no longer does anything).

Sorry for the long post, but I guess all this info helps to uncover the problem. Is there a way to amend the custom javascript provided to deal with this?

Thanks very much.
Julian

C

Did you ever sort out this issue? This is my current dilemma as well.

J

Sorry Casey, I don’t have a solution to this.

Ryan

Hey Casey - unfortunately not. Hitting enter to submit the form generally works just fine and it’s possible this issue could be the result of the custom script.

Would embedding a 3rd party form work for you instead? You could try using something like either JotForm or WuFoo which would likely support these features natively.

Reply


Terms & ConditionsCookie settings