Answered

Help! Redirect upon completion not working in iframe


Userlevel 2
Badge +1

Hello Typeformers, I’m hoping someone can help me with this. 

I’ve constructed a form that redirects on completion to a results page in order to show participants how others have responded (same use case as this thread and this one). I was able to do that successfully, yay! (demo here)

My added layer of complexity is I’m presenting this form within an iframe – it’s a part of an e-learning course, so the iframe will be within the learning management system. I include this detail because it does constrain the amount of customization I’m able to do on the display end – I’m able to include basic HTML but not custom scripting. 

Desired behavior: 

  • Upon form submission, the Typeform inside the iframe redirects to the results page, and the parent page containing the iframe is unaffected. 

Current behavior:

  • I’ve tried a bunch of different things including modifying the sandbox attributes on my iframe (thank you, 6 year old stackoverflow thread!), and the most success I’ve had so far is getting the entire parent page to redirect, which is not what I’m looking for. 

Could anyone provide advice on other things to try? Mainly I’ve been trying different configurations of the HTML on the embed side, are there other things I could try on the Typeform side? Thank you so much! 

---

For reference, the most basic of code that I tried first resulted in no redirect, just no activity inside the iframe upon form submission: 

<iframe src="https://lexie911319.typeform.com/to/yt5h3YeU"></iframe>

And the updated embed code that did work to redirect the parent page to the Typeform results page, which unfortunately is not the result I’m looking for – I’m hoping that it will redirect to the results page within the iframe:

<iframe src="https://lexie911319.typeform.com/to/yt5h3YeU" sandbox="allow-same-origin allow-scripts allow-top-navigation"></iframe>
icon

Best answer by mathio 17 February 2022, 13:16

View original

27 replies

<a id="mctajump"><div data-tf-widget="FORMID" data-tf-opacity="0" data-tf-hide-headers data-tf-iframe-props="title=Pluck Get To Know You (Free 10min call)" data-tf-transitive-search-params data-tf-medium="snippet" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js"></script></a>

Thanks! I’m currently using the above. When I add to that embed:

“data-f-redirect-starge=”_self”

Submit button just grays out and redirect does not occur.

When I use the iframe approach, the redirect on submission breaks out to parent. I’ll try to get back soon with  the iframe embed code later as a follow-up.

Userlevel 7
Badge +5

Thanks @goasts 

I dont know if this is just a typo in your post or you are using incorrect option - correct option is:

data-tf-redirect-target="_self"

Please note that the quotes in my previous post are not correct, as the community platform reformatted it incorrectly. You should use standard double quotes (not smart quotes as in my previous post).

Reply