Redirect to Specific Page Based on Form Answer

Site URL: https://orderbvi.com/bvi-contact-tracing-1

I am looking to direct users based on the form field they choose on the drop down.

For example:

Users need to choose which Dining Outlet they are visiting (Dining Room/Corks/Tavern/Lobby Bar). Based on their answer, upon submission, I want to direct them to the page for that specific Dining Outlet. So if they choose Tavern, it would then direct them to orderbvi.com/tavern-patio.

How would I go about doing that? You can view the website at: https://orderbvi.com/bvi-contact-tracing-1 and use the password SSHELP.

Thank you in advance!

I'm not seeing a form on that page. It would help if we had a form with which to work.

@creedonWeird it's now showing. Here is the live page with the form (that actually shows)!

https://orderbvi.com/bvi-contact-tracing

I see the form!

@creedonThat worked great - thank you so much! I do have one quick question but not sure it would work. Is there any ability to have it send to a Thank You page after they submit and then auto-direct after say 3 seconds to the correct page? No big deal if not but thought I'd check to see if this would be possible.

@creedon this is exactly what I'm looking for, but I don't fully understand your code to make it specific to my site. Will this work with a simple Yes or No question? "Yes" the form can be submitted and reach me. "No" and the person gets redirected to a new page explaining why.

https://lighthawk.studio/get-started (here's the form in question. I'm asking about the "Proposed Budget" question towards the bottom.

Thanks for your help!

@ty.hunt

The poster doesn't need to install jQuery.

Please see Change Form Block Post-Submit Redirect Based on a Radio Form Field Selected Option.

This code does not stop the form from being submitted and stored when the no option is selected. You will need to come up with a process for dealing with the no forms being stored.

Let us know how it goes.

@creedon Copy that. Thank you! I'll give this a go and let you know! I appreciate it!

@creedon Thanks again for the code. It works perfectly when the page is on its own, but the minute I embed it into an Index, the redirect stops working. Thoughts?

@ty.hunt

SS ignores the Advanced > Code Injection > HEADER for pages that are added to an index page.

Try putting the code in Advanced > Code Injection > HEADER for the index page itself. The code may not work as I didn't test it in a index page situation.

If it doesn't work, let us know, and give us the URL for the index page. It may be possible to adapt the code to work there. 

Copy that. I will try that now.

@creedon That worked! Thank you so much!!

On 11/5/2020 at 6:11 PM, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the form.

<script>

  $( ( ) => {
  
    // begin dining outlet redirect
    
      const formSelectId = 'select-yui_3_17_2_1_1604067328695_32418-field';
      
      const redirects = {
      
        /*
        
          enter options from select form field and redirect URL Slug or
          External URL
          
          */
          
        'Corks' :                     '/corks-x',
        'Dining Room (Restaurant)' :  '/dining-room-x',
        'Lobby Bar' :                 '/lobby-bar-x',
        'Tavern' :                    '/tavern-patio'
        
        };
        
      // don't change anything beyond this point
      
      let $formSelect = $( '#' + formSelectId );
      
      // get the redirect form
      
      let $form = $formSelect.closest ( 'form' );
      
      $formSelect.change ( function ( ) {
      
        let url = $( this ).val ( );
        
        if ( url !== '' ) url = redirects [ url ];
        
        $form.attr ( 'data-success-redirect', url );
        
        } );
        
      /* end dining outlet redirect */
      
    } );
    
  </script>

 

I tried the above code for the form in my website but i did not manage to make it happen. could you please help me @creedon? thank you

https://www.radiantlyalive.com/yoga-teacher-training

My version of the code is 

 Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for the page with the form.

<script>

  $( ( ) => {
  
    // begin YTT redirect
    
      const formSelectId = 'select-yui_3_17_2_1_1637853681547_89030-field';
      
      const redirects = {
        'IN PERSON - Level 1 | 200 hours' : '/200-hour-yoga-teacher-training',
        'IN PERSON - Level 2 | 300 hours' : '/300-hour-yoga-teacher-training',
        'IN PERSON - Level 1 | 200 hours | ESPAÑOL' : '/200hour-yoga-teacher-training-spanish',
        'ONLINE - Level 1 | 200 hours' : '/200-hour-online-yoga-teacher-training',
        'ONLINE - Level 2 | 300 hours' : '/300-hour-online-yoga-teacher-training',
        'ONLINE - Level 1 | 200 hours | ESPAÑOL' : '/200-hour-online-yoga-teacher-training-spanish'
        
        };
        
      // don't change anything beyond this point
      
      let $formSelect = $( '#' + formSelectId );
      
      // get the redirect form
      
      let $form = $formSelect.closest ( 'form' );
      
      $formSelect.change ( function ( ) {
      
        let url = $( this ).val ( );
        
        if ( url !== '' ) url = redirects [ url ];
        
        $form.attr ( 'data-success-redirect', url );
        
        } );
        
      /* end YTT redirect */
      
    } );
    
  </script>

3 hours ago, rafaelRA said:

I tried the above code for the form in my website but i did not manage to make it happen. could you please help me @creedon? thank you

