Want to share your typeform on your website? Head to Share and you’ll find three ways to do so – as a popup, a standard embed, or a full page embed.
To get started, log in to your Typeform account, open the typeform you want to embed, click on the Share panel, where you can see our embed options:
Above, you can see the three main embedding options: Standard, Full page, Popup and Slider.
1.
Standard embed
A standard embedded typeform will load in your website wherever you decide to put it. You can see a preview of your embedded typeform in the main panel on the right.
You can change the height and width of your typeform, and you can also choose to activate Seamless mode.
Clicking Get the code will generate your embed code, based on the settings you’ve chosen. Read on to find out about your embed options and settings.
Tips! If you move from the Share panel before clicking Get the code, you will lose your embed settings.
Warning! When someone views your site with an embedded typeform from a mobile browser, if you don’t have a Welcome Screen, they will see a Start screen. Clicking the start button will open the typeform. The text on the start screen is the name of your typeform:
Typeforms embedded in Full page and Popup mode will not have this Start screen added.
Seamless mode
This is designed to make typeforms look even better when embedded in your site, blending into the color scheme and design of your page.
Turning Seamless mode on gives you three additional embedding options:
Transparency
You can make your typeform background totally transparent, or opaque. Choose a value between 0% and 100%: 0% is totally opaque, and 100% is totally transparent. Use the slider to select your transparency
This GIF shows three subtly different transparencies. Try experimenting with your site!
Hide typeform footer
By default, a footer appears on your embedded typeform, showing the progress bar. Toggle the On button if you want to remove this.
Hide typeform header
The header appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice question. An example is highlighted below:
To disable this, just toggle the switch to On.
Once you’ve chosen your embed settings, you can grab the code by clicking Get the code. Simply paste this into your web page code to embed the typeform.
Warning! If you want to change any embed settings (such as the height or width of your typeform) after embedding your typeform, you have to copy the code again from here, then replace it on your site.
You can edit your typeform (adding or removing questions, changing design etcetera) without affecting this code.
2.
Full page embed
Click on Full page and you can see how your typeform will look, and grab the code from the panel beneath. There are no settings for full page embedding. Here’s an example.
3.
Popup and Slider
On the right you can see a preview of how your popup will appear.
The settings menu on the left lets you choose Popup mode. There’s a standard popup, or a slider that appears from the left, or right.
Here’s an example of each. Just click the link to see:
Next, you can edit the button people will see on your site.
You can edit the Text, Color, Font size, Border radius and Convert to text link.
Type whatever text you want next to Text, up to 24 characters, to change what appears on the button:
Click the Color dropdown to choose the color of your button. You can use the two color panels to choose manually, or enter a specific hex color code.
The Border radius slider allows you to give the button more or less rounded corners. 0% gives you squared edges, whereas 100% gives you semi-circular edges.
Here’s what it will look like at 0%, 50% and 100%:
Click Convert to text link to show text instead of a button. You can choose the text and font size using the slider. Remember, your text font is chosen in the Design tab:
Click Launch Popup automatically, and your typeform will launch as soon as your web page is opened. With this option activated, all other settings are unavailable:
You can also hide the header – usually displayed when you use a Question Group, and the footer of your typeform, which displays the progress bar. Here’s what you see with the header and footer enabled:
With the header hidden:
And both the header and footer hidden:
Lastly, there’s Close on completion. It allows you to set a timer for your popup typeform to automatically close, once a respondent hits the Submit button. In the above image, we have set it at 1 second.
When you’ve chosen your embed settings, simply click Get the code:
Now this window will pop up with your embed code. Just click Copy code to add it to your clipboard, and you can use it on your site.
Warning! Please use the exact code from this embed feature – we cannot guarantee typeforms will work correctly if you use your own custom embed code.
Text sizes for embedded typeforms
When you embed a typeform, our robots automatically resize the text to adapt to smaller spaces.
Depending on the space available, the text of a typeform will be shown in the following sizes: Large (default), Medium or Small.
The rules for determining different sizes are based on the following conditions:
- if width of typeform > 800px = Large
- if width of typeform < 800px = Medium
- if width of typeform < 550px = Small
- if height of typeform < 450px = Small
If you view your typeform on a mobile device, and you’re seeing a symbol prompting you to turn your screen, it is likely your typeform is embedded with too large a sizing to view on mobile. In this case, double check the width and height of the embed. To improve your experience on mobile, you may also want to check the content of the typeform and segment large amounts of text into smaller questions if possible.
Hidden Fields with embedded typeforms
Embedding a typeform using Hidden Fields? Check out our guide here for more details: Hidden Fields with embedded typeforms.
{[{article.replace}]}
{[{video.duration}]}