How to Embed a Lead Generation Form in WordPress

🚀 Why Use FunnelDeck?

Mobile-friendly, fast-loading forms
Customize styling and labels without writing backend code
Supports hosted or embedded use

📸 Preview: This is what the Smart Quote Request Form will look like on your website:

Embedded Smart Quote Request Form preview

🔧 Step-by-Step: Embedding Your Form

Go to your WordPress page or post and switch to “Code” or “HTML” view.
Paste the following embed code:

<div style="max-width: 1440px; margin: 0 auto;">
  <iframe
    id="contact-now-section"
    src="https://funneldeck.7doorswebdesign.com/form/iframe-form.html?funnel_code=your-code-here"
    style="
      border: none;
      width: 100%;
      display: block;
    "
    data-package-options='[
      { "value": "quote-request", "label": "Smart Quote Request Form" }
    ]'
  ></iframe>
</div>

<script>
  const iframe = document.getElementById('contact-now-section');
  if (iframe) {
    iframe.addEventListener('load', () => {
      const config = {
        "label-full-name": "Full Name",
        "label-email-address": "Email Address",
        "label-mobile": "Mobile Number",
        "mobile-number": "+61XXXXXXXXX",
        "helper-mobile": "Use your mobile number in international format (e.g. +61 for AU)",
        "label-business-name": "Business Name",
        "label-package": "Service Requested",
        "label-message": "Job Details / Request",
        message: "Tell us what you need help with or what service you’re looking for.",
        "submit-btn": "Submit Quote Request",
        packageOptions: iframe.dataset.packageOptions,
        styleVars: {
          "--color-primary": "#be613a",
          "--color-button-text": "#ffffff",
          "--form-font-size": "clamp(0.875rem, 2vw, 1rem)",
          "--form-label-font": "Poppins",
          "--form-font-family": "Urbanist",
          "--color-form-text": "#0c1c3e",
          "--color-card-bg": "#f5f5f5",
          "--color-input-bg": "#ffffff",
          "--color-primary-focus": "#0c1c3e"
        }
      };

      iframe.contentWindow.postMessage(
        { type: "funneldeck:config", config },
        "https://funneldeck.7doorswebdesign.com"
      );
    });
  }
</script>

<script>
  window.addEventListener("message", function (e) {
    if (e.data?.type === "funneldeck:resize") {
      const iframe = document.getElementById("contact-now-section");
      if (iframe) iframe.style.height = e.data.height + "px";
    }
    if (e.data?.type === "funneldeck:redirect" && e.data.url) {
      window.location.href = e.data.url;
    }
  });
</script>

⚠️ Important: Customize Safely

You can change the label text and style variables (like primary color) directly in the iframe’s dataset or through the config message. However, we recommend using terms closely related to the original labels for reporting consistency.

🎨 Font Compatibility

FunnelDeck forms are optimized with commonly used Google Fonts. The following fonts are already preloaded and ready to use:

Urbanist
Poppins
Roboto
Inter

You can customize which one appears by adjusting the --form-font-family value in your styleVars.

✅ Recommended Naming Variations

Full Name → Your Name, Name of Contact
Business Name → Company, Store Name
Message → Inquiry, Tell Us More

🎯 Want to See FunnelDeck in Action?

Experience how our smart lead form works from your customer’s perspective. Try our free demo and see the automated follow-ups in action.

👉 Try the Free Demo Here