Embed Types Reference

WittyForm offers four embed methods to display forms on your website. Each method suits different use cases. Every method is a self contained snippet that loads your form in an iframe, so there is no script library to install and nothing to keep up to date. Generate any of these snippets from the Share > Embed tab on your form, then paste the code into your page. This reference covers the code each method produces and when to use it.

1. Inline Embed

The inline embed places your form directly within the page content using an iframe. The form appears as part of the page layout, flowing with surrounding content.

Basic Code

The Share > Embed tab generates an iframe snippet pointed at your form URL with the ?embed=1 flag, which renders the form without the standard hosted page chrome. Set the width and height in the tab, or edit them directly in the snippet:

<iframe
  src="https://wittyform.com/form/YOUR_FORM_ID?embed=1"
  width="100%"
  height="500px"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="camera; microphone"
  loading="lazy"
></iframe>

The iframe uses a fixed height. Set the height to comfortably fit your form, or wrap the iframe in the responsive container below. For very long forms, the form scrolls inside the frame.

Responsive Container CSS

To center the form and add side padding on small screens, place the iframe inside a container <div id="wittyform-container"> and apply:

#wittyform-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;           /* Side padding on mobile */
}

@media (max-width: 640px) {
  #wittyform-container {
    max-width: 100%;
    padding: 0;              /* Full-bleed on small screens */
  }
}

Iframe Attributes

2. Popup Embed

The popup embed displays your form in a centered modal overlay. The background is dimmed, and the form appears in a floating panel. This is ideal for lead capture forms, newsletter signups, and any form that should not take up page real estate until triggered.

Embed Code

The popup snippet is fully self contained. It adds a button to the page, and clicking it opens your form in a dimmed, centered overlay. Clicking outside the form closes it. Paste this where you want the button to appear:

<!-- WittyForm Popup Embed -->
<script>
(function() {
  var btn = document.createElement('button');
  btn.textContent = 'Open Form';
  btn.style.cssText = 'padding:12px 28px;background:#18181b;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;';
  btn.onclick = function() {
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;';
    overlay.onclick = function(e) { if(e.target === overlay) overlay.remove(); };
    var frame = document.createElement('iframe');
    frame.src = 'https://wittyform.com/form/YOUR_FORM_ID?embed=1';
    frame.style.cssText = 'width:90vw;max-width:640px;height:80vh;border:none;border-radius:12px;background:#fff;';
    frame.allow = 'camera;microphone';
    overlay.appendChild(frame);
    document.body.appendChild(overlay);
  };
  document.currentScript.parentNode.insertBefore(btn, document.currentScript);
})();
</script>

To trigger the popup from your own button instead of the one the snippet adds, replace the button creation with a click handler on your existing element that runs the same overlay code. The overlay uses a z-index of 9999. If your site has elements stacked above that, raise the overlay value to clear them.

3. Slider Embed

The slider embed displays your form in a panel that slides in from the left or right edge of the screen. A floating trigger button remains visible on the page, and clicking it opens the slider panel.

Embed Code

Like the popup, the slider snippet is self contained. It adds a button to the page; clicking it slides a panel in from the right edge with your form inside. Clicking the dimmed background closes the panel. The panel is 420px wide on desktop and up to 90% of the viewport on small screens:

<!-- WittyForm Slider Embed -->
<script>
(function() {
  var btn = document.createElement('button');
  btn.textContent = 'Open Form';
  btn.style.cssText = 'padding:12px 28px;background:#18181b;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;';
  btn.onclick = function() {
    var overlay = document.createElement('div');
    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:9999;';
    overlay.onclick = function(e) { if(e.target === overlay) overlay.remove(); };
    var panel = document.createElement('div');
    panel.style.cssText = 'position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;z-index:10000;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,0.1);animation:wfSlideIn 0.3s ease;';
    var frame = document.createElement('iframe');
    frame.src = 'https://wittyform.com/form/YOUR_FORM_ID?embed=1';
    frame.style.cssText = 'width:100%;height:100%;border:none;';
    frame.allow = 'camera;microphone';
    panel.appendChild(frame);
    overlay.appendChild(panel);
    document.body.appendChild(overlay);
  };
  var style = document.createElement('style');
  style.textContent = '@keyframes wfSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}';
  document.head.appendChild(style);
  document.currentScript.parentNode.insertBefore(btn, document.currentScript);
})();
</script>

To slide in from the left instead, change right:0 to left:0 on the panel and flip the keyframe to translate from -100%. To open the panel from your own button, attach the same click handler to your existing element.

4. Full Page Embed

The full page embed links directly to a hosted WittyForm page where the form fills the entire browser window. No embedding code is needed: you just link to the URL.

URL Structure

https://wittyform.com/form/YOUR_FORM_ID

With a custom slug:

https://wittyform.com/form/customer-feedback

With a custom domain (Enterprise):

https://forms.yourdomain.com/form/customer-feedback

Query Parameters

Styling

The full page form inherits its own theme settings configured in the Design tab. The page background, fonts, colors, and layout are all controlled from the editor. No additional CSS is needed.

Cross-Origin Considerations

• WittyForm forms are allowed to load inside an iframe on any domain, so the embed snippets work wherever you paste them.
• If your site uses a strict Content-Security-Policy, add frame-src https://wittyform.com to your CSP header.
• The embedded form auto saves a respondent's in progress answers in the browser's localStorage on the same device. This is per device and does not sync across browsers.
• Camera and microphone access inside the iframe requires both the allow="camera; microphone" attribute on the iframe and the respondent granting browser permission.