1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Troubleshooting embedded typeforms

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

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.

These 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.

embedtips1.png

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:

embedtips2.png

Make sure that the Typeform JavaScript portion of the embed code is enabled in your CMS and running. If your embedded typeform uses the page space but shows a white background, that means that the HTML element has loaded but the script, which makes our forms look nice and fancy, has failed. Most likely, you will see an error like this in your console:

embedtips3.png

If you cannot load the script, you can use a plain iframe as a workaround. Keep in mind, however, that will limit the options you have in Typeform’s embed panel: you’ll only be able to load a standard embed, and won’t be able to take advantage of additional embed formats, custom launch options, or other features that require Javascript code provided by Typeform.

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-widget" attribute, add the snippet "data-tf-inline-on-mobile". Your code should look something like this:

<div data-tf-widget="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 disable autofocus on my typeform

In many cases, embedded typeforms are automatically focused on your website page. Typeforms that are embedded as standard embeds and that do not have a Welcome Screen do not have automatic focus on the first question. However, the typeform will be focused once the respondent has answered the first question. 

To disable autofocus on your typeform entirely, locate your embed code within your site code. Add the snippet "data-tf-disable-autofocus" after the "data-tf-widget" attribute in your embed code. Your code should look something like this: 

<div data-tf-widget="ABCDEF" data-tf-disable-autofocus></div>

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.

Please note that this option currently only works with a standard, inline embed format. You won’t be able to take advantage of additional embed formats, custom launch options, or other features that require Javascript code provided by Typeform.

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.

embedtips4.jpeg

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.

Tap into our community knowledge

Find Answers
Contact Support