Skip to content
RocketLead Developers

Embed Forms on WordPress (Elementor)

This guide walks through embedding a RocketLead form on a WordPress page using Elementor. It works on both the free and Pro versions — you only need the HTML widget.

What you’ll need

Section titled “What you’ll need”
  • A WordPress site with Elementor installed.
  • A RocketLead form that’s already published. Drafts return 404 from the public API and won’t render. Open the form in the editor → Publish.
  • The form’s ID — copy it from the form settings or the embed dialog.

The three snippets

Section titled “The three snippets”

A RocketLead embed is always three pieces:

  1. A stylesheet in <head>.
  2. A container <div> where the form should appear.
  3. A script before </body>.

In a vanilla HTML site you’d just paste them into the source. WordPress complicates this slightly because the <head> and </body> aren’t directly editable from page content. We’ll handle each one in the right place.

Step 1 — Add the stylesheet to the global <head>

Section titled “Step 1 — Add the stylesheet to the global <head>”

Open WordPress admin → Appearance → Theme File Editor (or use a header-injection plugin like Insert Headers and Footers) and add this to the site’s <head>:

<link rel="preload" href="https://cdn.rocketlead.io/widget.css" as="style">
<link rel="stylesheet" href="https://cdn.rocketlead.io/widget.css">

If you’re using Elementor Pro, you can also add it via Elementor → Custom Code → Add new with the location set to <head>.

Step 2 — Drop the container into the page with Elementor

Section titled “Step 2 — Drop the container into the page with Elementor”

Open the page in Elementor:

  1. Drag an HTML widget to the spot where the form should appear.
  2. Paste the container snippet:
<div data-rocketlead-form data-form-id="YOUR_FORM_ID">
  <noscript>Bitte aktiviere JavaScript, um dieses Formular anzuzeigen.</noscript>
</div>
  1. Replace YOUR_FORM_ID with the actual form ID.
  2. Save the page (you don’t need to publish yet).

The container is just a placeholder — it’ll stay empty in the Elementor preview. The form mounts only when the page is loaded in a real browser tab.

Step 3 — Add the script before </body>

Section titled “Step 3 — Add the script before </body>”

Same options as the stylesheet:

  • Theme File Editor — paste before the closing </body> in footer.php.
  • Insert Headers and Footers plugin — set the location to Footer.
  • Elementor Pro Custom Code — location </body> – End.
<script src="https://cdn.rocketlead.io/static/forms/widget.js" async></script>

That’s it — publish the page and visit it in a browser.

Allowed Domains

Section titled “Allowed Domains”

If your form has Erlaubte Domains configured in Form Settings, add your WordPress site’s domain to the list (e.g., https://your-site.com). Browser submissions from disallowed origins get a 403.

Common gotchas

Section titled “Common gotchas”

Form doesn’t appear

Section titled “Form doesn’t appear”
  • Form not published. The widget calls /availability on mount; an unpublished form returns 404 and the script bails silently. Check the form is in Published state in the editor.
  • Wrong form ID. Copy from the embed dialog rather than retyping — the ID is a UUID, easy to mistype.
  • Script blocked by ad-blockers. cdn.rocketlead.io is a normal CDN, but some aggressive blockers flag any third-party JS. Test with extensions disabled.

Form is unstyled

Section titled “Form is unstyled”

widget.css didn’t load. Check the Network tab in DevTools — if you see a 404 or CORS error on widget.css, the link tag is missing or wrong.

Caching plugins break the form

Section titled “Caching plugins break the form”

WP caching plugins like WP Rocket, W3 Total Cache, and LiteSpeed Cache sometimes interfere with <script async> or rewrite asset URLs:

  • Defer/async settings — turn OFF “delay JS execution” or “lazy load JS” for widget.js. Most caching plugins have an exclusion list.
  • HTML minification — if minification breaks the data attributes, exclude pages with the form from minification.
  • Combine JS — disable for widget.js (it’s already optimized and combining it can break dependencies).

Form is too wide

Section titled “Form is too wide”

The widget fills its container. Wrap it in a sized parent:

<div style="max-width: 600px; margin: 0 auto;">
  <div data-rocketlead-form data-form-id="YOUR_FORM_ID"></div>
</div>

In Elementor, you can also constrain the column the HTML widget sits in via the section’s width settings.

Multiple forms on one page

Section titled “Multiple forms on one page”

Each container needs a unique data-form-id, but the script only loads once. Just drop additional <div data-rocketlead-form> blocks anywhere on the page — the widget scans for all of them on DOMContentLoaded.

Forms don’t load on a page that’s loaded via Elementor’s AJAX navigation

Section titled “Forms don’t load on a page that’s loaded via Elementor’s AJAX navigation”

Elementor’s AJAX page transitions skip a full reload, so DOMContentLoaded doesn’t refire. If you’re using Elementor Pro’s nav with AJAX enabled, switch to standard navigation for pages with embedded forms — or use the window.rocketlead.forms.create() SPA API inside a small custom widget.

Section titled “Related”