Embed Methods

WittyForm supports four embed styles, each suited to a different experience. Open a form, click Share, then Embed, and pick a style. The dialog generates a ready to paste snippet. Every snippet is self contained: it is either a plain iframe or a small inline script that creates an iframe. There is no external SDK to load.

Inline (iframe)

The simplest style. The form renders directly in the page flow where you place the snippet.

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

Attributes

URL parameters

The form also detects when it is running inside an iframe and switches to embed layout automatically, hiding the page chrome so it sits cleanly on your site.

Popup Modal

Adds a button to your page that opens the form in a centered modal overlay. Good for lead capture and surveys. The snippet is fully self contained.

<!-- 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/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>

Clicking the button opens the modal. Clicking the dark overlay outside the form closes it.

Slider Panel

Adds a button that slides the form in from the right edge of the screen. Good for a persistent feedback or contact panel.

<!-- 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);';
    var frame = document.createElement('iframe');
    frame.src = 'https://wittyform.com/form/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);
  };
  document.currentScript.parentNode.insertBefore(btn, document.currentScript);
})();
</script>

The panel slides in from the right when the button is clicked, and closes when the overlay beside it is clicked.

Full Page

Renders the form across the full viewport. Ideal for a dedicated form landing page.

<!-- WittyForm Full Page Embed -->
<div style="position:fixed;inset:0;z-index:9999;">
  <iframe
    src="https://wittyform.com/form/FORM_ID?embed=1"
    style="width:100%;height:100%;border:none;"
    allow="camera; microphone"
    loading="lazy"
  ></iframe>
</div>

You can also link people straight to the hosted form URL, which already fills the page:

https://wittyform.com/form/FORM_ID

Append URL parameters to pre-fill fields or pass tracking values.

Responsive sizing

Every embed style is responsive. The form adapts to the container width on desktop, tablet, and mobile. For the inline iframe, set width="100%" and give it a height tall enough for your form. The popup, slider, and full page snippets size themselves with the values baked into the snippet.

Camera and microphone permissions

If your form includes file upload fields that capture directly from a device camera or microphone, keep the allow attribute on the iframe:

allow="camera; microphone"

If your form does not use those, you can leave the attribute off without affecting anything else.