Signup
Signup
 
  1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Embed your typeform

Embed your typeform

Want to share your typeform on your website? Typeform includes several options for embedding in whatever format works best for you. This article covers embed modes and design options - to read about advanced embed options, click here.

Click a section name to jump to that section:

HC_Warning_ilu_cropped.png
Warning! Embedding typeforms on websites using the insecure and unencrypted HTTP protocol is not supported. Make sure to embed your form on an HTTPS website, where the data flow between the client and the server is secured by encryption. If you don't have an HTTPS website yet, you can obtain an SSL certificate from your hosting company.

To get started, log in to your Typeform account, open the typeform you want to embed, click on the Share panel, and then click Embed in a web page where you can see our embed options:

embed_your_typeform01.png

Above, you can see the six main embedding options: Standard, Full pagePopupSlider, Popover, and Side tab. (Front-end developers can also check out our Embed SDK.) You can toggle between each of these options in the Share panel until you decide which you'd like to try. 

Alternately, if your typeform hasn't been published yet, click Publish from the Create panel to view a pop-up menu with the same embedding options available on the Share panel. 

shareoptionsmini.png

HC_Note_new.png
Note! You don't have to re-embed an existing typeform when you make changes to it, but make sure to hit Publish so your updates show up in the embedded version.

Read on to learn more about each of the six embed options.

Standard embed

2023-03-15_14-31-33.png

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 center panel.

You can change the height and width of your typeform, and you can also choose to hide the header of Question Groups.

Click Start embedding to generate your embed code, based on the settings you’ve chosen. Read on to find out about your embed options and settings.

HC_BobRoss_ilu_cropped.png
Tips! If you move from the Share panel before you click Start embedding, you will lose your embed settings.

Transparency

You can make your typeform background totally transparent, or even 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 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 when you click the Start embedding button. Click Copy and simply paste this into your web page code to embed the typeform. If you're using Wordpress, Squarespace, Webflow, or Shopify to embed your typeform, you can select your website builder in the dropdown for specific embedding instructions.

embed_your_typeform02.png 

HC_Warning_ilu_cropped.png
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.

Full-page embed

2023-03-15_14-54-40.png

Click on Full-page and you can see how your typeform will look, then click Start embedding for the code. There are no settings for full-page embedding, although you can disable question headers. Here’s an example.

Popup 

emebd_your_typeform03.png

In the middle, you can see a preview of how your popup will appear. Click the Try me! button to see your popup in action.

The Design menu lets you edit your Popup's appearance:

Screenshot_2023-01-20_at_11.48.25.png

First, you can toggle the switch to embed your typeform as a chat.

Then, you can choose whether to use a Large, Medium or Small popup using the Popup size dropdown menu:

Screenshot_2023-01-20_at_11.57.01.png

You can then edit the Button text, Button color, Font size, Corner rounding, Rounded corners, and Hide header.

Type whatever text you want in the Button text field, up to 24 characters, to change what appears on the button:

Screenshot_2023-01-20_at_11.58.37.png

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.

Screenshot_2023-01-20_at_11.59.22.png

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 Change 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:

Screenshot_2023-01-20_at_12.03.42.png

You can choose to hide the header (only displayed when you use a Question Group). Here’s what you see with the header enabled:

Screenshot_2023-01-20_at_12.06.53.png

And with the header hidden:

Screenshot_2023-01-20_at_12.07.11.png

Slider

Here you can set everything detailed in the Popup section (see above), and also choose whether your typeform slides in from the right or the left of your site:

Screenshot_2023-01-20_at_12.08.29.png

Popover

In this mode, you can edit the popover button people will hit to open your typeform. Choose the button color to match your site and upload a custom icon if you want: 

Screenshot_2023-01-20_at_12.19.43.png

Side tab

For this mode, you can edit the tab text, which says Launch me by default. You can also add a custom icon.

Screenshot_2023-01-20_at_12.20.33.png

Grab your embed code

When you’ve chosen your embed settings, simply click the Start embedding button. Simply copy the code and paste it into your web page code editor. If you're using Wordpress, Squarespace, Webflow, or Shopify to embed your typeform, you can select your website builder in the dropdown for specific embedding instructions.

2023-03-15_15-04-29.png

HC_BobRoss_ilu_cropped.png
Tip: Typeform embed code typically contains the string data-tf. You can search for this string in your site code if you need to locate and remove the embed later on.
HC_Warning_ilu_cropped.png
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.

Advanced options

Read about advanced embed options, like custom launch options, in this article.

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 size 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? No problem! When you have Hidden Fields set up, they will automatically be included in your embed code. This article explains how to use them.

Embedded typeforms on mobile

By default, Typeform displays embedded typeforms on mobile as full-screen pop-ups to improve user experience. These pop-ups contain a placeholder start screen with the name of the typeform and a launch button.

You can override the pop-up with a small edit to your site code. After embedding the typeform, find the embed's location in the code. After the "data-tf-widget" attribute, add the snippet "data-tf-inline-on-mobile". Your code should look something like this:

<div data-tf-widget="ABCDEF" data-tf-inline-on-mobile></div>

This will show your typeform as an inline embed on mobile. The placeholder start screen will no longer appear - instead, respondents will see your typeform's Welcome Screen, if it has one.  

Tap into our community knowledge

Find Answers
Contact Support