Gif after form submission

Can a scenario be created where submitting a form triggers a pop-up displaying an animation, and upon its completion, redirects you to another page?

Hi,

Totally doable,

What is your form id, the gif url and what is the url of the page where you want to redirect the user to?

As an example:
ezgif-4-3a8badaeb5

1 Like

Yes this is something i am looking for!

This is how I made it:

Add this custom code in your page settings, header custom code:

  1. You would need to change form1 by your currend formID (it appears two times in the script)
  2. You would need to change gifURL by your own Gif url (it needs to be a public link or it can be a Softr asset link)
  3. You would need to change this:
    setTimeout(() => {
      window.location.href = '/two-columns-draggable';
    }, 3000);

by the url path you want to redirect after form submission (window.location.href =)
and the delay you want to add before redirection (3000 which are milliseconds)

The style part is to design the container where the GIF is inserted in.

<style>
    #gifDrawer {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border: 2px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      text-align: center;
      z-index: 9999;
      display: none;
    }
</style>
  
<script>
window.addEventListener('block-loaded-form1', () => {
  const gifUrl = 'https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdno3amplamR5dDNraTBqamJ4bG94cmtsYWljYzF2MGRxa3E5Z2JzbyZlcD12MV9naWZzX3RyZW5kaW5nJmN0PWc/ZzD7tfDzRJPYSZsQ75/giphy.gif';

  function displayGif() {
    const drawer = document.createElement('div');
    drawer.id = 'gifDrawer';

    const gifElement = document.createElement('img');
    gifElement.src = gifUrl;
    gifElement.style.width = '100%'; 
    gifElement.style.height = 'auto'; 

    drawer.appendChild(gifElement);

    document.body.appendChild(drawer);

    drawer.style.display = 'block';

    setTimeout(() => {
      window.location.href = '/two-columns-draggable';
    }, 3000);
  }

  window.addEventListener('submit-form-success-form1', displayGif);
});
</script>

This works thanks!

1 Like