Answered

Page Jumps to Typeform Automatically

  • 11 August 2021
  • 42 replies
  • 1697 views

Userlevel 1
Badge +2

Hi all,

 

Thanks in advance for your help. I’m kind of new to web dev, so maybe someone here knows how to tackle this. I put up my Typeform on my page in order for them to download our One Pager:

https://fiks.nl/voor-bedrijven/

As you will notice, the page automatically jumps to the box in which they can type their name. 

Do you know how to tackle this? 

If you enter that page it should load normally and not jump to the Typeform.

 

Thanks!!

icon

Best answer by mathio 16 August 2021, 10:29

View original

42 replies

We’re not currently using multiple embeds on a single page. Are you seeing something different?

We have the same problems with autofocus sice a couple of days. found this thread and tried what @mathio wrote

  • - generate new embeded code - didn’t work
  • - if i add the attribute data-tf-disable-auto-focus in the embeded code the whole design is changing.

so, this is our original design (we use typeform for our productfinders - in german language).

 

 

and after insert the attribute, the design looks this way:
 

ok. now i need help. is there any clue i can make? change the attributes, if i create the embeded code or is there an other attribute for disable auto focus?

and yes! the autofocus is disabled. but...

Userlevel 7
Badge +5

@AlexfromA1 the different form UI you see is chat UI because you most likely have data-tf-chat in your embed code.

@PopmenuEB  @sueb_13 @AlexfromA1 @almightyhogan I am told the issues with autofocus are resolved now. The issue with embed displaying the entire host page in the iframe was fixed too. It was caused by conflict with older version of embed lib (only when you used both embed v0 and v1 in single page). If you have the embed lib installed locally in your project you will need to upgrade to latest version, otherwise the fix should be automatic.

Hi guys, today we discovered the described problem on all pages where we have included Typeform. Some days ago the problem didn’t exist. Although I have cleared the cache, the page automatically jumps to the form, even if I haven't started filling it out yet. Using data-tf-disable-auto-focus changed nothing. 

We embed our Typeform via the new library (data-tf-widget).

Important: The affected Typeforms don’t have a start-button. Another Typeform with a start page doesn’t has that problem but this is no option for all of our Typeforms. 

Help please! 

Userlevel 7
Badge +6

@redTomato - just thought/recommendation if you have not done this already: raise a ticket with Typeform Support - they may be able to troubleshoot this faster than this community.. two vectors of support are better than one. 

Userlevel 7
Badge +5

Hi @redTomato were you able to reach our support team? 

Hey there, I followed all the steps and read this community thread entirely but I’m still having the same issue on my page: https://www.sporteasy.net/fr/brands/nerf-sponsoring/

 

Is there any way to avoid the Typeform auto focus by adding some script on the side somewhere on my site? The data-tf-disable-auto-focus isn’t working in my embedded code at the moment. 

 

FYI: this page was created using the Divi theme in Wordpress.

 

Thanks for your help!

Userlevel 7
Badge +5

Hello @Michael Sfdn , you have a typo in your embed code. The attribute you used is data-tf-disable-autofocus, however the correct one should be as you posted here data-tf-disable-auto-focus (note the extra dash).

Hi, @mathio

I am still observing the page jump on my site. Here’s the embed code:

On the first page load, a jump does not occur. If I refresh the page, however, it does occur. Please advise on how to proceed.

<div data-tf-widget="..." data-tf-disable-auto-focus data-tf-opacity="0" data-tf-hide-headers data-tf-iframe-props="title=Do you think you can make it?" data-tf-medium="snippet" style="width:100%;height:800px;"></div><script src="https://embed.typeform.com/next/embed.js"></script>

 

Userlevel 7
Badge +5

Hi @tumbleshack 

I was unable to replicate your issue with my form (Cqrg7cgL). Can you please share your form as well? Might be form-specific issue. Also, what browser & device are you experiencing the issue in?

Userlevel 1
Badge +2

Hi, I started this whole thread and with the help earlier I got it fixed. But the problem is back, so please let me know how to fix this. I don’t see any solutions in the rest of the answers in this thread. It also is not a form specific issue for @tumbleshak, as I am experiencing the same thing here.

Any solutions?

 

The page: fiks.nl/voor-bedrijven

The code: 

<div data-tf-widget="yi6OxjpL" data-tf-opacity="100" data-tf-chat data-tf-disable-auto-focus style="width:100%;height:300px;"></div><script src="//embed.typeform.com/next/embed.js"></script>


 

Userlevel 7
Badge +5

@mathio do you happen to know if anything changed that would affect the previous solution? 

Userlevel 7
Badge +5

If you embed as chat, this is a known issue. A ticket to fix this has been prioritized with the responsible team.

Has this been fixed yet? i’m experiencing the same issue but if it persists i’m going to have to use a differnet solution as this is having a negative impact on our site

Userlevel 7
Badge +5

Hello @illyb this has been fixed recently.

Typeforms embedded as chats will not focus automatically unless you add data-tf-auto-focus attribute to your embed code (or { autoFocus: true } option for JS embeds).

Here is my article on this change and why it was done: https://mathio28.medium.com/widget-auto-focus-in-embed-sdk-8e0c0584b57

Hey! I am also having this issue. 

 

When you go to my site https://covedesignstudio.co/

 

I am not familiar with code, so the instructions to add more code in is confusing. Where would you add it?

 

<div data-tf-widget="fq2w8ay5" data-tf-opacity="0" data-tf-hide-headers data-tf-iframe-props="title=Cove Studio Contact" data-tf-transitive-search-params data-tf-auto-focus style="width:80000%;height:500px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

 

It skips the initial homepage and refreshes to the type form down the bottom. Your advice would be appreciated! 

Userlevel 7
Badge +5

Hi @covestudios 

some time ago we actually changed the default behavior to disable auto focus. However your code has data-tf-auto-focus attribute in it which enables the behavior. Just remove that part from your code and it should be resolved.

If you would like to read a bit more on the topic, please see my article on Medium:
https://mathio28.medium.com/widget-auto-focus-in-embed-sdk-8e0c0584b57

Reply