Embed your typeform

Related to:

Want to share your typeform on your website? Head to Share and you will see there are three ways to do so – as a popup, a standard embed, or a full page embed.

Below we explain how to use our embed features:

Log in to your Typeform account, open the typeform you want to embed, click on the Share panel, then Embed in a web page:

Highlighted above you can see the three main embedding options, Standard, Full page and Popup.

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, labelled 1.

You can change embed settings in the menu at 2. Choose the height and width of your typeform, and you can also choose to activate Seamless mode.

This is designed to make typeforms look even better embedded in your site.

Turning Seamless mode on gives you three more options.

Background 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. You can remove this if you want, simply toggle the On button.

If you have a Basic account, you will see a small ‘Create your own typeform’ button at the bottom of your embedded typeform:

You can remove this with a PRO+ account, which allows you to remove Typeform branding.

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 block. 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 from 3. Simply paste this into your web page code to embed the typeform.

Full page embed


Click on Full page and you can see how your typeform will look, and grab the code below. We don’t currently offer any settings for full page embedding. Here’s an example.

Popup


In 1 you can see a preview of how your popup will appear. The menu here allows you to edit what kind of launch button users will see.

You can edit the text, font size and color. The Border radius slider allows you to give the button more or less rounded corners:

Click Convert to text link to show text instead of a button. You can still choose the text, font size and color here:

Click Launch Pop-up 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 change more in the Settings menu at 2.

With Popup mode, you can choose a standard popup, or a drawer that slides in from the left, or the right.
You also have the options to hide the header and footer, as described above.

Lastly, there’s Close after submit. This is a PRO+ feature. 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.

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 for 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.

If you have knowledge of HTML and JavaScript, follow these guidelines for custom embedding.

Embed your typeform in an email

The good news is that we know a trick we can share with you to create an email that looks as if the typeform was embedded:

  1. Take a screenshot of the Welcome screen (or any screen of the typeform you’d like to be displayed),
  2. insert it into the email,
  3. then link the image to the typeform.

This way, people will tend to click on the Welcome screen button in the image, and sure enough, they’ll be redirected to the typeform – that will open in a new web browser tab.

The following articles describe how you can embed your typeform on your Facebook page, Tumblr, etc.:

Hidden Fields with embedded typeforms

Embedding a typeform using Hidden Fields? Check out our guide here for more details: Hidden Fields with embedded typeforms.

Was this article helpful?
Thanks!