Here is the issue. I didn't key into this when I looked at your site earlier. You're using a form in a lightbox. These codes won't work for lightbox forms as the form is not on the DOM when the code is run.

Lightbox forms require not easily written code that use MutationObserver. MO is a way to watch for elements to appear on the DOM and then take some action.

I'm not aware of any code written to use MO and redirect to a URL based on select input.

Hey @creedon! Thanks for this code snippet, I've been searching all over the place for this exact functionality.

I've made tweaks to the code you shared to suit my form field ID and the options in the dropdown, but the page redirects work only sometimes - I've done several test submissions but can't really figure out what the trigger is for a redirect. 

Here's the page with the form - https://www.mommyshotsbyamrita.com/booking

I would like to redirect users to a different page based on their selection for the "City" dropdown field. 

Here's the code I've injected:

Settings > Advanced > Code Injection > Header

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Page settings > Advanced > Page Header Code Injection

<script>

  $( ( ) => {
  
    // begin city redirect
    
      const formSelectId = 'select-976d627d-86a6-45a0-9ffd-c6e493cba2dd-field';
      
      const redirects = {
      
        /*
        
          enter options from select form field and redirect URL Slug or
          External URL
          
          */
          
        'Chennai' :  '/pricingb',
        'Bangalore' : '/pricingb',
        'Other' : '/pricingo',
        
        };
        
      // don't change anything beyond this point
      
      let $formSelect = $( '#' + formSelectId );
      
      // get the redirect form
      
      let $form = $formSelect.closest ( 'form' );
      
      $formSelect.change ( function ( ) {
      
        let url = $( this ).val ( );
        
        if ( url !== '' ) url = redirects [ url ];
        
        $form.attr ( 'data-success-redirect', url );
        
        } );
        
      /* end city redirect */
      
    } );
    
  </script>

I would ideally like to have the *City* dropdown after the email field to keep it in a clear flow but I've moved it to the bottom to test out the form functionality. Initially, the redirect seemed to work when the City dropdown was the last from field to be filled out but now the redirect is happening at random. 

On 9/15/2022 at 2:37 AM, Bamboo said:

Initially, the redirect seemed to work when the City dropdown was the last from field to be filled out but now the redirect is happening at random.

I think I know what is happening. The original code was probably written for a v7.1 site. You are on v7.0 and you probably have Ajax enabled (it is enabled by default). To test if Ajax is involved you can turn it off. Be sure to reload the page before you test. Turning off Ajax can affect the performance of your site.

Check out @paul2009's Why does Squarespace code only work on refresh?

Let us know how it goes.

On 9/16/2022 at 2:04 AM, creedon said:

Let us know how it goes.

Hey @creedon, I turned off Ajax on the site settings and now the form redirects are working perfectly. Thank you so much!

I do have a related question though, is it possible to make modifications to the same code to have conditional redirects based on two different dropdown fields?

Here's the form in question - https://www.mommyshotsbyamrita.com/booking

What I'd like to do is setup conditional redirects based on the dropdown selection for "City" as well as "What can we shoot for you?". Something as follows:

City > Bangalore | What can we shoot > Play Date = /Link1
City > Bangalore | What can we shoot > Cake Smash = /Link2
City > Other | What can we shoot > Monthly Milestone = /Link3

And so on....

Really appreciate your help on this!

Hello,

I need the same redirection system after form summit.

But I doesn't work 😣

@creedon and @Bamboo can you help me ?

• Am I on 7.1 ? How to disable AJAX ?
• Is it because Header and Footer are hidden ? (css page code injection)
• What's the problem ?

Thanks a lot !

43 minutes ago, NicolasD said:

But I doesn't work 😣

Quote

• Am I on 7.1 ? How to disable AJAX ?

v7.1 doesn't have the AJAX feature.

Quote

• Is it because Header and Footer are hidden ? (css page code injection)

No.

Quote

• What's the problem ?

You need to target the id of the select field itself.

const formSelectId = 'select-25edc618-8cb3-4e83-8be7-0cfb3188c30f-field';

Let us know how it goes.

Thank you ! Naming the "id of the select field itself" worked perfect (with a select field).

>> How should I change the code to work with a RADIO field @creedon? 

Looking forward to hearing from you 😊

4 hours ago, NicolasD said:

How should I change the code to work with a RADIO field

Please see my May 14, 2021 post earlier in this thread.

Let us know how it goes.

9 hours ago, creedon said:

Please see my May 14, 2021 post earlier in this thread.

Congratulation @creedon  for your JS library, you are a genius !

But I still can't get it to work 😣

I installed as "paid plan" properly in site code injection.

And I changed the code in the page's code injection.

• What's the problem ?

• Is it "const nth = 1; // which form block from the page to use"?

• It is not special characters. I tested it with simplier words (without "é ( ) ç")

Thank you

9 hours ago, NicolasD said:

What's the problem ?

The issue I can see at the moment is that you've used a field id and not the radio form field label.

    const radioFormFieldLabel = 'Mode d\'exercice';

12 hours ago, creedon said:

The issue I can see at the moment is that you've used a field id and not the radio form field label.

    const radioFormFieldLabel = 'Mode d\'exercice';

 

I works, thank you @creedon your library and advices are PERFECT ! 👏😃