Jump to content

Redirect delay after submitt message is displayed

Recommended Posts

I have a simple form for a contact page, in the post function of the send button I have it set to display a message and redirect back to the home page.  The redirect happens too fast and you barley see the message.  How can I delay the redirect as there doen't seem to be an option to delay it.  Any help would be great. 

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
  • 8 months later...
On 6/20/2023 at 3:31 AM, tuanphan said:

 You can add this code to

<script>
         setTimeout(function(){
            window.location.href = 'https://google.com';
         }, 3000);
</script>

3000 = 3 seconds

replace google with new page url

image.png.47cca272acda142c3bf16e41469b4714.png

How can I delay the form submission before displaying a post message?

Link to comment
4 hours ago, tuanphan said:

You mean

users submit > after X seconds > Show post message?

Hey tuanphan. I found some Javascript to delay any action if a button is pressed, but any delay with forms, results in a 403 forbidden error probably due to a security feature on Squarespace. I was able to use Javascript to delay other specific buttons by 500ms for the button animations to play out. If you know of a workaround to delay form submit buttons, that would be greatly appreciated!

Link to comment
On 3/18/2024 at 9:15 PM, JamIsJam88 said:

Hey tuanphan. I found some Javascript to delay any action if a button is pressed, but any delay with forms, results in a 403 forbidden error probably due to a security feature on Squarespace. I was able to use Javascript to delay other specific buttons by 500ms for the button animations to play out. If you know of a workaround to delay form submit buttons, that would be greatly appreciated!

Which code did you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, tuanphan said:

Which code did you use?

This is the code I am using to delay actions from buttons being pressed, such as any links from opening in new windows or sending an email. I removed the code to delay the form post-submit message because I kept getting a 403 forbidden error.

<!-- BUTTON DELAY AND ANIMATION -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var targetSelectors = '.sqs-block-button-container a, header#header a.btn';
    var buttons = document.querySelectorAll(targetSelectors);
    buttons.forEach(function(button) {
      var timeoutId;
      // Function to handle the animation
      function animateButton() {
        button.classList.add('pressed');
        // Ensure animation lasts 500ms
        timeoutId = setTimeout(function() {
          button.classList.remove('pressed');
        }, 500);
      }
      // Function to perform the button's action after a delay, including animation time
      function performAction(e) {
        // Delay only if it's a link with an href attribute
        var url = button.getAttribute('href');
        if (url) {
          e.preventDefault(); // Prevent default immediately to handle manually later
          clearTimeout(timeoutId); // Clear any ongoing animation timeout
          animateButton(); // Animate button press
          setTimeout(function() {
            // Handle link target attribute for correct behavior
            var target = button.getAttribute('target');
            if (target === '_blank') {
              window.open(url, '_blank');
            } else {
              window.location.href = url;
            }
          }, 500); // Total delay includes animation time
        }
      }
      // Touch events for mobile
      button.addEventListener('touchend', performAction);
      // Click event for desktop and fallback for mobile
      button.addEventListener('click', performAction);
    });
  });
</script>

 

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

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.