> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orbitforms.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed on Website

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

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

### Getting Your Embed Code

<Steps>
  <Step title="Open your form">
    Open your form in the dashboard
  </Step>

  <Step title="Go to Share">
    Go to the Share tab
  </Step>

  <Step title="Copy embed code">
    Select your embed type and copy the code
  </Step>
</Steps>

## Embed Types

### Standard Embed (iframe)

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

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.

```html theme={null}
<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>
```

<CardGroup cols={2}>
  <Card title="Best for" icon="check">
    * Inline forms on landing/demo pages
    * Maximum reliability across browsers
    * Static sites, Webflow, WordPress
  </Card>

  <Card title="Trade-offs" icon="lightbulb">
    * Fixed height (no auto-resize)
    * No popup / slider / sidetab modes
  </Card>
</CardGroup>

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

```html theme={null}
<div data-orbit-form="your-form" data-orbit-team="your-team-id"></div>
<script src="https://orbitforms.ai/embed.js"></script>
```

<CardGroup cols={2}>
  <Card title="Features" icon="check">
    * Auto-resizing
    * Popup / slider / sidetab support
    * Event callbacks
    * Pre-fill support
  </Card>

  <Card title="Data Attributes" icon="code">
    * `data-orbit-form`: form slug
    * `data-orbit-team`: team ID
    * `data-orbit-embed`: popup | slider
    * `data-orbit-height`: custom height
  </Card>
</CardGroup>

### Popup / Modal

<Note>
  **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.
</Note>

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.

```html theme={null}
<!-- 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.

#### Script-based popup (legacy)

If you need auto-resize, event callbacks, or slider/sidetab/popover modes, use the script embed instead:

```html theme={null}
<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.

<Info>
  For detailed setup instructions for Webflow, WordPress, Squarespace, and more — see the [Embed Script documentation](/developers/embed).
</Info>

## Pre-filling Fields

You can pre-fill form fields using URL parameters:

```
orbitforms.ai/r/{team-id}/contact?email=user@example.com&name=John
```

## Form Events

Listen to form events using CustomEvents to trigger custom actions:

```javascript theme={null}
// 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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Embed Script Reference" icon="code" href="/developers/embed">
    Full API reference, popup setup, and platform guides
  </Card>

  <Card title="Submissions" icon="chart-bar" href="/guides/submissions">
    View and manage responses
  </Card>
</CardGroup>