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.

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"
        defer></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.

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.