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

Userlevel 7
Badge +5

Hi @lexieb First, thank you for the detailed post! This is super helpful and clear!
 

The downside is that you’d need to use Javascript to set the direction of the redirect URL. I’m afraid there isn’t a way to do this without scripts, only using HTML. Do you happen to have any other workarounds within the e-learning platform that would allow you to use scripts? Or, if you don’t mind sharing what platform you’re using, I’m happy to poke around their help center to find out. :grinning:

Userlevel 2
Badge +1

Thanks so much, Liz! It’s Articulate Rise 360 – they do have a robust community as well: https://community.articulate.com/forums/rise-360

Thank you! 

Editing to add: we are specifically using Articulate’s Rise product and not their Storyline product. Storyline does allow for lots of Javascript but we’ve opted to stick with Rise for other reasons. I did find this thread where people reported being able to manually edit the JS inside an exported Rise course – we’re not planning on exporting our Rise content to host elsewhere, but hosting directly on Rise itself so we wouldn’t have access to modify this file. :( But I will connect with their support as well if we don’t dig anything up.

Userlevel 2
Badge +1

If this is impossible, a workaround I thought of is just to use the Ending screen and include a “see how others responded” link rather than using the redirect. It opens the results page in a new tab which is suboptimal from a UX perspective but is better than redirecting the entire parent page. :) 

@Liz do you know if it’s possible to set a button link on the ending page to open in a new tab? If it can’t, then I’ll plan to hide the button and just use a regular hyperlink in the body.

Userlevel 7
Badge +5

Thank you @lexieb ! I used their Rise product for kicks and giggles once, so while I’m not super familiar with it, I have some general knowledge! I saw the following comment in a different thread: 

Hi Mike, we found that after you publish your Rise lesson, you can manually add js into the index.html file.  That worked for us!

Do you have access to this file? If so, it’s quite easy to separate the script portion of the code from Typeform without affecting your entire course (or I hope, I haven’t personally tried). 

 

Userlevel 2
Badge +1

Thanks @Liz – I added a little update to my reply above and forgot to tag you in it! Unfortunately, we’re planning to host our content directly within Rise rather than exporting it to another platform so I don’t believe we have access to that JS file in the export package. :( However, this is a good lead – I will follow up with Rise’s support team to see if there’s a way to access that file without exporting. Thanks very much! 

Userlevel 7
Badge +5

@lexieb Let us know if they have any solutions/workarounds - it’d be handy to know. :grinning:

Userlevel 2
Badge +1

Will do! Thanks again for your help @Liz :)

Same problem for me too.  Within an iframe I am starting in Videoask, moving to typeform within the embed block in squarespace, works well with the “redirect_target=self” at the end of the URL from videoask to typeform.  However,  there isn’t a similar option when going from Typeform back to Videoask (Or any other system as per the original question above) so it makes switching between applications within an iframe (squarespace code block) impossible.  It give a poor Ux.  Open to suggestions or work arounds!

Userlevel 7
Badge +5

Hi @chrissparshott are you referencing the redirect URL within a Typeform? If so, @mathio do you have any solutions that might work for this? :grinning:

Userlevel 7
Badge +5

At the moment there is a possible workaround via onSubmit callback. However I am currently working on adding redirect target option to the embed SDK. I will let you know here once it is released.

Userlevel 7
Badge +5

Hello, this feature was released today. See README file for details.

To keep the redirect in iframe yo can use data-tf-redirect-target=”_self” (or redirectTarget: “self” for JS embed code) in your embed code.

Userlevel 1

Having trouble getting this to work with the following code on squarespace:

<div id="wrapperTF" data-tf-redirect-target=”_self”></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
  window.tf.createWidget('TYPEFORM_ID', {
    container: document.getElementById('wrapperTF'),
    onReady: () => {
      console.log('form ready')
    },
    onQuestionChanged: (data) => {
      console.log('question changed to ref:', data.ref)
    },
    onHeightChanged: (data) => {
      console.log(`height of question ${data.ref} changed to ${data.height}px`)
    },
    onSubmit: (data) => {
      console.log('forms submitted with id:', data.responseId)
      // to retrieve the response use `data.responseId` (you have to do it server-side)
      // more details: https://developer.typeform.com/responses/
    },
  })
</script>

Userlevel 7
Badge +5

Hello @bbakerma 

you are mixing 2 things here together. You can either use HTML API (pass options via data-tf-*) or JS API (pass options as object to “create” function).

In your case you need to define the redirectTarget in the object you pass to createWidget function like this:

<div id="wrapperTF"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
window.tf.createWidget('TYPEFORM_ID', {
container: document.getElementById('wrapperTF'),
// ...
redirectTarget: '_self', // pass the option here
})
</script>

 

Userlevel 1

Thank you!

Userlevel 7
Badge +5

Hey @bbakerma! Were you able to fix your code with squarespace? Let us know how it went! 😉 

Userlevel 1

Yes, worked perfectly!

Userlevel 7
Badge +5

Yay, amazing @bbakerma! Happy for you. Don't forget to send us your website with your form so we can take a look. We love giving feedback on different typeforms! 😊 Have a nice day!

Userlevel 1

We tested this with the Chat layout and it also works.

Userlevel 7
Badge +5

Oh, amazing @BrianHenson! Why don't you send us the link to your website so we can take a look at it and give you some feedback? 

Hi there! I’m trying use data-tf-redirect-target="_self" for a typeform I loaded in an iframe, however with redirect on completion, it’s still opening the redirect url in the parent tab instead of within the iframe. Could someone maybe help check what am I doing wrong?

Here’s how my iframe html looks:

<iframe data-tf-redirect-target="_self" class="iframe--cVFOH" src="myTypeformLink" title=”myTitle"></iframe>

Thank you!
 

Similarly - I’m not able to get this working correctly on any browser or mobile. Consistently redirects at the parent level. Any troubleshooting tips? The _self parameter looks correct in the HTML, and appears to be correct in the URL as well, but less correct there.

 

I’m experiencing the same issue, unfortunately.  

data-tf-redirect-target="_self"

in the iframe is still breaking out to parent.

Userlevel 7
Badge +5

@mathio might be able to help you with this!

Thanks! I’ve used iframe, html <div widget, and javascript embed approaches according to the embed guide. No problems getting the inline embed working and customized for all 3 approaches: just the can’t get the redirect to work. All target options seem to redirect the top/parent page (i.e. linking out to a new tab also does not work). This is in Google Chrome BTW - Version 114.0.5735.133 (Arm64). Can also open an issue on GitHub if helpful.

Userlevel 7
Badge +5

Hello @goasts 

thanks for reporting this. Can you please provide full embed code you are using? I will have a look.

Reply