Prerequisites

The.com BasicsElement Attributes

Intro

Start by creating a Typeform account or logging into your account. Select the form you want to embed from your dashboard or create a new form.

Make sure that your form is published before continuing.

Getting the Embed Code

To get the embed code, navigate to the "Share" tab in your form editing page.

There are a few different embed options including Standard, Full-page, Popup, Slider, Popover, Side tab. Each style of form is illustrated by Typeform, so choose whichever one you like.

After choosing an embed style, click "Get the Code" and copy it.

Adding the Code to The.com

Implementing the code on your site will differ depending on if you chose the standard style; the full-page, popover, or side tab style; or the pop-up or slider style. 

The only difference between these three methods is where the embed code goes on your page.

Standard

Create a Raw HTML Element where you want your form to appear. Then, paste the code in its Text attribute. Since the code snippet contains a script, you will need to refresh the site preview to see the form load.

You can nest this Raw HTML Element in a containing Element to fit the form in your site's layout. By default, the form's width will be 100% of its container.

Full-page, Popover, and Side Tab

These embed styles will create a full-screen version of the form on your page when it is loaded. Create a Raw HTML Element anywhere on your Page Sheet. Its position doesn't matter since it will appear on top of other Elements.

Paste the code in the Text attribute. You'll notice that it loads this time without having to refresh. This is because the code contains an iFrame, not a script.

Popup and Slider

These options will render a button that will display the form in full-screen mode when clicked. 

Create a Raw HTML Element wherever you want this button to appear. Then, paste the code into the Text attribute and refresh the site preview so the script is loaded.