Tally - redirect after submit - javascript

[lea]

Dear Softr Community,

I am writing to seek guidance on how to create a JavaScript code in the header section to update the src of my iframe, with calculated fields from tally’s form, bypassing the redirected to a new page.

To provide some context, my app displays different Tally’s forms into an iframe loaded from an Airtable field into the inbox block. I am using Tally’s conditional logic, which is easy to implement with their GUI, to update the src of the iframe. However, I am facing issues with loading the inbox block with a custom script in JavaScript.

In my use case, I need to display different Tally’s forms in an iframe loaded from an Airtable field into the inbox block. Tally’s form allows for redirecting to a custom URL when the form is submitted. However, when I tried to implement the form in Softr, it redirects to a new page instead of updating the src of the iframe. To add to the complexity, I am also using Tally’s calculated fields to update the values of some fields based on the user’s inputs. As mentioned earlier, my use case requires me to only update the src of the iframe and not redirect to a new page.

I have tried different methods, but I am still struggling to implement the code suggested by the Tally community:

const data = JSON.parse(e.data);
data.payload.fields

window.addEventListener('message', (e) => {
if (e && e.data && e.data.includes('Tally.FormSubmitted')) {
// e.data also contains the form data
// redirect here
}
});

My script aims to streamline the process of displaying Tally’s forms into an iframe and updating the src of the iframe based on Tally’s conditional logic and the generated hidden calculated fields. I know calculated field will be available in the form data via e.data and fields is an array with all form data.

I would greatly appreciate it if someone from the Softr community could provide me with some guidance on how to implement this code or suggest an alternative solution.

Thank you in advance for your help.
Lea

[lea]

With the help of Chat-GPT I’m pretty well advanced, this code works

window.addEventListener('message', (e) => {
  if (e && e.data && e.data.includes('Tally.FormSubmitted')) {
    const data = JSON.parse(e.data);
    const fields = data.payload.fields;
    let rid = null;
    for (let i = 0; i < fields.length; i++) {
      if (fields[i].title === 'rid') {
        rid = fields[i].answer.value;
        break;
      }
    }
    if (rid) { // if rid is not null
      const theURL = `myURL${rid}`; // create the URL
      const iframe = document.getElementById('2');
      iframe.src = theURL; // update the iframe source with the URL
    }
  }
});

But an infinite loop starts, and chat GPT suggests to me that the iFrame Resizer library is being used on your page and that it is causing the infinite loop and the iframe update to disappear.

Chatgpt proposes to add this to the code

iframe.removeAttribute('data-iframe-auto-height'); // remove the iFrame Resizer attribute from the iframe
if (iframe.iFrameResizer) { // check if the iFrameResizer library is loaded
iframe.iFrameResizer.close(); // remove the iFrame Resizer from the iframe
}

but it doesn’t work, as a reminder the iframe code of tally has these attributes that make it dynamic in height:

<div style="text-align: center;"><iframe id="2" src="https://tally.so/embed/?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" width="100%" frameborder="0"></iframe></div>

Does a Softr expert (as @artur is) have an idea of how to fight against this infinite resize loop? To understand, when you click the code, it redirects the src of the iframe but suddenly everything disappears and the infinite loop starts

Thanks a lot

[artur]

Hi @lea have you considered removing dynamicHeight=1 from the url ? it’s helpful that IframeResizer tries to check and resize your iframe heigh but not sure you need it.

Also it might be just a debug message and nothing to worry.