Embed on Website

Add your OrbitForms forms directly to your website using our embed codes.

Getting Your Embed Code

Open your form

Open your form in the dashboard

Go to Share

Go to the Share tab

Copy embed code

Select your embed type and copy the code

Embed Types

Standard Embed (iframe)

Recommended — Pure HTML, no third-party script. Renders even when ad blockers, corporate firewalls, or strict CSPs would block scripts.

The most reliable way to embed your form. Just paste the iframe where you want the form to appear and pick a fixed height that fits your form.

<iframe
  id="orbit-form-inline-your-form"
  src="https://orbitforms.ai/r/{team-id}/your-form?embed=true"
  width="100%"
  height="600"
  frameborder="0"
  sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation"
  referrerpolicy="strict-origin-when-cross-origin"
  style="border:0;border-radius:12px"
></iframe>
<script>
  (function() {
    var iframe = document.getElementById('orbit-form-inline-your-form');
    if (!iframe) return;
    var origin;
    try { origin = new URL(iframe.src).origin; } catch (e) { return; }
    var loaded = false, fallback = null;
    window.addEventListener('message', function(e) {
      if (e.origin !== origin) return;
      var d;
      try { d = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; } catch (_) { return; }
      if (!d || typeof d.type !== 'string' || d.type.indexOf('orbit-') !== 0) return;
      loaded = true;
      if (fallback) {
        if (fallback.parentNode) fallback.parentNode.removeChild(fallback);
        fallback = null;
        iframe.style.display = '';
      }
      if (d.type === 'orbit-form-redirect') {
        var url = d.redirectUrl;
        if (typeof url === 'string' && url.length > 0 && url.length <= 2048) {
          var isHttp = url.indexOf('https://') === 0 || url.indexOf('http://') === 0;
          var isRelative = url.charAt(0) === '/' && url.charAt(1) !== '/';
          if (isHttp || isRelative) window.location.assign(url);
        }
        return;
      }
      if (d.type === 'orbit-form-resize') {
        var h = Number(d.height);
        if (isFinite(h) && h >= 200 && h <= 5000) iframe.style.height = h + 'px';
        return;
      }
      if (d.type === 'orbit-form-wheel') {
        var dy = Number(d.deltaY) || 0, dx = Number(d.deltaX) || 0;
        if (!isFinite(dy) || !isFinite(dx)) return;
        if (d.deltaMode === 1) { dy *= 16; dx *= 16; }
        else if (d.deltaMode === 2) { dy *= window.innerHeight; dx *= window.innerWidth; }
        dy = Math.max(-2000, Math.min(2000, dy));
        dx = Math.max(-2000, Math.min(2000, dx));
        window.scrollBy({ left: dx, top: dy, behavior: 'instant' });
      }
    });
    // If the form never responds, its origin may be blocked on this visitor's
    // network (web filter or browser extension) — show a fallback link
    // instead of a silent blank space.
    function arm() {
      setTimeout(function() {
        if (loaded || fallback) return;
        fallback = document.createElement('div');
        fallback.style.cssText = 'box-sizing:border-box;width:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px 24px;border:1px solid rgba(0,0,0,0.08);border-radius:12px;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;text-align:center';
        fallback.innerHTML = '<p style="font-size:15px;font-weight:600;color:#26251E;margin:0">This form couldn&#39;t be displayed</p><p style="font-size:13px;color:#6b7280;margin:0;max-width:380px;line-height:1.5">Your network or a browser extension may be blocking embedded content. You can still open it directly.</p><a href="' + iframe.src.split('?')[0] + '" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;margin-top:10px;padding:9px 18px;border-radius:8px;background:#26251E;color:#fff;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer">Open form in a new tab</a>';
        iframe.style.display = 'none';
        iframe.parentNode.insertBefore(fallback, iframe.nextSibling);
        try { console.warn('OrbitForms: embedded form did not load \u2014 ' + origin + ' may be blocked on this network.'); } catch (_) {}
      }, 8000);
    }
    if ('IntersectionObserver' in window) {
      var io = new IntersectionObserver(function(entries) {
        for (var i = 0; i < entries.length; i++) {
          if (entries[i].isIntersecting) { io.disconnect(); arm(); return; }
        }
      });
      io.observe(iframe);
    } else { arm(); }
  })();
</script>

Best for

Inline forms on landing/demo pages
Maximum reliability across browsers
Static sites, Webflow, WordPress

Trade-offs

Fixed height (no auto-resize)
No popup / slider / sidetab modes

JavaScript Embed

Loads the form via our embed script. Required for popup, slider, and sidetab modes; adds auto-resize, event callbacks, and pre-fill support. Use this when you need those features; otherwise the iframe embed above is more reliable.

<div data-orbit-form="your-form" data-orbit-team="your-team-id"></div>
<script src="https://orbitforms.ai/embed.js"></script>

Features

