Embed in Your Website

Embed your form directly into any webpage — choose from four display types depending on where and how you want the form to appear.

Getting the Embed Code

Publish your form

Click Publish in the top-right corner of the form editor.

Open the embed dialog

Click Share, then select Add to website.

Choose an embed type

Select Standard, Popup, Full screen, or Slider from the Embed type dropdown.

Configure options

Set button text, color, size, and position as needed — the preview panel updates in real time. Toggle between Desktop and Mobile to check both layouts.

Get the code

Click Get the code and paste the generated <script> tag into your webpage.

Standard

Embeds the form inline at the exact position where you place the code. The form is always visible as part of the page — no trigger needed.

Use Standard for dedicated landing pages, sign-up sections, or any location where the form should be the main focus.

<script src="https://formhug.ai/f/YOUR_FORM_ID/embedded.js?inner_redirect=false&banner=show&height=600"></script>

The height query parameter controls how tall the embedded form appears on the page. Adjust it to match your form’s length — short forms typically need 400–500px; longer forms need 700px or more. Opens the form in a centered overlay when triggered. By default a floating button appears on the page; turn it off to use your own element as the trigger.

<script async src="https://formhug.ai/f/YOUR_FORM_ID/embedded.js"
  data-formhug-id="YOUR_FORM_ID"
  data-formhug-type="popup"
  data-formhug-button-text="Open Form"
  data-formhug-button-color="#1677ff"
  data-formhug-button-size="small"
  data-formhug-floating="true"
  data-formhug-floating-position="bottomRight"></script>

Attribute	Description
`data-formhug-button-text`	Label shown on the trigger button
`data-formhug-button-color`	Background color of the button (hex)
`data-formhug-button-size`	`small`, `medium`, or `large`
`data-formhug-floating`	`true` to show a fixed button; `false` to use a custom trigger
`data-formhug-floating-position`	Position of the fixed button: `bottomRight` or `bottomLeft`

When data-formhug-floating="false", add data-formhug-open to any element on your page to use it as the trigger — for example: <button data-formhug-open>Contact us</button>.

Full Screen

Opens the form as a full-viewport overlay, covering the entire page. Configuration attributes are the same as Popup.

<script async src="https://formhug.ai/f/YOUR_FORM_ID/embedded.js"
  data-formhug-id="YOUR_FORM_ID"
  data-formhug-type="fullscreen"
  data-formhug-button-text="Open Form"
  data-formhug-button-color="#1677ff"
  data-formhug-button-size="small"
  data-formhug-floating="true"
  data-formhug-floating-position="bottomRight"></script>

Slider

Slides the form in from the left or right edge of the page. Useful for keeping the page content visible while the form is open.

<script async src="https://formhug.ai/f/YOUR_FORM_ID/embedded.js"
  data-formhug-id="YOUR_FORM_ID"
  data-formhug-type="slider"
  data-formhug-button-text="Open Form"
  data-formhug-button-color="#1677ff"
  data-formhug-button-size="small"
  data-formhug-floating="true"
  data-formhug-floating-position="bottomRight"
  data-formhug-slider-side="right"></script>

Slider supports all the same attributes as Popup, plus one additional attribute:

Attribute	Description
`data-formhug-slider-side`	Which side the form slides in from — `left` or `right`

Platform Guides

WordPress

Embed in WordPress

Webflow

Embed in Webflow

Notion

Embed in Notion

Framer

Embed in Framer

Share Link

All sharing options including QR code, social, and AI poster

Lead Generation Guide

Learn how to structure and place forms that capture qualified leads

Builder

Scenes

Form Settings

Styling & Branding

Sharing & Publishing

Data & Analytics

Account

Embed in Your Website

Getting the Embed Code

Standard

Full Screen

Slider

Platform Guides

WordPress

Webflow

Notion

Framer

Share Link

Lead Generation Guide

​Getting the Embed Code

​Standard

​Popup

​Full Screen

​Slider

​Platform Guides

WordPress

Webflow

Notion

Framer

​Related

Share Link

Lead Generation Guide

Getting the Embed Code

Standard

Popup

Full Screen

Slider

Platform Guides

Related