Feedback
Solved

Page Jumps to Typeform Automatically

  • 11 August 2021
  • 28 replies
  • 361 views

Userlevel 1
Badge +1

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

28 replies

Userlevel 7
Badge +5

Hi @david.internative Welcome to the community! Thanks for sharing the URL - really helpful. 

I noticed the section where the Typeform is added has a CSS class applied to it. If you have any custom coding pointing to this section, would you mind removing it? 

Additionally, if you could send a screenshot showing how you’re adding the code to your site, that would be really helpful!

Userlevel 1
Badge +1

Hey! Thanks so much for the quick response.

 

There was something pointing at it. I got rid of that for now, but it’s not the solution to the problem.

 

Here’s the screenshot. It is added via a shortcode.

The shortcode is written in PHP:
 

add_shortcode( 'cta-typeform-company-page', 'wpc_shortcode_cta_typeform_company_page' );
function wpc_shortcode_cta_typeform_company_page() {
$current_language = get_locale();
if ( $current_language == 'nl_NL' ) {
return 
<<<HTML
<div class="cui-embed" style="height: 300px; width: 100%;" data-cui-uid="yi6OxjpL" data-cui-avatar="https://images.typeform.com/images/VqBNUBeep9Vw" data-cui-mode="widget" data-cui-pill-button-color="#0000FF" data-cui-transparency="100"></div><script src="https://public-assets.typeform.com/confab/embed.js" async></script>
HTML;
} else {
return 
<<<HTML
<div class="cui-embed" style="height: 300px; width: 100%;" data-cui-uid="EbEAMqJf" data-cui-avatar="https://images.typeform.com/images/VqBNUBeep9Vw" data-cui-mode="widget" data-cui-pill-button-color="#0000FF" data-cui-transparency="100"></div><script src="https://public-assets.typeform.com/confab/embed.js" async></script>
HTML;
}

}

We have written this in a shortcode, because in Typeform there’s no way to distinguish between Dutch and English visitors on the website. So we coded it like this that English users see the English Typeform and Dutch users see the Dutch Typeform.

I also see that it takes like 2 seconds, then it jumps to the Typeform. Maybe something with Lazyload?

Any other suggestions on how to fix this would be great!
 

Thanks!
 

Userlevel 1
Badge +1

 

Userlevel 7
Badge +5

Got it, thanks! Could you try embedding the form onto your site directly instead of using shortcode, @david.internative ?

Userlevel 1
Badge +1

Yes that would be a possibility, but how would I show Dutch users my Dutch Typeform and English users the English Typeform then?

Userlevel 7
Badge +6

@david.internative - you could start with a simple typeform that asks for which language and then redirect to a second typeform based on their selection.. 

 

just a thought

Userlevel 7
Badge +5

@john.desborough  yes! That’s a great idea. 

@david.internative If you have a test page you can try the embed on, that will at least let us see first if this helps fix the issue or not. 

Userlevel 1
Badge +1

@Liz_S Ah yes, I tested this. It’s definitely not the shortcode’s fault. It’s the Typeform.

https://fiks.nl/voor-bedrijven

As you can see it still jumps to the Typeform.

@john.desborough thanks for this solution John! However, I think it’s bad UX if we have to let them choose their language first, because they already did with selecting their desired website language.

Do you guys have any other ideas perhaps?

Userlevel 7
Badge +5

Huh, that is strange. @mathio do you happen to have any idea what might be causing this? 

Userlevel 6
Badge +5

Hello @david.internative 

it looks like you are using an old embed code for your Chat embed. I’d suggest you get latest embed code from your share page, it should use our new embed lib

If the jump persists with the new code you can add data-tf-disable-auto-focus attribute to the code to explicitly prevent typeform from stealing the focus on load.

Userlevel 1
Badge +1

Hi @mathio 

 

Thanks! I embedded the new embed code, but still it jumps. I’m cannot code, so not sure how to add the attribute.

 

This is the embed code:

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

 

Where would I add “data-tf-disable-auto-focus”?

Thanks so much in advance!

Userlevel 6
Badge +5

You can add it as an attribute to the div element. In your case, the code will look like this:

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

 

Userlevel 7
Badge +5

Thanks for the help, @mathio !

Userlevel 1
Badge +1

Hi again, I tried it and unfortunately it still does not work…

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

Works on Safari but not on Chrome..

What else can I try? 

Userlevel 6
Badge +5

@david.internative there was a bug with disabling auto focus for HTML embed snippets (https://github.com/Typeform/embed/pull/372). It is fixed now and your embed code should work now.

Userlevel 1
Badge +1

@mathio your are the man. Works perfectly.Cheers! 

Userlevel 7
Badge +5

Thank you for the help, @mathio !!

@mathio  Either the same or something similar to this problem just started happening again in the last 48 hours, the embed code I’m using is:

<div data-tf-widget="ScY0Kmge" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

You can see it in action, jumping straight to the form, here: https://dreamsite.rocks/concord-qwery/test/

Thanks in advance for your help.

Userlevel 6
Badge +5

Hello @sueb_13 you can add data-tf-disable-auto-focus attribute to your embed code:

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

I think the previous behavior might have been a bug, the auto focus is typeform feature.

@mathio Adding that attribute works on this test html page - but I’m actually using elementor for my site and adding that code to the html block makes the embed do crazy things (it embeds the entire page in the form area).

Do you think this is also a bug that can be fixed?  Or is there a place where I can turn the auto focus off for the form?

I am having the same issue on our site - we have a react - Gatsby site that we have embeded the form in but the disable auto focus is not working. 

https://tableserviceappweb.web.app/

 

Any help would be amazing 

 

Having the same issue on all pages of our website as well. Have tried adding disable autofocus code and the problem still persists on Chrome. Nothing on Safari.

Our site: https://get.popmenu.com

Userlevel 6
Badge +5

@sueb_13 are you adding the embed code as HTML snippet when adding the typeform? Are you by any chance using both old and new embed code? We have had a similar issues reported when there are both old and new code on the same page. You can identify old code by having “data-url” attribute, new code has “data-tf-widget” attributes. If you are still using old code please upgrade to new code, you can get it from your share page.

@almightyhogan are you sure it is the typeform embed code doing this? I tried your embed code here and it seems to work without any issues: https://glitch.com/edit/#!/heartbreaking-bubbly-dance

@PopmenuEB you seem to be using old embed code. Please upgrade to new embed code, you can get it from your share page. Attribute data-tf-disable-auto-focus is valid only for new embed code.

Thanks @mathio -- when we use the new code it shows our entire website in the embed. Not just the typeform. Can you help with that? The autofocus issue was corrected using the line of code in the new snippet.

Userlevel 6
Badge +5

@PopmenuEB we are aware of this issue and working to resolve it. It happens if you use both old and new embed libs in one page. A quick fix for right now would be to embed using the new lib only.

Reply