Custom Redirect Based on Form Selection

Site URL: https://www.treatyoakdistilling.com/

I am trying to create a custom form that will redirect users to different landing pages based on the selection they make. The form is a drop down asking visitors to select their state. I would like the form to re-direct them to a specific landing page based on which state they selected. Help! 

Can you post the URL to the page where the form is? It helps us if we can see with what you are working.

Hey Thomas! Thanks for your response. 

I am designing the page right now, it's not finished,  but here is a preview so you can get the gist 

https://www.treatyoakdistilling.com/shop-whiskey

When they select a state from the drop down, they need to be sent to a different landing page based on their state. Let me know your thoughts!

Sounds like you are trying to setup a redirect on submission. This existing thread may help you.

Correct, thank you @MoltoBello but I need to use multiple  re-direct URLs, users will be redirected to different store fronts based on their state.  

This code no longer works since Squarespace updated the form block mid 2023. Squarespace removed critical functionality this code used to make it work.

Please see Form Block Select Field Post-submit Redirect Change.

Let us know how it goes.

@creedon Thank so much, you rock. I tried inserting the code as directed and still not seeing results. 

Perhaps there is a simpler solution. There are only 3 states that need to be re-directed to a different page so right I have the form "submit" set to redirect to the URL that applies to all states except CA, TX and IL , this is what that code looks like from SquareSpace: 

 <form data-form-id="5f8da955f46d167ee8ce5578" data-success-redirect="https://shoptreatyoak.com/" autocomplete="on" method="POST" action="https://hawk-sprout-ry8m.squarespace.com" onsubmit="return (function (form) {

  Y.use('squarespace-form-submit', 'node', function usingFormSubmit(Y) {

    (new Y.Squarespace.FormSubmit(form)).submit({

      formId: '5f8da955f46d167ee8ce5578',

      collectionId: '5f8da8994339540352e6f741',

      objectName: 'page-5f8da8994339540352e6f741'

    });

  });

  return false;

})(this);" id="yui_3_17_2_1_1603213358956_601">

Is there something that can be done to offer an alternate redirect when  

<option value="California">California</option>

 <option value="Illinois">Illinois</option>

  <option value="Texas">Texas</option>

Sure my code can be modified but the core behaviour will still be the same. It needs to replace the redirect url for CA, IL and TX. We don't want to mess with the SS code it actually handles the form submit process.

My code just substitutes the redirect URL. We need to figure out why my code isn't running.

Is the code still there or did you take it out? I'm not seeing it on the page.

Updated code that is closer to what I think @MelissaHostetter wants.

<script>

  $( ( ) => {
  
    const stateUrlRedirect = {
    
      dataFormId : '5f8da955f46d167ee8ce5578',
      formSelectId : 'select-yui_3_17_2_1_1603057474472_404878-field',
      states : [ 'California', 'Illinois', 'Texas' ],
      redirectUrl : 'https://www.squarespace.com/'
      
      };
      
    // don't change anything beyond this point
    
    let $stateUrlRedirectForm = $( '[data-form-id="' +
    
      stateUrlRedirect.dataFormId + '"]' );
      
    stateUrlRedirect.originalRedirectUrl = $stateUrlRedirectForm.attr (
    
      'data-success-redirect' );
      
    $( '#' + stateUrlRedirect.formSelectId )
    
      .change ( function ( ) {
      
        let url = stateUrlRedirect.states.includes ( $( this ).val ( ) ) ?
        
          stateUrlRedirect.redirectUrl : stateUrlRedirect.originalRedirectUrl;
          
        $stateUrlRedirectForm.attr ( 'data-success-redirect', url );
        
        } );
    } );
    
  </script>

@creedon Worked like a charm! Thank you so much!

@creedonI am looking to do a very similar thing and was wondering if you could help me out as well.

1 hour ago, EENewHampshire said:

I am looking to do a very similar thing and was wondering if you could help me out as well.

I and others would be happy to take a look at your issue.

I suggest starting a new thread on the forum, describe what you need and then we can take a look. Be sure to post the URL for the page with your form.

If your site is not public please set up a site-wide password, if you've not already done so. Also post the password.

@creedonThanks for the response! I opened a new thread.

