Welcome to the Instapage Support Center

|

Redirect to a different page depending on the dropdown option selected

Using custom code you can create almost any functionality on an Instapage landing page.

In the example below I will show you how you can redirect to a URL after form submission depending on the selected option from your form dropdown.

First I will create a dropdown in my form called "My Dropdown", and I will add in three options: "Option 1", "Option 2" and "Option 3".

1__1_.png



I will setup so that if the visitor selects "Option 1" it will redirect him to our main website https://instapage.com. For "Option 2" we will send him to our Help Center -https://help.instapage.com/hc/en-us and "Option 3" will redirect to this article. 

Here you have code that you will need to add into your Settings -> JavaScript, header section:

<script>
ijQuery(document).ready(function($){ 
  var selectInput = ijQuery( 'form' ).find( 'select[name="'+ base64_encode( 'My Dropdown' ) +'"]').attr('id');
  selectInput = "#"+selectInput;
  console.log(selectInput);
  $(document).on('change', selectInput, function(e) {
      // Option 1
      if(this.options[e.target.selectedIndex].text == "Option 1"){
      ijQuery( 'form' ).find( 'input[name="redirect"]' ).val('https://instapage.com');
      // Option 2
      } else if(this.options[e.target.selectedIndex].text == "Option 2"){
      ijQuery( 'form' ).find( 'input[name="redirect"]' ).val('https://help.instapage.com/hc/en-us');
      }
      // Option 3
      else if(this.options[e.target.selectedIndex].text == "Option 3"){
      ijQuery( 'form' ).find( 'input[name="redirect"]' ).val('https://help.instapage.com/hc/en-us/thisarticle');
      }
  });
}); 
//ready
</script>

 

Now this is how your code will look in your Instapage page editor

1234.png

I have underlined the name of the dropdown in red. You will need to change the name with your drop-down field's name. Underlined in orange, you have the options in the order they appear in the dropdown and with yellow the URL for each option in the same order.

Just keep in mind you also need to set a default redirect to one of the URLs you will add in the code.

 

You can see a live example or download the example page and upload it to your own account below: 

Live Example Download

Have more questions? Submit a request
Was this article helpful?
6 out of 6 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, reach out on live chat or call us now!