Embedding Forms on Your Website

Choose from inline, popup, slide-in, floating button, or iframe embeds. Each method takes under a minute to set up.

Embed Methods

Inline Embed (Recommended)

Renders the form directly on your page as native HTML. Works everywhere, including strict CSP sites.

Popup Embed

Opens your form in a modal overlay. Triggered by button click, page load, scroll position, or exit intent.

Slide-in Embed

Slides up from the bottom-right corner. Less intrusive than a popup — great for lead capture and newsletter signups.

Floating Button

Adds a persistent button in the bottom-right corner. Clicking it opens a popup form.

iFrame Embed

Loads the form in an isolated frame with auto-resize. Simple but may be blocked by strict CSP sites.

Inline Embed

Paste this where you want the form to appear on your page:

<!-- SimpleFormCRM Embed -->
<div id="simpleform-YOUR_FORM_ID"></div>
<script src="https://simpleformcrm.com/embed.js"></script>
<script>
  SimpleFormCRM.init({ formId: 'YOUR_FORM_ID' });
</script>

Data-attribute alternative:

No JavaScript knowledge needed. Configure everything with HTML attributes:

<div data-sf-form="YOUR_FORM_ID" data-sf-type="inline"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

Full options:

SimpleFormCRM.init({
  formId: 'YOUR_FORM_ID',
  container: '#my-container',   // Custom container selector
  redirectUrl: 'https://yoursite.com/thank-you',
  hidden: {                     // UTM tracking & custom data
    utm_source: 'auto',         // 'auto' reads from URL params
    utm_medium: 'auto',
    utm_campaign: 'auto',
    custom_field: 'value'
  },
  onReady: function(data) { },  // Form loaded
  onSuccess: function(data) { },// Form submitted
  onError: function(err) { }    // Error occurred
});

Popup Embed

Opens your form in a centered modal overlay. Choose a trigger that fits your use case.

Button click (most common):

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="popup"
     data-sf-trigger="button"
     data-sf-button-text="Contact Us"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

Other triggers:

<!-- Open on page load -->
<div data-sf-form="ID" data-sf-type="popup"
     data-sf-trigger="load"></div>

<!-- Open after a time delay (3 seconds) -->
<div data-sf-form="ID" data-sf-type="popup"
     data-sf-trigger="time" data-sf-delay="3000"></div>

<!-- Open when user scrolls 50% down the page -->
<div data-sf-form="ID" data-sf-type="popup"
     data-sf-trigger="scroll" data-sf-scroll-percent="50"></div>

<!-- Open on exit intent (mouse leaves viewport) -->
<div data-sf-form="ID" data-sf-type="popup"
     data-sf-trigger="exit"></div>

JavaScript API:

<script src="https://simpleformcrm.com/embed.js"></script>
<script>
  SimpleFormCRM.popup({
    formId: 'YOUR_FORM_ID',
    trigger: 'button'
  });
</script>
<button onclick="SimpleFormCRM.open('YOUR_FORM_ID')">
  Contact Us
</button>

Slide-in Embed

A form panel that slides up from the bottom-right corner of the page. Less intrusive than a full-screen popup.

Button click:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="slidein"
     data-sf-trigger="button"
     data-sf-button-text="Get in Touch"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

Automatic triggers:

<!-- Slide in after 5 seconds -->
<div data-sf-form="ID" data-sf-type="slidein"
     data-sf-trigger="time" data-sf-delay="5000"></div>

<!-- Slide in when user scrolls 60% -->
<div data-sf-form="ID" data-sf-type="slidein"
     data-sf-trigger="scroll" data-sf-scroll-percent="60"></div>

<!-- Slide in on exit intent -->
<div data-sf-form="ID" data-sf-type="slidein"
     data-sf-trigger="exit"></div>

JavaScript API:

<script src="https://simpleformcrm.com/embed.js"></script>
<script>
  SimpleFormCRM.slidein({
    formId: 'YOUR_FORM_ID',
    trigger: 'time',
    delay: 5000
  });
</script>

// Or open/close programmatically:
SimpleFormCRM.openSlideIn('YOUR_FORM_ID');
SimpleFormCRM.closeSlideIn('YOUR_FORM_ID');

Floating Button

Adds a persistent floating action button (FAB) in the bottom-right corner of your page. When clicked, it opens a popup form.

Icon-only button:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="floating"
     data-sf-button-color="#8400FF"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

With label text:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="floating"
     data-sf-button-text="Contact Us"
     data-sf-button-color="#8400FF"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

JavaScript API:

<script src="https://simpleformcrm.com/embed.js"></script>
<script>
  SimpleFormCRM.floating({
    formId: 'YOUR_FORM_ID',
    buttonColor: '#8400FF',
    buttonText: 'Contact Us'
  });
</script>

iFrame Embed

The iframe automatically resizes to match your form's content height. Include our embed.js script to enable auto-resize.

<iframe
  src="https://simpleformcrm.com/forms/YOUR_FORM_ID"
  width="100%"
  height="500px"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Contact Form"
></iframe>
<script src="https://simpleformcrm.com/embed.js"></script>

Note: iFrames may be blocked by Content Security Policy (CSP) headers. If your form doesn't appear, switch to the inline or popup embed.

UTM Tracking & Hidden Fields

Pass marketing attribution data and custom values with every form submission. Set a value to "auto" to read it from the page URL automatically.

