Skip to main content
Answered

Google Chrome: Page gets scrolls to embedded typeform's position on load but only form mobile screens


On google chrome whenever the iframe is loaded the content of the page gets auto scrolled to the typeform’s position. It is working fine on Safari. Can anyone help?

Best answer by mathio-tf

Hello @jyoti_prakash and @prontotaco , I am happy to let you know that my colleagues have fixed the focus issue. The page no longer scrolls down to your embedded typeform when you use inlineOnMobile.

View original

23 replies

mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • November 16, 2021

Hello @jyoti_prakash 

this is actually one of typeform features to allow visitors of your website easier interaction with your embedded typeform (they don’t need to click into it, it is already focused).

If you want to disable this feature you can use embed option disableAutoFocus (if you are embedding using JavaScript) or data-tf-disable-auto-focus (if you use HTML snippet).

For example like this:

<div 
  data-tf-widget="<form-id>"
  style="width:600px;height:400px;"
  data-tf-disable-auto-focus 
/>

 


  • Author
  • Explorer
  • 4 replies
  • November 17, 2021
mathio wrote:

Hello @jyoti_prakash 

this is actually one of typeform features to allow visitors of your website easier interaction with your embedded typeform (they don’t need to click into it, it is already focused).

If you want to disable this feature you can use embed option disableAutoFocus (if you are embedding using JavaScript) or data-tf-disable-auto-focus (if you use HTML snippet).

For example like this:

<div 
  data-tf-widget="<form-id>"
  style="width:600px;height:400px;"
  data-tf-disable-auto-focus 
/>

 

Hi Mathio, I tried both “disableAutoFocus” and “data-tf-disable-auto-focus” but they didn’t work. 

Here’s how I am doing

 

<Widget

medium = {"inline"}

id={formId} style={{ width: '100%', height: `${height}px` }} className="typeform-widget"

disableAutoFocus={true}

/>


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

Do you happen to have an example website where this is happening? I can have a look for you.


  • Author
  • Explorer
  • 4 replies
  • November 17, 2021

Hi @mathio, here is a sample of what I am trying to do

https://codesandbox.io/s/winter-surf-hd3i0

https://hd3i0.csb.app/ (Open this URL and set device type to mobile)

See the below image for reference:

 

 

As soon as the page loads it gets auto scrolled to the bottom of the page where the embedded typeform is positioned. I am trying to fix this auto scroll issue. 


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

Yes, there seems to be a bug. I will check with related teams here in Typeform.

BTW you are modifying your widget URL from the outside of the embed lib. You should not do that. Instead have a look at the README file - there is a inlineOnMobile prop you can use. Unfortunately this does not solve the focus issue but it makes the code nicer and prevents possible issues in future.


  • Author
  • Explorer
  • 4 replies
  • November 17, 2021

Thanks @mathio. Will change it as you suggested.

So do you have any solution for me regarding the issue I mentioned? 


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

For now you could embed without inlineOnMobile to prevent the page scroll.

If you want to embed inline on mobile I am afraid you will need to wait for a fix from us 🙃 We will do our best, however I can not commit to an estimate right now.


  • Navigating the Land
  • 1 reply
  • November 17, 2021

I have the same problem. Tried the data-tf-disable-auto-focus as well with no fix. Here’s my link: https://tacostomorrow.s3.us-east-2.amazonaws.com/staging-prontotaco/home-typeform-test.html


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • November 19, 2021

Hello @jyoti_prakash and @prontotaco , I am happy to let you know that my colleagues have fixed the focus issue. The page no longer scrolls down to your embedded typeform when you use inlineOnMobile.


  • Author
  • Explorer
  • 4 replies
  • November 20, 2021

Thank you so much @mathio. :) 


Forum|alt.badge.img
  • Explorer
  • 6 replies
  • September 1, 2022

Hi,

My URLs (pocketaxis.com, theoryfish.digital) both have a Typeform embedded...different ones in each case. On loading the URL, the page then immediately jumps to my Typeform. There’s nothing in the URL bar to indicate the jump. 

I did try and change the custom URL on one of my Typeforms, but I think I changed it back, and in any event, it should not apply to both.

I cannot figure out why this is suddenly happening. Anyone have any suggestions?

Regards,

David


  • Explorer
  • 4 replies
  • September 1, 2022

I just wanted to make this post as well.

I have a bunch of articles with typeforms on them and now instead of being just an element on them that users eventually scroll to, on load the page goes straight to the typeform.

I think they updated something and this happened.


Forum|alt.badge.img

Hello, it seems this issue started to happen again with the typeform embedded forms. 

Is there any chance to turn the scrolling to the embedded forms off?

Thank you,

Honza


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14571 replies
  • September 6, 2022

Hi @Honza Kysely Could you share the URL where your form is embedded so we can take a look? Thanks!


Forum|alt.badge.img

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14571 replies
  • September 7, 2022

Thanks, @Honza Kysely ! I tested this on Safari on iPhone, but I’m not experiencing the issue. Which browser/device are you seeing this? 


Forum|alt.badge.img

MacBook Air + Dell computers / Google Chrome and Brave browsers - both doing the same. And we have the feedback from our clients as well - here I am not sure what device and browser they are using.


  • Navigating the Land
  • 2 replies
  • September 8, 2022

I am experiencing this bug, anyone solved it?
Page: https://sadjevpisarni.si/


  • Navigating the Land
  • 2 replies
  • September 8, 2022
Liz wrote:

Thanks, @Honza Kysely ! I tested this on Safari on iPhone, but I’m not experiencing the issue. Which browser/device are you seeing this? 

I am using Chrome.


Forum|alt.badge.img
  • Explorer
  • 6 replies
  • September 8, 2022

Hi,

I’ve had this problem for days now on all my sites with embedded forms. It’s the same on Chrome, Firefox & Brave.

Please take a look and let me know urgently. I have an important conference next week, and this will make me look unprofessional…

pocketaxis.com

David


john.desborough
Forum|alt.badge.img+6
  • Certified Partner & Champion
  • 5199 replies
  • September 8, 2022

@Dave K - you might want to raise a help ticket with Typeform Support at this link here, in order to get someone to look at your issue(s)


  • Navigating the Land
  • 1 reply
  • January 31, 2023

I am also having this issue via a private community on Circle. The ‘embed’ is a no-code integration with Circle, so I can’t add any additional code either.

 

Since it’s private, I can’t just link to the example here, but if someone wants to reach out, I can show someone the tech team. 

 

To be honest, I was this close to purchasing a plan with Typeform and making this my go to form for my community given it’s integration, but the lack of resolve on this issue after a few months and the fact many others are experience it makes me wary, so will probably default to a free option elsewhere. The jump-to feel unprofessional but more so it makes the posts in the community complete unreadable because you cannot scroll up past the integration in a post.  


I have the same problem as NatPW. Our form is embedded in a post in a private community in Circle. Because Circle uses an embedding tool, wherein we just enter in the form URL, I can’t edit the embed code by adding in an additional HTML class the way I would on a WordPress website. They limit embeds in this manner.

It’s annoying to have the page scroll down to a form that is intended to act as the final option when other troubleshooting options have been exhausted.