I have updated my October 19, 2020 code post. Same great functionality! More generalized.  

I have updated the code referenced in my October 19, 2020 code post. Moved the option url pairs configuration into the SS interface. Nothing fancy just using the select field description to hold the pairs.

Hello, I have a form with a dropdown option on my page: https://www.radiantlyalive.com/yoga-teacher-training

I want to redirect the user depending on the chosen option of the form.

I have a redirect page for each option.

Would you be able to help me or guide me? THANK YOU!!
---

Those are my pages/options: 

IN PERSON - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-yoga-teacher-training
IN PERSON - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-yoga-teacher-training
IN PERSON - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200hour-yoga-teacher-training-spanish
ONLINE - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training
ONLINE - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-online-yoga-teacher-training
ONLINE - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training-spanish

10 hours ago, rafaelRA said:

Would you be able to help me or guide me?

Did you try the code cited in my October 19, 2020 post earlier in this thread?

4 hours ago, creedon said:

Did you try the code cited in my October 19, 2020 post earlier in this thread?

@creedon, thanks for replying.

I tried but I don't understand where I need to write my post submit pages.

"IN PERSON - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-yoga-teacher-training
IN PERSON - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-yoga-teacher-training
IN PERSON - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200hour-yoga-teacher-training-spanish
ONLINE - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training
ONLINE - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-online-yoga-teacher-training
ONLINE - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training-spanish" "

Here is my code

 

Quote

<!--

  begin form block select field post-submit redirect change
  
  Version       : 0.2d1
  
  SS Versions   : 7.1, 7.0
  
  Dependancies  : jQuery
  
  Note          : does not work for form blocks with lightbox toggled on
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  no user serviceable parts below
  
  -->
  
  <style>
  
    .form-wrapper .field-list .description {
    
      display : none;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      const selector = '.form-wrapper .field-list ' +
      
        '.description:contains(\'fbsfpsrc\')';
        
      $( selector ).each ( function ( ) {
      
        const optionUrlMap = { IN PERSON - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-yoga-teacher-training
IN PERSON - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-yoga-teacher-training
IN PERSON - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200hour-yoga-teacher-training-spanish
ONLINE - Level 1 | 200 hours -> https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training
ONLINE - Level 2 | 300 hours -> https://www.radiantlyalive.com/300-hour-online-yoga-teacher-training
ONLINE - Level 1 | 200 hours | ESPAÑOL -> 
https://www.radiantlyalive.com/200-hour-online-yoga-teacher-training-spanish
};
        
        const $this = $( this );
        
        const $form = $this.parents ( 'form' );
        
        const $select = $this.next ( 'select' );
        
        let a = $this // split field description into array
        
          .text ( )
          
          .split ( 'fbsfpsrc' );
          
        a = $.map ( a, function ( value ) { // trim array values
        
          value = value.trim ( )
          
          return value;
          
          } );
          
        if ( a [ 0 ] ) { // set description or remove
        
          $this.text ( ) = a [ 0 ];
          
          $this.css ( 'display', 'block' ); // show description
          
          } else {
          
            $this.remove ( );
            
            }
            
        // begin build optionUrlMap
        
          a [ 1 ] = a [ 1 ].split ( '\n' );
          
          $.each ( a [ 1 ], function ( i, value ) {
          
            if ( i % 2 != 0 ) return true; // continue if odd
            
            optionUrlMap [ value ] = a [ 1 ] [ i + 1 ];
            
            } );
            
          // end build optionUrlMap
          
        // begin set a default post-submit redirect
        
          const firstOption = $( 'option:eq( 0 )', $select )
          
            .attr ( 'value' );
            
          $form.attr ( 'data-success-redirect', optionUrlMap [ firstOption ] );
          
          // end set a default post-submit redirect
          
        // on select change post-submit redirect
        
        $select.change ( function ( ) {
        
          let value = $( this ).val ( );
          
          value = optionUrlMap [ value ];
          
          $form.attr ( 'data-success-redirect', value );
          
          } );
          
        } );
        
      } );
      
    </script>
    
  <!-- end form block select field post-submit redirect change -->

I have updated my code cited in my October 19, 2020 code post.

Fix for description being set.