Jump to content

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

Recommended Posts

  • Replies 35
  • Views 150.2k
  • Created
  • Last Reply

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>




I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 3 months later...

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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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



Link to comment
  • 1 month later...

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 ! :)

Link to comment
  • 2 weeks later...

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?

Link to comment
  • 3 weeks later...

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

Link to comment
  • 3 weeks later...

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

Link to comment

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.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 2 months later...

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

Link to comment

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

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

Is the form part of an Index page?

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 3 months later...

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

Link to comment

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.

Link to comment

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

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