Embed on Website

Add your Orbit AI forms directly to your website using our embed codes.

Getting Your Embed Code

1Open your form in the dashboard
2Go to the Share tab
3Select 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.

HTML

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

HTML

<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

Popup / Modal

Open your form in a modal overlay, triggered by a button click or other event.

HTML

<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}/contact?email=user@example.com&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

Did this answer your question?