IFrame A Public Form And Close It On The Form Submission

In this guide, we will share an example of iFrame a public formyoula form and close the iframe on the form submission.

Example codes:

Use this iFrame HTML code to add the form to the landing page.

<iframe
  id="formyoula_form_iframe"
  frameborder="0"
  height="700px"
  width="100%"
  src="https://survey.formyoula.com/online_v5/64802e62d1386b001952ac04"></iframe>

Note: Please update this link with your public form link.

Script to include in the landing page.

// Listen for messages from the iframe window
window.addEventListener('message', function(event) {
  // Check if the received message is 'close_iframe'
  if (event.data === 'close_iframe') {
    // Find the iframe element with the ID 'formyoula_form_iframe'
    const iframe = document.getElementById('formyoula_form_iframe');
    // Hide the iframe by setting its display property to 'none'
    iframe.style.display = 'none';
  }
});

Script to redirect to the thank-you page and close the iFrame.

// Send a message to the parent window to request the closure of the iframe
window.parent.postMessage('close_iframe', '*');

You can redirect your public form to another form to show thank you page and close the iFrame.

Create a new form:

Drag and drop a Paragraph and a JavaScript field. Set the thank-you message in the Paragraph field.

Click the pencil icon of the Javascript field. And paste the code to close the iframe.

Please use this code.

window.parent.postMessage('close_iframe', '*');

Create a public link for this form. Copy this link.

Go to the public connection of your main form. And paste that copied link here to Redirect the form as shown below.

Now when you submit the iFrame. It will redirect you to the thank you page and will close the iFrame.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