Features

Adding a Typeform to an existing page

Published · Last updated

The four layouts are for pages given over entirely to a form. When you want a form inside a page you already have, with your own copy around it, use the block or the shortcode instead.

Both render at normal content width, and both share the same code underneath, so they behave identically.

The Typeform block

In the editor, add the Typeform block. You will find it under Embeds, or by typing /typeform.

Paste your form ID, share URL or embed snippet into the field. The block tells you which form ID it resolved, so you know it took what you meant before you publish.

Two settings in the sidebar:

  • Typeform ID, share URL or embed code – leave blank to use the site default
  • Height – in pixels. Leave at 0 to use the default height from the settings screen

The block shows a placeholder in the editor rather than a live form. That is deliberate: a real Typeform inside the editor steals focus and scrolling, and the form is not what you are editing.

Did you know?

The block is rendered on the server, so nothing is baked into your page content but the settings. Change the default form in settings and every block that inherits it follows, with no re-editing.

The shortcode

For the classic editor, page builders, or a theme template:

[fullscreen_typeform id="01J0V2CQC5CD3H8ZG0AWJ4NW40" height="700"]

Both attributes are optional:

  • id – the form. Omit it to use the site default
  • height – in pixels. Omit it to use the default height

So the shortest useful form is just [fullscreen_typeform], which renders your default form at your default height.

In a PHP template, use echo do_shortcode('[fullscreen_typeform]');.

More than one form on a page

Both the block and the shortcode can appear as many times as you like on a page, each with a different form. The embed script is loaded once regardless.

The full screen layouts are one form per page by design.

Common mistake

Pasting Typeform’s own embed snippet directly into a Custom HTML block usually fails. WordPress strips script tags out of block content when the page is saved through the REST API, so the snippet’s loader never survives. The block and shortcode avoid this by loading the script properly through WordPress.

Choosing the height

Typeform’s own interface scrolls internally, so the form does not need to be tall enough to show everything at once. Somewhere between 600 and 800 pixels suits most forms. Too short and the question and its answer field compete for space on mobile.

The height applies at all screen sizes, with a minimum floor on small screens so the form never collapses to an unusable strip.

Troubleshooting

Nothing appears where the block should be. Check the form ID is set, either on the block or as the site default. If neither is set, editors see a note explaining that; visitors see nothing at all rather than a broken box.

The form shows a Typeform advert. You have a live embed ID being treated as a URL somewhere. See Which Typeform ID do I need?

Further reading

install, settings and your first page
the four full page layouts
the two identifier formats

Comments

▲
▼
1/1