Jump to content

Redirect to Specific Page Based on Form Answer

Go to solution Solved by creedon,

Recommended Posts

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!

Edited by EENewHampshire
Link to comment
  • Solution

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>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 6 months later...

@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!

Link to comment

@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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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. 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 6 months later...
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>
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 9 months later...

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. 

 

Edited by Bamboo
The functionality seems to have changed
Link to comment
10 hours ago, 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 enable 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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...
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!

 

Link to comment
  • 1 month later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Link to comment
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';

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.