SimpleFormCRM.init({
  formId: 'YOUR_FORM_ID',
  hidden: {
    utm_source: 'auto',
    utm_medium: 'auto',
    utm_campaign: 'auto',
    utm_content: 'auto',
    utm_term: 'auto',
    landing_page: window.location.href
  }
});

Or with data attributes:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="inline"
     data-sf-hidden='{"utm_source":"auto","utm_medium":"auto"}'></div>
<script src="https://simpleformcrm.com/embed.js"></script>

Redirect After Submission

Send users to a thank-you page, booking calendar, or any URL after they submit.

SimpleFormCRM.init({
  formId: 'YOUR_FORM_ID',
  redirectUrl: 'https://yoursite.com/thank-you'
});

Or with data attributes:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="inline"
     data-sf-redirect-url="https://yoursite.com/thank-you"></div>

Auto-Close After Submission

Automatically close popup, slide-in, or floating button forms after a successful submission. The success message shows briefly before closing.

<!-- Auto-close after 3 seconds (3000ms) -->
<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="popup"
     data-sf-trigger="button"
     data-sf-button-text="Contact Us"
     data-sf-auto-close="3000"></div>
<script src="https://simpleformcrm.com/embed.js"></script>

JavaScript API:

SimpleFormCRM.popup({
  formId: 'YOUR_FORM_ID',
  trigger: 'button',
  autoClose: 3000  // ms delay before closing
});

Pre-fill Form Fields

Pre-populate fields with known values. Useful for personalized links in emails or CRM integrations.

Via JavaScript config:

SimpleFormCRM.init({
  formId: 'YOUR_FORM_ID',
  prefill: {
    field_abc123: 'John',
    field_def456: '[email protected]'
  }
});

Via URL parameters:

Any URL parameter matching a field name will auto-fill that field:

https://yoursite.com/contact?field_abc123=John&[email protected]

Via data attribute:

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="inline"
     data-sf-prefill='{"field_abc123":"John"}'></div>
<script src="https://simpleformcrm.com/embed.js"></script>

Preserve Form State (keepSession)

Save form progress so users don't lose their input if they accidentally close the form or navigate away. Uses browser session storage — data is cleared when the tab is closed.

<div data-sf-form="YOUR_FORM_ID"
     data-sf-type="popup"
     data-sf-trigger="button"
     data-sf-button-text="Contact Us"
     data-sf-keep-session></div>
<script src="https://simpleformcrm.com/embed.js"></script>

JavaScript API:

SimpleFormCRM.popup({
  formId: 'YOUR_FORM_ID',
  trigger: 'button',
  keepSession: true
});

Platform Guides

WordPress

Edit the page or post where you want the form
Add a Custom HTML block (in the block editor, click + and search "HTML")
Paste your embed code into the HTML block
Click Preview to verify, then Publish

If using a security plugin (Wordfence, Sucuri), use the JavaScript embed — it works even with strict CSP.

Shopify

Go to Online Store → Pages
Edit your page and click Show HTML (</> icon)
Paste the JavaScript embed code
Save the page

Shopify has strict CSP — always use the JavaScript or popup embed, not iFrame.

Wix

Open the Wix Editor for your page
Click Add (+) → Embed Code → Custom Element or HTML iframe
Paste the embed code and adjust sizing
Publish your site

Squarespace

Edit the page where you want the form
Add a Code Block (click + and select Code)
Paste the JavaScript embed code
Uncheck "Display Source" and save

Webflow

Open your page in the Webflow Designer
Add an Embed element (Add Elements → Components → Embed)
Paste the JavaScript embed code into the code editor
Publish your site to see the form live

Webflow has strict CSP — use the JavaScript or popup embed. iFrame will not work.

GoDaddy Website Builder

Edit your page in the GoDaddy builder
Add an HTML section (Add Section → HTML)
Paste the JavaScript embed code
Click Done and publish

HubSpot CMS

Open your page in the HubSpot page editor
Add a Custom Module or Rich Text module
Switch to source code view and paste the embed code
Publish the page

All embed methods work on HubSpot CMS. Use inline or popup for best results.

HTML / Static Sites

Open your HTML file in a code editor
Paste the embed code where you want the form to appear (inside the <body> tag)
Save and upload the file to your hosting provider

All embed methods work on static HTML sites. No special configuration needed.

Troubleshooting

Form doesn't appear

Your site likely has a CSP that blocks iframes or external scripts.

Fix: Switch to the JavaScript inline embed.

Submissions fail

Check browser console for errors. Your CSP may block API requests.

Fix: Add connect-src https://simpleformcrm.com to your CSP header.

Styling looks wrong

Fix: Customize colors in the Form Builder's Style tab, or use iFrame embed for complete style isolation.

Popup doesn't open

Fix: Ensure the embed.js script is loaded before calling SimpleFormCRM.open(). Check that the form ID matches.

For Website Administrators

To allow all embed methods on your site, add these CSP directives:

Content-Security-Policy:
  frame-src https://simpleformcrm.com;
  script-src https://simpleformcrm.com;
  connect-src https://simpleformcrm.com;

Which Embed Should I Use?

Inline: Best for contact pages, landing pages, and anywhere you want the form visible immediately.
Popup: Best for CTAs and keeping pages clean until the user is ready to engage.
Slide-in: Best for lead capture, newsletter signups, and non-intrusive prompts that don't block the page.
Floating Button: Best for always-available contact forms — a persistent button visitors can click anytime.
iFrame: Best when you need complete style isolation or are on a platform that only supports HTML iframes.

Still having trouble? Contact our support team