Skip to main content
Add your Orbit AI 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)

The simplest way to embed your form. Just paste the iframe code where you want the form to appear. 
<iframe
  src="https://orbitforms.ai/r/{team-id}/your-form?embed=true"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

Best for

  • Simple integrations
  • Static websites
  • Quick setup

Considerations

  • Fixed height required
  • Limited responsiveness
  • No auto-resize

​
JavaScript Embed

Recommended — The JavaScript embed automatically resizes to fit your form content and provides the best user experience.
<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 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
Open your form in a modal overlay, triggered by a button click or other event. 
<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>

​
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

​
Next Steps

Submissions

View and manage responses

Integrations

Connect your tools