Gif after form submission

Custom Coding
1

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?

2

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
3

Yes this is something i am looking for!

4

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

This works thanks!

1 Like
6

Do you know if its possible to use something from lottiefiles? I want to use this url LottieFiles - free animation files built for Lottie

7

I am not really aware of Lottie documentation, I won’t be able to help on this.

Though this would make it simpler maybe: Convert Lottie to GIF – free online converter – LottieFiles