Troubleshooting embedded typeforms
Embedding your typeform into your site helps you reach more respondents - and it looks pretty slick, too! Here, we’ve made a list of some tips to make sure your embed is working properly.
Please note that some of these tips are aimed at users who are comfortable editing their website code - you may want to have a programmer colleague on hand, just in case! You can also check out our developer FAQs on this topic for more information.
- My embed isn't displaying on the page
- I see a connection error ("form.typeform.com refused to connect") on my embedded form
- My embed isn’t displaying correctly / My embed overlaps with other elements of my page
- My embedded typeform is only showing an empty white square
- I can’t see my typeform’s start button
- I want to hide the scrollbar in my embed
- I want to remove the top padding from my embed
- My embedded typeform displays as a full-screen pop-up on mobile
- I want to enable autofocus on my typeform
- I'm using an iframe and don't want my form to autofocus
- How can I display a full-screen video in an embedded typeform?
- My side tab/popover embed is displaying below site content
My embed isn’t displaying on the page
First, check that the embed code you’re using matches the code provided by Typeform. This is important for making sure that your embed displays properly.
If you’re using a code embed plugin, try embedding the code directly on the page, and check if any other plugins on the page might be preventing the form from displaying properly.
You’ll also want to make sure that the display size is large enough for the form to show properly. We recommend an embed height of at least 500px.
We don’t encourage making edits to the embed CSS and HTML, because these can cause unexpected display problems. For example, a common issue occurs when the embed CSS is modified to take 100% of the height of the parent container, instead of a set height of 500px or above. If the parent container is small or doesn’t have a size, the form will look too small on the page or won’t display at all (100% of 0 is 0). Our team unfortunately can’t provide troubleshooting for custom code.
The graphic below shows the trouble you might run into when an embedded form’s CSS uses relative height, instead of a set height in pixels.
Having other display problems? This page of technical troubleshooting tips may be helpful!
If you’re still experiencing issues, please reach out to us and we’ll help as soon as possible.
I see a connection error ("form.typeform.com refused to connect") on my embedded form
This may be because your domain uses HTTP. Typeforms can only load on a secure HTTPS domain, so you’ll need an SSL certificate to load the form.
My embed isn’t displaying correctly / My embed overlaps with other elements of my page
First, check the z-index values across the page. For the modal modes (popup, drawer_left, and drawer_right) and mobile devices (which always display typeforms as modals), we use a default z-index of 1000. Set the z-indexes for elements on your page according to whether you want them to appear over or under the typeform modal.
Additionally, make sure that the CSS positioning of the elements is correct. We can’t give positioning recommendations because this can vary widely from site to site, depending on how the web developer has designed the site and configured the CSS. It’s a good idea to note absolute, relative and fixed positioned elements on your page and make sure that your form follows the page positioning rules.
If you suspect that positioning can be the cause of this issue, we recommend this MDN tutorial to quickly walk through it.
My embedded typeform is only showing an empty white square
This is very common for users embedding the form in a CMS such as Wix, WordPress, or Squarespace, but it can also happen in hard-coded websites. This image gives a stylized view of how the error might look:
I can’t see my typeform’s start button
This may be related to the embed height. Increasing the height to more than 500px may fix the problem. If not, please reach out to us here.
I want to hide the scrollbar in my embed
Since the embedded typeform is essentially an embedded webpage, the scrollbar can’t be removed. You can use a wrapper in CSS to hide the scrollbar from view, but keep in mind that our team cannot offer troubleshooting for this and other custom code.
I want to remove the top padding from my embed
Typeforms show questions as vertically centered, so the padding between the question and the top of the embed frame cannot be removed.
Two possible solutions are decreasing the embed height, so that the height of the padding is also decreased. You can also draw attention to your embedded typeform by using a background that fills in the padding space by featuring your organization’s logo or another image near the top of the frame.
My embedded typeform displays as a full-screen pop-up on mobile
We display embedded typeforms as full-screen pop-ups on mobile by default to improve user experience. These pop-ups contain a placeholder start screen with the name of the typeform and a launch button.
You can override the pop-up with a small edit to your site code. Find where your embed is located in the code. After the "data-tf-live" attribute, add the snippet "data-tf-inline-on-mobile". Your code should look something like this:
<div data-tf-live="ABCDEF" data-tf-inline-on-mobile></div>
This will show your typeform as an inline embed on mobile. The placeholder start screen will no longer appear - instead, respondents will see your typeform's Welcome Screen, if it has one.
I want to enable autofocus on my embedded typeform
By default, embedded typeforms are not automatically focused on your website page. This means that page visitors will be able to view the full content of your page, and then begin interacting with the embedded typeform when they feel ready to. (The exception to this is typeforms that are embedded in Popup, Slider, Popover, or Side Tab mode. These will autofocus as soon as they are launched, including if they are launched when the page is loaded.)
To enable autofocus on your typeforms, locate your embed code within your site code. Add the snippet "data-tf-auto-focus" after the "data-tf-live" attribute in your embed code. Your code should look something like this:
<div data-tf-live="ABCDEF" data-tf-auto-focus></div>
This feature was released in September 2022, but applies to all embedded typeforms. If your typeform embed code predates September 2022 and includes a snippet deactivating autofocus, you do not need to remove the snippet for your embedded forms to load properly. If you choose to remove the snippet, however, worry not - your forms will not autofocus when visitors open your site.
I'm using an iframe and don't want my form to autofocus
Embedded typeforms using a custom iframe, instead of Typeform's embed code, will autofocus when the page they are embedded on is loaded. To deactivate autofocus, add the following parameter to your iframe:
How can I display a full-screen video in an embedded typeform?
This is currently a feature request. For now, you can use an iframe instead of Typeform’s embed code, following this syntax:
<iframe height="500" width="900" src="<https://yoururl.typeform.com/to/uFSEFO>" allow="fullscreen"></iframe>
Replace the value in the src attribute with your own typeform URL.
My side tab/popover embed is displaying below site content
CSS incompatibilities between Typeform’s embed code and your site CSS could cause your side tab or popover embed to show underneath the site content, as shown in the image below.
Try the following steps to fix this problem:
- include the embed code at the very end of the page
- add a z-index property to the styling of the data-qa="side_panel" <div> element
- make sure the z-index value for the embed is higher than the other elements on the page (e.g., the header)
If you continue to experience the issue, reach out to Support using the button at the bottom of this page.