Conditional Form Block: add a delay on form submit before redirection

Custom Coding
, ,
1

Hi all,

The following script only works with the conditional form block.

Use case:

When creating a record with a conditional form block you want to add a delay before the redirection you set up in the “On Form Submit => Action”.
Let’s say there is an automation that is triggered when a new record is created. In your database the automation might fill out other fields and you need these fields to be filled out before showing the next page to your users.

Here is the script you need to add in the custom code header of the page:

<script>
    window.formRedirectDelay = {
        'form1': 10000, // change form1 by the form ID. Here the delay is set to 10 seconds before redirection occurs
    };
</script>
2

You can add a waiting screen if needed:

This would look like this =>
To be inserted in the custom code header of the page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">


<style>

    #loading-screen {

      display: none;

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: #2BA5FD;

      z-index: 9999;

    }
    

    #loading-screen .loading-content {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      color: #ffffff;

      text-align: center;

      font-size: 20px;

      font-weight: bold;

    }
    

    #loading-screen .loading-spinner {

      font-size: 40px;

      margin-top: 20px;

    }
    

#toast-container {
  display: none;
}


</style>


<script>
    window.formRedirectDelay = {
        'form1': 10000, //form1 to be changed and 10000 to be changed
    };
</script>

<script>
  window.addEventListener('block-loaded-form1', () => { //form1 to be changed
    window.addEventListener('submit-form-success-form1', (event) => { //form1 to be changed
      document.getElementById('loading-screen').style.display = 'block';
    });
  });
</script>




To be inserted in the custom code FOOTER of the page:

<div id="loading-screen">

    <div class="loading-content">

      <p>Please wait...</p>

      <i class="fas fa-spinner fa-pulse loading-spinner"></i>

    </div>

</div>