Jump to content

Custom Redirect Based on Form Selection

Recommended Posts

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! 

Edited by MelissaHostetter
Link to comment

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

 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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>

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 months later...
  • 5 months later...
  • 2 months later...

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

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

 

Link to comment
  • 1 year later...

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.