Skip to main content
Embed your form directly into any webpage — choose from four display types depending on where and how you want the form to appear. FormHug embed types: Standard, Popup, Full screen, Slider

​
Getting the Embed Code

1

Publish your form

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

Open the embed dialog

Click Share, then select Add to website.
3

Choose an embed type

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

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

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. Standard embed type showing form inline within the page 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. Popup embed showing floating trigger button and overlay form 
<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>
AttributeDescription
data-formhug-button-textLabel shown on the trigger button
data-formhug-button-colorBackground color of the button (hex)
data-formhug-button-sizesmall, medium, or large
data-formhug-floatingtrue to show a fixed button; false to use a custom trigger
data-formhug-floating-positionPosition 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. Full screen embed showing form covering the entire viewport 
<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. Slider embed showing form sliding in from the right side of the page 
<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:
AttributeDescription
data-formhug-slider-sideWhich 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
Last modified on June 9, 2026