Embedding Forms

Embed your SendForm.live forms directly on your website so visitors can submit without leaving your page.

Getting the Embed Code

Open your form from the dashboard
Go to the Share & Embed tab
Copy the embed code provided

Web Component (Recommended)

The recommended way to embed forms is using our lightweight Web Component. It uses Shadow DOM for complete style isolation, ensuring your site's CSS never affects the form appearance.

<script src="https://sendform.live/embed.js" defer></script>
<sendform-embed form-id="YOUR_FORM_ID"></sendform-embed>

Benefits

Style isolation - Shadow DOM prevents CSS conflicts with your site
Automatic theming - Form colors are applied automatically
Lightweight - Single script, no dependencies
Responsive - Works on all screen sizes
Spam protection - Built-in Turnstile CAPTCHA and honeypot fields
No cookie banners - Clean embed without extra popups

Platform-Specific Instructions

WordPress

Add a "Custom HTML" block and paste both the script tag and the sendform-embed element. Make sure you're using the HTML editor, not the visual editor.

Webflow

Add an "Embed" element to your page and paste the full embed code including both the script tag and the custom element.

Squarespace

Add a "Code" block to your page. Paste the complete embed code with both the script and the sendform-embed element.

Wix

Use the "Custom Element" or "HTML Embed" option from the Add menu. Paste the complete embed code.

React / Next.js

For React applications, you can load the script dynamically and use the custom element:

import { useEffect } from 'react';

function FormEmbed({ formId }) {
  useEffect(() => {
    // Load the embed script if not already loaded
    if (!document.querySelector('script[src*="embed.js"]')) {
      const script = document.createElement('script');
      script.src = 'https://sendform.live/embed.js';
      script.defer = true;
      document.head.appendChild(script);
    }
  }, []);

  return <sendform-embed form-id={formId} />;
}

// Usage
<FormEmbed formId="YOUR_FORM_ID" />

Note: You may need to add type declarations for TypeScript projects.

iframe (Legacy Alternative)

If Web Components aren't supported in your environment, you can use an iframe instead. This method loads the full form page in a frame.

<iframe
  src="https://sendform.live/f/YOUR_FORM_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

Customizing the iframe

Height

Adjust the height attribute based on your form's length. Longer forms need more height. A good starting point is 500-600 pixels for a simple form.

Width

The default width="100%" makes the form responsive and fills its container. You can set a fixed width like width="600" if needed.

Direct Link Alternative

If embedding isn't possible, you can always share the direct link to your form. The link opens the form in a clean, standalone page optimized for submissions.

Troubleshooting

Form not loading

Check that the form ID is correct
Ensure the script tag is loading (check browser console for errors)
Verify your site allows external scripts in its Content Security Policy

Styles look wrong

The Web Component uses Shadow DOM for style isolation - your site's CSS should not affect it
If using iframe, ensure no CSS is targeting iframes globally

CAPTCHA not appearing

Cloudflare Turnstile loads dynamically when needed
Check that your site allows scripts from challenges.cloudflare.com
Some ad blockers may interfere with CAPTCHA loading

Help Center