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!!
Best answer by mathio-tf
Hello
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.
+5Hi
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!
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!
+5Got it, thanks! Could you try embedding the form onto your site directly instead of using shortcode,
Yes that would be a possibility, but how would I show Dutch users my Dutch Typeform and English users the English Typeform then?
+6
just a thought
+5
https://fiks.nl/voor-bedrijven
As you can see it still jumps to the Typeform.
Do you guys have any other ideas perhaps?
+5Hello
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.
Hi
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!
+5You 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>
+5Thanks for the help,
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?
+5<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.
+5Hello
<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
+5Thanks
+5Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.