We use our own and third-party cookies to show you more relevant content based on your browsing and navigation history. Please accept or manage your cookie settings below. Here's our cookie policy

Ready to build a website that does it all? 🏆 Get the free Webflow x Typeform ebook

here
Signup
Sign up
Log in
Sign up
  1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Troubleshooting embedded forms
Sharing, embedding & notifications

Troubleshooting embedded forms

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.

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.

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-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:

?disable-auto-focus=true 

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