Choosing a layout for your Typeform
Fullscreen Typeform has four layouts. They differ in one thing: how much of your own site stays on screen around the form. This guide covers what each one is for, and when not to use it.
Set the site-wide default at Super Speedy > Fullscreen Typeform, and override it per page in the Fullscreen Typeform box on the page editor.
Full screen, nothing else
The form fills the whole window. No header, no footer, no navigation, no logo.
Use it when the page has exactly one job and you want nothing competing with it: a paid ad landing page, a QR code destination, a link in an email campaign.
- Pages people arrive at from your own navigation, since there is no way back to your site
- Anything that needs your cookie banner or consent UI to be visible
- Forms where visitors may want to check your pricing or terms before answering
Full screen with your logo on top
A slim bar carrying your logo, with the form filling everything below it. This is the one most people want.
It keeps the focus of full screen while telling the visitor whose form they are filling in, which matters for trust when the form asks for contact details. The logo links back to your home page, so there is a way out without a full navigation bar.
The bar uses the logo from Appearance, Customise by default, so it usually needs no setup. You can point it at a different image, change its height, centre it, and set the bar and page background colours.
If your logo is a pale image designed for a dark header, set the Logo bar colour to match your brand’s dark shade. On the default transparent background a white logo is invisible.
Your theme renders the page completely normally, with its real header, navigation and footer, and the form sits full width between them.
This is no longer literally full screen, which is the point. Use it when the form is part of your site rather than a destination in its own right, and when visitors are likely to want to browse elsewhere afterwards.
Normal page width, in the content
The theme renders the page normally and the form sits in the content column at a height you choose, like any other block.
Use it when the form needs surrounding context: an explanation above it, terms below it, or a form that is one part of a longer page.
Every layout loads Typeform’s embed script, which is third-party JavaScript. Putting a form on a page that is already heavy adds to its load time. A form on its own dedicated URL keeps that weight off your main pages entirely.
Which to pick
| If you want | Use |
|---|---|
| Maximum focus, no distractions | Full screen, nothing else |
| Focus, but the visitor should know it is you | Full screen with your logo on top |
| The form to feel part of the site | Site header and footer, form in between |
| Text around the form | Normal page width, in the content |
A note on heights
Only the normal width layout takes an explicit height, set in pixels on the settings screen. The two full screen layouts always fill the viewport, and the header and footer layout sizes itself against the viewport with room left for your theme’s chrome.
There is no way to make a layout size itself exactly to your theme’s header and footer, because their height is not knowable in CSS. If your header is unusually tall and the form feels cramped, use the normal width layout with a height you choose instead.
Common mistakes
Choosing a layout but not the template. The first three layouts only apply to pages using the Fullscreen Typeform page template, chosen under Page Attributes. Setting the layout alone does nothing.
Expecting the block to honour the layout. The block and shortcode always render at normal width. That is deliberate, since they sit inside a page the theme is already rendering.
Comments