Redirecting to new form within current popup | Community
Skip to main content
Question

Redirecting to new form within current popup

  • September 11, 2024
  • 5 replies
  • 53 views

Hi!

We have a setup where we first collect contact information through hidden fields. 

 

Right now, when the first form is completed it opens up the second form on a complete new page. We would like the second form to be in the same ‘window’ (either popup or slider) to not interrupt the user experience.

 

I have read the following post:

https://community.typeform.com/build-your-typeform-7/redirecting-to-a-form-but-wanting-it-as-a-popup-not-full-screen-8932

 

and github documentation: https://github.com/Typeform/embed/tree/main/packages/embed#redirect-target.

 

However when I insert the following on my webpage (Astro backend):

 

<div data-tf-live=FORM_ID data-tf-redirect-target="_self"></div><script src="//embed.typeform.com/next/embed.js"></script>
  • the first form opens op correctly
  • upon completion is goes back to the original page and the popup disappears
  • If i click again on the button to open the form, the second form appears instead of the first form

What I want is the second form to show up inside the popup of the first form, How would I achieve this

5 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15035 replies
  • September 11, 2024

Hi @Polars Would you mind sending the URL where you currently have the form embedded? 

Tagging @mathio for help as well!


  • Author
  • Explorer
  • 2 replies
  • September 11, 2024

Sure, the form is embedded on https://deploy-preview-64--chimerical-bavarois-1af1d5.netlify.app/  in the middle blue button ‘apply for early access’

 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • September 12, 2024

Hello @Polars 

you did set it up correctly, however are combining it with data-tf-auto-close which is not supported per docs:

If you set target to _self and also enable autoClose option the iframe with your redirect will be closed before users are able to interact with it.

 

You will need to disabled auto-close functionality if you want to use the redirect inside the same iframe.


  • Author
  • Explorer
  • 2 replies
  • September 12, 2024

Hi @mathio

Thank you so much that indeed solves the problem. One final question: when users now submit the second form it does a redirect within the iframe, ideally I want it to close the popup window all together and back to the page.

  • I have tried setting the AutoClose for the second form to true, but this does not seem to have effect.
  • I have tried removing the redirect URL all together, but then it shows an end screen

Thank you in advance

 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • September 17, 2024

I think you could try using the onSubmit callback if you have some JavaScript knowledge. It will be triggered once for each form. In the payload of the callback you can check formId to see which form is this submit event related to. You should be able to close the form, if you initialize the embed via JavaScript. Hope this helps.


Reply