Skip to main content

Hi there, my embedded Typeforms at https://geoship.is have a redirect on submit, however, somehow they don't open in a new tab. Any suggestion on how to make this happen?

Hi @Bas Kools happy Friday! First, this is SO COOL!!! I’ll be stalking your page all day now. 

Second, how are you adding the form to your website? It doesn’t look like it’s on a Wix site, so we can rule out the usual issues that happen on Wix, thankfully. 

Tagging @mathio in case he happens to notice anything offhand. 

Hello @Bas Kools 

what a nice custom popup for displaying your typeform! I almost did not recognize it was a typeform 🤓

You can specify redirect target in your typeform embed. More details in the embed lib docs (look for redirectTarget) or in my blog article from earlier this year: https://medium.com/typeforms-engineering-blog/whats-new-in-typeform-embed-sdk-82de8c9977de#cd63

However if you specify target as _blank the redirect might be blocked by some browsers as an unwanted popup due to nature of technical solution.

Thanks all, this site was built with https://framer.com/, an excellent new tool for designing interactive websites without the need for coding!

And yes, sign up to stay tuned about radical sustainable, resilient, healthy, and affordable homes 🙂.

@mathio, this is great, however, could you give me an example of how the “_blank” is added to the embed code? Can I simply add this redirect code (data-tf-redirect-target=”_self”) after (data-tf-widget="E8tNFcwr")?

And, as you mention, if _blank is blocked in many cases, what are the other options to open a link in a new window?

This is my embed code, looking to see where to implement the “_blank” .

<!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8" />       <meta name="viewport" content="width=device-width, initial-scale=1" />       <title>Website Invest</title>       <style>*{margin:0;padding:0;} html,body,#wrapper{width:100%;height:100%;} iframe{border-radius:0 !important;}</style>     </head>     <body>       <div data-tf-widget="E8tNFcwr" data-tf-inline-on-mobile="true" id="wrapper" data-tf-opacity="100" data-tf-inline-on-mobile data-tf-iframe-props="title=Website Invest" data-tf-transitive-search-params data-tf-auto-focus data-tf-medium="snippet" data-tf-hidden="utm_source=,utm_medium=,utm_campaign=,utm_term=,utm_content="></div><script src="//embed.typeform.com/next/embed.js"></script>     </body>   </html>

 

Yes, you just add the attribute to your embed code like this you mentioned. For your embed code it will look like this:

<div data-tf-widget="E8tNFcwr" data-tf-inline-on-mobile="true" id="wrapper" data-tf-opacity="100" data-tf-inline-on-mobile data-tf-iframe-props="title=Website Invest" data-tf-transitive-search-params data-tf-auto-focus data-tf-medium="snippet" data-tf-hidden="utm_source=,utm_medium=,utm_campaign=,utm_term=,utm_content=" data-tf-redirect-target="_blank"></div><script src="//embed.typeform.com/next/embed.js"></script>

Your options for redirect are the same as for HTML <a> tag:

  • _self to redirect inside the iframe
  • _top to redirect in the topmost frame of the tab
  • _parent to redirect in parent frame (same as _top unless there are multiple nested iframes)
  • _blank to redirect in a new tab (this might be blocked the same way popup are by some browsers)

BTW did you know you can redirect to URL on submit, but also via button in you ending? And the redirectTarget attribute works for both.

 

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs