> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useorbitcrm.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

**1. Open your form**

Open your form in the dashboard

**2. Go to Share**

Go to the Share tab

**3. Copy embed code**

Select your embed type and copy the code

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

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>
```

> [card] Best for
>
> * Inline forms on landing/demo pages
> * Maximum reliability across browsers
> * Static sites, Webflow, WordPress

> [card] 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.

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

> [card] Features
>
> * Auto-resizing
> * Popup / slider / sidetab support
> * Event callbacks
> * Pre-fill support

> [card] Data Attributes
>
> * `data-orbit-form`: form slug
> * `data-orbit-team`: team ID
> * `data-orbit-embed`: popup | slider
> * `data-orbit-height`: custom height

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

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.

> [!NOTE]
>
> For detailed setup instructions for Webflow, WordPress, Squarespace, and more — see the [Embed Script documentation](https://docs.useorbitcrm.ai/developers/embed.md).

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

> [card] [Embed Script Reference](https://docs.useorbitcrm.ai/developers/embed.md)
>
> Full API reference, popup setup, and platform guides

> [card] [Submissions](https://docs.useorbitcrm.ai/guides/submissions.md)
>
> View and manage responses


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.