Which Typeform ID do I need?
Typeform hands out two different identifiers for the same form, and they are not interchangeable. Using the wrong one in the wrong place is the single most common reason an embedded form shows something other than your survey.
Fullscreen Typeform accepts either, works out which you have given it, and renders it the right way. This article is for understanding what went wrong somewhere else, or what to paste into a tool that is fussier.
The two formats
Short public slug – six to ten mixed-case letters and digits, for example EDlIEX02. This is what appears in the form’s public share URL:
https://form.typeform.com/to/EDlIEX02Live embed ID – 26 characters, always starting 01, for example 01J0V2CQC5CD3H8ZG0AWJ4NW40. This is what Typeform’s own embed snippet uses:
<div data-tf-live="01J0V2CQC5CD3H8ZG0AWJ4NW40"></div>What works where
| Format | In a plain URL or iframe | With Typeform’s embed script |
|---|---|---|
| Short slug, EDlIEX02 | Yes | Yes, as data-tf-widget |
| Live embed ID, 01J0V2… | No | Yes, as data-tf-live |
The embed script’s two attributes are not interchangeable either:
| data-tf-live | data-tf-widget | |
|---|---|---|
| Live embed ID, 01J0V2… | Works | Builds a broken URL, see below |
| Short slug, EDlIEX02 | Renders nothing at all | Works |
So the attribute has to match the format. Fullscreen Typeform detects which one you pasted and picks the matching attribute for you.
The failure to watch for
If a live embed ID ends up in a /to/ URL, Typeform does not return an error. It redirects to its own marketing site:
https://form.typeform.com/to/01J0V2CQC5CD3H8ZG0AWJ4NW40
redirects to
https://www.typeform.com/explore?...&utm_content=typeform-incorrectURLYour visitor sees a Typeform advert with a Sign up free button, on your URL.
Because it is a redirect and not a 404, nothing looks broken. The page returns a perfectly healthy 200, your uptime monitor stays green, and your server logs show a normal request. The only symptom is that people who should be filling in your form are landing on Typeform’s signup funnel instead.
This is exactly what version 1.x of this plugin did with a modern form ID: it always built a /to/ URL from whatever you gave it. If you are on 1.x and using an ID from Typeform’s Embed dialog, update to 2.0.0 and the same ID will work.
Finding the right one
To get the short slug, open your form in Typeform, use Share, and copy the public link. The slug is the last part of the URL.
To get the live embed ID, use Share, then Embed, and copy the snippet. The ID is the value of data-tf-live.
Other symptoms
A blank space where the form should be. Usually a short slug being used with data-tf-live, which renders nothing. In this plugin, it more often means no form ID is set at all: check the page’s own Typeform field and the site default.
The form loads but is very short, or scrolls oddly. That is a height problem, not an ID problem. See Adding a Typeform to an existing page.
The form works but has no styling of its own. Typeform controls the form’s appearance entirely. The plugin controls only what surrounds it: the logo bar, the background colours and the layout.
Comments