How to Embed Typeform Forms on Your Website

beginner 8 min read Updated 2026-03-24

Quick Answer

Embedding Typeform forms is beginner-friendly and takes 5-15 minutes: log in to Typeform, publish your form, access the Share panel, select an embed type like inline or popup, generate and copy the code, then paste it into your website's HTML. Test over HTTPS for seamless integration with live auto-updates.

Get Typeform Deal → Partner

Try Typeform Full Typeform Review

Prerequisites

A published Typeform form
Access to your website's HTML editor
Basic HTML knowledge for code pasting

Step-by-Step Instructions

Log in and open your form

Log in to your Typeform account at www.typeform.com, select the form you want to embed from the dashboard, and ensure it is published by clicking the Share/Publish edits button in the top-right corner.

Access the Share panel

Once published, click the Share panel, usually on the right side or via the share icon, to open embedding options.

Select embed type

In the Share panel, click Embed in a web page to view options like Standard (inline), Full page, Popup, Slider, Popover, or Side tab. Choose your preferred type, such as Classic for basic or Advanced for customization.

Standard embed loads directly on your site; popups and sliders open on button click without leaving the page.

Configure embed settings

Toggle advanced settings like Auto-close (default: 5 seconds after submit), Auto-focus (opens on page load), button color, size, height, width, or opacity (e.g., data-tf-opacity="0"). Preview changes live in the center panel.

Set minimum height to 350px+ for full form display.

Choose website builder (optional)

Use the dropdown to select platforms like WordPress, Squarespace, Webflow, or Shopify for tailored instructions. Choose General embeds for custom sites.

Generate embed code

Click Start embedding (first time) or Apply changes to save settings. Name and save multiple embeds for reuse. Copy the generated HTML/JavaScript code snippet.

Embed codes auto-update with form changes—no repasting needed.

Paste code into general HTML site

Add a <div> container where you want the form, e.g.,

<div data-tf-widget="YOUR_FORM_ID" data-tf-hide-headers data-tf-hide-footer data-tf-opacity="0" style="width:100%;height:400px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Replace YOUR_FORM_ID with your form's ID. Paste below the div.

Use HTTPS; HTTP only on localhost.

Embed in WordPress

For embed code method: Type /custom HTML in the Editor, paste into Custom HTML block, toggle to Preview, and publish. Or install Typeform plugin via Plugins > Add New, type /typeform, select form, and embed.

Test and verify

Load your website page over HTTPS. The form appears seamlessly without leaving the site. Changes update live.

Check CSP headers if blocked.

Common Issues & Troubleshooting

Styling and responsiveness issues (inconsistent layout across devices)

Use CSS overrides sparingly; test on multiple devices. Stick to standard/widget modes and avoid custom embeds that break UX.

Partial form display with scrollbar (only shows part of form)

Set explicit height: 500px or higher (min 350px); use width:100%; height:100vh; for full viewport. Test percentage-based sizing.

JavaScript conflicts (form not loading or unresponsive)

Ensure no script conflicts; use lazy loading or memoized callbacks in React. Verify script src is //embed.typeform.com/next/embed.js.

Overlaps or load delays

Adjust z-index, add minimum heights (350px+), delay embeds, or use fallback detection for reliability.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Typeform website before purchasing.

Visit Typeform View Typeform Pricing