Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Redirect to Specific Page Based on Form Answer


MQSCreative

Question

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

12 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment
  • 0

@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
  • 0
Posted (edited)

@ty.hunt

The poster doesn't need to do this step. If you are following along add the following to Settings > Advanced > Code Injection > HEADER.

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

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

<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d7/twcsl.js"></script>

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

<script>

  $( ( ) => {
  
    /*
    
      change form block post-submit redirect based on a radio form field
      selected option
      
      Version       : 0.1d1
      
      SS Versions   : 7.0, 7.1
      
      Dependancies  : jQuery
                      
                      twcsl
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
    const radioFormFieldLabel = '[enter radio form field label here between single quotes]';
    
    const optionUrlMap = {
    
      /*
      
        the format of each line is a radio field option as entered in the SS
        form block interface and the post-submit redirect URL for the option
        
        an empty url means no post-submit redirect
        
        if a radio field option has single quotes in it then put a backslash
        before the single quotes. example: it's becomes it\'s
        
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many a radio field options as you want to change the redirect
        url.
        
        */
        
      // '[enter radio field option here between single quotes]' : '[enter url here between single quotes]',
      
      };
      
    const formNth = 1; // which form block from the page to use
    
    // do not change anything below, there be the borg here
    
    const $form = twcsl.getFormNth ( formNth );
    
    if ( $form === undefined ) return; // bail if no form
    
    const $radio = $( '.title:contains(' + radioFormFieldLabel + ')', $form )
    
      .filter ( function ( ) {
      
        const s = $( this ) [ 0 ].childNodes [ 0 ].nodeValue.trim ( );
        
        return s === radioFormFieldLabel;
        
        } );
        
    if ( $radio.length != 1 ) return;
    
    $radio
    
      .parent ( )
      
      .change ( function ( ) {
      
        const s = $( '.option input:checked', $( this ) ).val ( );
        
        $form.attr ( 'data-success-redirect', optionUrlMap [ s ] );
        
        } );
        
    } );
    
  </script>

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
version 0.1d1

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

Link to comment
  • 0

@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 best , and see my profile. Thanks for your support!

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