Auto-resizing
Popup / slider / sidetab support
Event callbacks
Pre-fill support

Data Attributes

data-orbit-form: form slug
data-orbit-team: team ID
data-orbit-embed: popup | slider
data-orbit-height: custom height

Recommended — Uses the native browser <dialog> element with inline JavaScript. No third-party script, so it can’t be blocked by ad blockers or strict CSPs.

Open your form in a centered modal when a button is clicked. Add the generated trigger class to any button or link to wire it up. Use a unique class per form if you have multiple popup embeds on the same page.

<!-- Use this button, or add class="orbit-popup-trigger-your-form" to your own button/link -->
<button class="orbit-popup-trigger-your-form">Open Form</button>

<!-- Paste this once on your page (anywhere in the body) -->
<dialog id="orbit-form-your-form" style="border:0;border-radius:16px;padding:0;width:540px;max-width:95vw;height:720px;max-height:90dvh;background:#fff;overflow:hidden;margin:auto;inset:0">
  <button type="button" onclick="this.closest('dialog').close()" ontouchstart="event.preventDefault();event.stopPropagation();this.closest('dialog').close()" ontouchend="event.preventDefault();event.stopPropagation()" aria-label="Close" style="position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,0.06);cursor:pointer;z-index:20;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent">&times;</button>
  <iframe src="https://orbitforms.ai/r/{team-id}/your-form?embed=true" sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation" referrerpolicy="strict-origin-when-cross-origin" style="width:100%;height:100%;border:0;display:block"></iframe>
</dialog>
<style>#orbit-form-your-form::backdrop{background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)}</style>
<script>
  (function() {
    var dialog = document.getElementById('orbit-form-your-form');
    if (!dialog) return;
    document.addEventListener('click', function(e) {
      var trigger = e.target.closest && e.target.closest('.orbit-popup-trigger-your-form');
      if (!trigger) return;
      e.preventDefault();
      if (dialog.open) return;
      dialog.showModal();
    });
    dialog.addEventListener('click', function(e) {
      if (e.target === dialog) dialog.close();
    });
  })();
</script>

The native <dialog> element handles the backdrop, escape-to-close, focus trap, and ARIA roles automatically. If you need auto-resize, event callbacks, or slider/sidetab/popover modes, use the script embed instead:

<div
  data-orbit-form="your-form"
  data-orbit-team="your-team-id"
  data-orbit-embed="popup"
  data-orbit-button-text="Open Form"
></div>
<script src="https://orbitforms.ai/embed.js"></script>

The team value is the first 8 characters of your team UUID, visible in the Share tab.

For detailed setup instructions for Webflow, WordPress, Squarespace, and more — see the Embed Script documentation.

Pre-filling Fields

You can pre-fill form fields using URL parameters:

orbitforms.ai/r/{team-id}/[email protected]&name=John

Form Events

Listen to form events using CustomEvents to trigger custom actions:

// Form submitted
document.addEventListener('orbitFormSubmitted', function(e) {
  console.log('Form submitted:', e.detail.slug);
  // Track conversion, show message, etc.
});

// Form loaded
document.addEventListener('orbitFormLoaded', function(e) {
  console.log('Form loaded:', e.detail.slug);
});

// Form resized (for layout adjustments)
document.addEventListener('orbitFormResize', function(e) {
  console.log('New height:', e.detail.height);
});

Responsive Behavior

Forms automatically adapt to fit their container. Here’s what to know about field layouts:

Half-Width Fields

Fields set to “1/2” width will display side-by-side when the embed container is 510px or wider. Below this width, all fields stack vertically for better mobile usability.

≥ 510px: Half-width fields appear side-by-side
< 510px: All fields stack vertically

Platform-Specific Guides

WordPress
Webflow
Squarespace
Shopify
React / Next.js

Building Forms

Building Scheduling

Sharing & Embedding

Workflows

AI Nodes

Sequences

Data & Analytics

Security

Team & Settings

Resources

Getting Your Embed Code

Embed Types

Standard Embed (iframe)

Best for

Trade-offs

JavaScript Embed

Features

Data Attributes

Pre-filling Fields

Form Events

Responsive Behavior

Half-Width Fields

Platform-Specific Guides

Next Steps

Embed Script Reference

Submissions

​Getting Your Embed Code

​Embed Types

​Standard Embed (iframe)

Best for

Trade-offs

​JavaScript Embed

Features

Data Attributes

​Popup / Modal

​Script-based popup (legacy)

​Pre-filling Fields

​Form Events

​Responsive Behavior

​Half-Width Fields

​Platform-Specific Guides

​Next Steps

Embed Script Reference

Submissions

Getting Your Embed Code

Embed Types

Standard Embed (iframe)

JavaScript Embed

Popup / Modal

Script-based popup (legacy)

Pre-filling Fields

Form Events

Responsive Behavior

Half-Width Fields

Platform-Specific Guides

Next Steps