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

After a successful form submission, how do I redirect to another page?

Question

Recommended Posts

  • 6

This can be achieved using custom scripting.

The script waits for the input button to be clicked and sets up a listener that checks to see if the div that holds the confirmation text is visible and then sends the user to the destination page.

Add this to the code injection point for the page that holds the form:


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

var eventposted=0;

$(document).ready(function(){
 $('input.button').click(function() {
   window.setInterval(foo, 100);
 });
});

function foo(){
 if(($(".form-submission-text").is(':visible')) && (eventposted==0)){
   window.location = "<b>http://www.something.com/destinationpage</b>";
   eventposted=1;
 }
}

</script>




Edited by silvabokis
Bold bit to change

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 2

You can use Post-Submit HTML in the advanced tab of the Form block settings, just add a javascript redirect

example:


<script type="text/javascript">
   var url = "https://google.com";

   // IE8 and lower fix
   if (navigator.userAgent.match(/MSIE\s(?!9.0)/))
   {
       var referLink = document.createElement("a");
       referLink.href = url;
       document.body.appendChild(referLink);
       referLink.click();
   }

   // All other browsers
   else { window.location.assign(url); }
</script>

EDIT: This code has been updated to use window.location.assign(url) instead of window.location.replace(url), to fix an issue with the back button not working correctly. Thanks @AdySmiles and @Bernard West ! :)

Edited by squareology

Share this post


Link to post
  • 1

Hey guys! None of the code above worked for me... after hours of wrestling with it.

But I did find a super easy solution that works great!

Put this in the form "POST-SUBMIT HTML" section under "advanced".

Then replace the URL with where you want your page redirected to.

Here is the code

<meta http-equiv="refresh" content="0; url=http://www.heike-delmore.com/thx-dont-say-the-m-word">

Edited by hvdelmore

Share this post


Link to post
  • 0

@rubengarciam - Good question. One way to get the value of the form input would have another listener that updates JavaScript variables for each field you want to track and then test against those variables to determine the dynamic direction destination.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

@silvabokis I managed to get it working by writing the form as a block code instead of a form block. Code (in this particular case, just a single input):


<div class="form-wrapper">
   <div class="form-inner-wrapper">
     <form autocomplete="on" action="https://brico.squarespace.com" method="POST" onSubmit=" location.href = 'YOUR_URL/' + document.getElementById('username').value; return false; ">
         <div class="field-list clear">
              <div id="username-input" class="form-item field text">
                 <input class="field-element text" type="text" id="username" name="username">
               </div>
         </div>
       <div class="form-button-wrapper form-button-wrapper--align-left">
         <input class="button sqs-system-button sqs-editable-button" type="submit" value="Submit">
       </div>
       <div class="hidden form-submission-text">Redirecting</div>
       <div class="hidden form-submission-html" data-submission-html=""></div>
     </form>
   </div>
</div>



Edited by rubengarciam

Share this post


Link to post
  • 0

I am attempting to get this function on a form I have on a landing page, it light boxes on the landing page, and none of the code snippets I am finding are working. I would like to redirect the user automatically to a page of my site if they submit the form.

The issue I'm having is less a "not redirecting when submitted" and more "any code in the advanced section causes the form to not pop up and thus will never be filled out", so I'm not sure if this is a known issue I should contact support about or if the code snippets I have found are just not compatible with the format I have my form in?

Any thoughts?

Share this post


Link to post
  • 0

@Jordaniels1 – near the end there’s this line:

window.location = "http://www.something.com/destinationpage";

Just change that URL to whatever you would like.


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

guys, fantastic code. thanks.how can i change the interval time between the submit and the redirect to a couple of seconds so that the submit message can be read by the person submitting the form?

Many thanks

Share this post


Link to post
  • 0

In my script you could increase the millisecond value in the following line:


window.setInterval(foo, 100);  

This would slow down the rate at which the script checks to see if the form submission text is visible.

However, there's then a danger that the user goes somewhere else before the redirect triggers.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

Great code. However I am finding that when using the Post-Submit HTML code listed above it takes me to the new page fine. But when I hit the back button in the browser menu, it doesn't take you back to the page where you filled out the form. It's not really a big issue but I'm using the code on a newsletter form, which is on my blog. So if someone does subscribe and then chooses to go back to the blog by hitting the back button, it would be ideal if they can be sent back to the right place.


Fashion and portrait photographer

Share this post


Link to post
  • 0

replace removes the url from the browser cache. I haven't thought about this too much, but instead of window.location.replace(url);try:

window.location="www.google.com";

That will keep the previous url in the cache. I'm just not sure exactly how it will interact with tryingtobehelpful's code above. Only one way to find out.. ;)

Share this post


Link to post
  • 0

@squareology @AdySmiles @Bernard-West any idea why when i add the Post-Submit HTML my form button no longer pops up to be filled in?

Share this post


Link to post
  • 0

It's not working at all for me... :( I put the above code in the Page Header Code Injection in the Advanced tab in the setting of the page I have the newsletter form on, right? Please help!!! This is so important!!!

Share this post


Link to post
  • 0

None of the code is working for me... :( And I'm confused with the code above about writing the form as a block code instead of a form code. Would you please clarify what you are saying? Where do I put the landing page info. Please help! Thanks!

Share this post


Link to post
  • 0

Oh no, there are weird lines at the top of the page and a submit button on the left hand corner on my home page after I put this code... Help! My website is iamblissyoga.com

Share this post


Link to post
  • 0

Shut the front door! All these crazy code solutions and hvdelmore has the one that works!!! And it's the shortest!

I needed to track conversions is two different places. The long code towards the top worked for me in once place but did not behave the same when I used it again in a different place...

But hvdelmore code worked in both places!!!

Similarly, I just realized you can also use this (even shorter) code in the POST-SUBMIT HTML box for the form submissions of which you wish to track conversions for...

Obviously, remember to replace "/link-to-specific-page" with the page on your website that you have installed the conversion tracking code on...

Sorry guys, I know this solution is ridiculously simple, but I just figured it out moments ago and couldn't do it without this forum's help.

Share this post


Link to post
  • 0

Hey All,

that's working with google form ??

so I'm trying long 'n long time figure out to redirect a G form, but nothing works for me yet.I'm using the form in static html app on facbook page, I have tried some java, iframe , html target etc.. and many possibilities found online, so I don't know where or how to fix this issue.So I'll give try Silvabokis code if works. I'm think the big problem most to be the place I'm working, so static html app on facebook is a iframe , so I'm working inside of Iframe place 'n maybe this is why any code has worked . Anybody could tell me something about it please , so I 'll appreciate, regards.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...