Embedding Forms

RapidForm provides multiple ways to share and embed your published forms. All embed codes are available in the form builder after publishing — click the Publish button or use the embed codes section.

Want to see these in action? Check out the live embed demos.

Direct Link

The simplest way to share a form. Each published form has a public URL:

https://rapidform.com/f/your-form-slug

Share this link via email, social media, QR codes, or anywhere else. The form opens as a full page with your theme applied.

Script Tag Embed

Add a single script tag to your page and it automatically creates an iframe with your form:

<script src="https://rapidform.com/embed.js"
        data-form="your-form-slug"></script>

The script creates a responsive iframe that:

• Loads the form in a sandboxed environment
• Auto-resizes to match the form content height
• Requires no additional configuration

Script + Placeholder Div

If you need to embed multiple forms on the same page, or want more control over placement, load the embed script once and use placeholder divs:

<!-- Load the script once -->
<script src="https://rapidform.com/embed.js" defer></script>

<!-- Place forms anywhere on the page -->
<div data-rapidform="your-form-slug"></div>
<div data-rapidform="another-form-slug"></div>

This approach avoids loading the script multiple times and lets you place forms in specific locations in your HTML.

Modal Popup

Open your form in a centered modal overlay triggered by a button, link, or JavaScript call. The modal includes a backdrop, close button, and auto-closes after submission.

Button Trigger

Renders a styled button that opens the form in a modal when clicked:

<script src="https://rapidform.com/embed.js"
        data-form="your-form-slug"
        data-mode="button"
        data-label="Contact Us"
        data-color="#2563eb"></script>

The button uses your form's theme button color by default. Override it with data-color. Customize the label with data-label.

Placeholder div version:

<div data-rapidform="your-form-slug"
     data-mode="button"
     data-label="Contact Us"
     data-color="#16a34a"></div>

Link Trigger

Renders a text link instead of a button:

<script src="https://rapidform.com/embed.js"
        data-form="your-form-slug"
        data-mode="link"
        data-label="Get in touch"
        data-color="#2563eb"></script>

Placeholder div version:

<div data-rapidform="your-form-slug"
     data-mode="link"
     data-label="Get in touch"></div>

Custom Styling

Both button and link triggers support custom styling. Add a class or style attribute to the placeholder div, and the trigger inherits the parent's styles instead of using defaults:

<!-- Tailwind classes -->
<div data-rapidform="your-form-slug"
     data-mode="link"
     data-label="Contact"
     class="text-gray-600 hover:text-gray-900"></div>

<!-- Inline styles -->
<div data-rapidform="your-form-slug"
     data-mode="button"
     data-label="Get Started"
     style="color: white; background: #e11d48; padding: 12px 24px; border-radius: 8px;"></div>

When no custom styling is provided, buttons use the data-color value (or blue #2563eb by default) and links appear as blue underlined text.

JavaScript API

For full control, use the JavaScript API to open a form modal programmatically. Load the embed script first, then call RapidForm.open() from any event handler:

<script src="https://rapidform.com/embed.js" defer></script>

<button onclick="RapidForm.open('your-form-slug')">Open Form</button>

Available methods:

This is useful when you want to trigger the form from a custom button, navigation link, or after a specific user action.

Modal Behavior

• Closes when clicking the backdrop, pressing Escape, or clicking the X button
• Auto-closes 2 seconds after successful form submission
• The form auto-resizes within the modal to fit its content
• Pre-filling fields works with all modal modes (see Pre-filling Fields)

See the live demo page for working examples of button, link, and custom-styled modal triggers.

Embed Attributes Reference

Manual Iframe Embed

If you prefer full control, embed the form directly with an iframe:

<iframe src="https://rapidform.com/embed/your-form-slug"
        width="100%"
        height="600"
        frameborder="0"
        style="border: none;">
</iframe>

Note that with a manual iframe, auto-resize is not available unless you add a listener for the rapidform:resize message event:

window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'rapidform:resize') {
        document.querySelector('iframe').style.height = e.data.height + 'px';
    }
});

Auto-Resize

The script tag and placeholder div methods include built-in auto-resize. The embedded form communicates its height to the parent page using postMessage, and the iframe height adjusts automatically as the form content changes (e.g., when conditional fields appear or disappear, or when validation errors are shown).

Stateless Embed System

The embed endpoint (/embed/your-form-slug) is specifically designed for cross-origin embedding. It operates without cookies or sessions, which ensures compatibility with browsers that restrict third-party cookies (notably Safari).

Instead of session-based CSRF protection, the embed system uses signed URLs:

• A signed submit URL is generated when the embed loads, valid for 24 hours.
• Form data is submitted directly to this signed URL.
• No authentication cookies are needed.

This architecture means your embedded forms work reliably across all browsers and hosting environments.

Post-Submission Events

When a form is successfully submitted, the embed sends a rapidform:submitted message to the parent window. You can listen for this to trigger custom behavior:

window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'rapidform:submitted') {
        // Form was submitted successfully
        console.log('Form submitted!');
    }
});

Custom Domains

If you have a custom domain configured (Business plan), your embed codes automatically use your custom domain instead of the default RapidForm domain. See Custom Domains.