---
title: "External lead forms"
slug: "/help/demos/personalize/lead-forms/external-lead-forms"
last_updated: "2025-12-18T14:28:01Z"
zendesk_id: 43643391535123
zendesk_url: "https://help.walnut.io/hc/en-us/articles/43643391535123-Passing-Data-from-Externally-Hosted-Lead-Forms-into-Embedded-Walnut-Demo-URLs-Setup-Guide-with-Code-Samples"
locale: "en-us"
category: "Connect and Optimize"
section: "Optimize"
product: "demos"
topic: "personalize/lead-forms"
displayed_sidebar: "demosSidebar"
sidebar_position: 1
tags: ["integrations"]
---

## **Overview**

If you’re embedding Walnut demos or playlists using an [**`<iframe>` embed code**](/help/playlists/embed-demos) and want to capture lead form data from a form **hosted outside of Walnut** (for example, on your marketing website), this guide is for you.

By passing form data—such as **first** **name**, **last** **name**, and **email**—into your embedded demo or playlist via URL parameters, you can [identify viewers](/help/demos/analyze/faqs/integrations-overview), personalize the experience, and track engagement.

This guide provides step-by-step instructions for configuring the external form setup for:

-   [**Pass Data from External HubSpot Forms**](#h_01K22RYHCQDCPW4XN5H9NHEMDJ)
-   [**Pass Data from External Marketo Forms**](#h_01K22RYHCQF0R2Z6YV7BH29WYG)

:::note[🔨 Implementation Note]

**This advanced method will require help from** your **development** or **marketing operations** teams**.** To enable this configuration, your development or web team will need to:  

-   Add the lead capture form (e.g., **HubSpot** or **Marketo**) directly into your marketing site’s codebase.
-   Include a script that captures the submitted form data and appends it to the embedded Walnut iframe as URL parameters.

:::

---

## **Maximize Your Results 🎯**

For the most complete tracking and marketing automation, Walnut recommends:

-   Hosting your lead forms [**within your demos**](/help/demos/personalize/lead-forms/identify-viewers), if possible.
-   Enabling the **[HubSpot](/help/integrations/hubspot/engagement-data)** or **[Marketo](/help/integrations/marketo/connect-marketo)** integration in Walnut > Integrations.

**Hosting your lead forms within you Walnut demos ensures that:**

-   Enriched demo session data (e.g., engagement, drop-off points, views) is synced directly to the corresponding contact record in HubSpot or Marketo.
-   If you pass data from an **external form,** you’ll still capture the viewer’s email and create a lead — but you won’t receive enriched demo engagement data in your CRM. In this case, demo and playlist session data will only be available in Walnut Insights.
-   Enriched demo session data is only available in your CRM if the lead form is hosted **within** a Walnut demo.

---

👉 Want to embed a lead form directly inside your Walnut demo? [Follow this guide](/help/demos/personalize/lead-forms/identify-viewers).

---

## **When To Use this Setup**

-   Your lead form lives on an external landing page or marketing site and you want to avoid **“double gating”** your demo or playlist.
    
-   This setup is also ideal if you want to **gate a playlist** with your own external form instead of using [Walnut email gate](/help/demos/personalize/variables/email-gates) — especially since embedded lead forms aren’t yet available for playlists.
    

---

## **Before You Begin**

Before setting up this configuration, ensure you have:

-   An **[embed code](/help/playlists/embed-demos)** for the Walnut demo or playlist you plan to use.
-   A **HubSpot** **or** **Marketo** **form** that will collect viewer information.
    
-   **Access to the codebase** of your marketing site or landing page, or the ability to work with your development/web team to make code changes.

You’ll need all of the above to add your externally hosted form to the page and configure it to pass form data into the embedded Walnut demo or playlist.

---

## **Quick Start Guide**

:::note[⚠️ Important to Note]

The sample scripts in this guide support the following:

-   Passing **first** **name**, **last name**, and **email** from your form into the embedded Walnut iframe.
-   Adding additional form fields by including them in the parameter mapping.
-   Appending submitted form values to the Walnut iframe URL upon form submission.
-   Starting the iframe hidden (display:none) and revealing it dynamically after the form is submitted.

:::

_**Sample Walnut Embed Code:**_

```
<iframe
    id="walnut_iframe"
    name="walnut_iframe"
    src="https://app.teamwalnut.com/player/?demoId=ab34e3bf-7727-4c94-9295-c688576c17bb&showGuide=true&showGuidesToolbar=true&showHotspots=true&source=app"
    title="Walnut embedded demo"
   
    allow="fullscreen"
    allowfullscreen="true"
    loading="eager"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-downloads allow-popups-to-escape-sandbox"
    width="100%"
    height="100%"
    frameborder="0">
 `</iframe>`
```

---

### **Sample Setup for HubSpot Forms**

:::note

Use this script to capture **first name**, **last name**, and **email** from a HubSpot form embedded on your marketing site, append them as URL parameters to your Walnut demo iframe, and display the demo immediately after form submission.

:::

1.  **Place your Walnut embed on the same page as your form.**
    -   Use the demo or playlist embed code from Walnut.
    -   Give the `<iframe>` a stable ID (e.g., `id="walnut_iframe"`).
    -   In this example, we’ll use: `**id="walnut_iframe"**`
2.  **Update the style attribute in the embed code.**
    -   Replace the default style with: `style="border: 0; display: none;"`
    -   The iframe must start hidden (`display:none;`) and will be shown after a successful form submission.
3.  **Add the [Sample HubSpot Form Data Script.](#01K2CM7488A9348P7EXNBPGPTK)**
    -   Place the script directly below the HubSpot form script in your site’s HTML.
    -   Update the `const baseURL` variable in the script by replacing `**YOUR_DEMO_ID**` with the **full demo or playlist URL** from your Walnut embed code.

#### _**Sample HubSpot Form Data Script**_

```


<div id="hubspot-form"></div>


```

**🗒️ Notes:**

-   The sample supports first name, last name, and email by default.
-   Listens for HubSpot’s `postMessage` callback (`hsFormCallback`). Ensure your HubSpot form is embedded on the page.
-   You can adjust the script to capture additional fields by adding new variables and appending them to the iframe URL.
-   The Walnut iframe must start hidden (display:none;) and will be shown after the form is submitted.

---

### **Sample Setup for Marketo Forms**

:::note

Use this script to capture **first name**, **last name**, and **email** from a Marketo form embedded on your marketing site, append them as URL parameters to your Walnut demo iframe, and display the demo immediately after form submission.

:::

1.  **Place your Walnut embed on the same page as your form.**
    -   Use the demo or playlist embed code from Walnut.
    -   Give the `<iframe>` a stable ID (e.g., `id="walnut_iframe"`).
    -   In this example, we’ll use: `**id="walnut_iframe"**`
2.  **Update the style attribute in the embed code.**
    -   Replace the default style with: `style="border: 0; display: none;"`
    -   The iframe must start hidden (`display:none;`) and will be shown after a successful form submission.
3.  **Add the [Sample Marketo Form Data Script.](#01K2CMSK0G8Q2NEVD1F0A9NQSD)**
    -   Place the script directly below the HubSpot form script in your site’s HTML.
    -   Update the `const demoURL` variable in the script by replacing `**YOUR_DEMO_ID**` with the **full demo or playlist URL** from your Walnut embed code.

#### _**Sample Marketo Form Data Script**_

```


<form id="mktoForm_1234"></form>


```

**🗒️ Notes:**

-   Supports first name, last name, and email by default.
-   You can add additional fields by creating new variables in the script and appending them to the iframe URL.
-   Uses the Marketo Forms 2.0 API (MktoForms2) and prevents the default redirect.
-   The Walnut iframe must start hidden (display:none;) and will be shown after submit.

---

## **FAQs**

---

**Do I Have to Use HubSpot or Marketo for This Setup?**

-   No. While this guide includes scripts for HubSpot and Marketo forms, you can adapt the same logic for other form providers. You’ll need to ensure your provider supports capturing form data on submit and allows you to run custom scripts.
    

---

**Can I Capture More Than First Name, Last Name, and Email?**

-   Yes. The sample scripts support these three fields by default, but you can add additional parameters by creating new variables in the script and appending them to the iframe URL.
    

---

**Will I Still Get Enriched Session Data in HubSpot or Marketo If I Use an External Form?**

-   No. If you pass data from an external form without hosting the form inside Walnut and enabling the integration, you’ll capture the viewer’s email and create a lead, but enriched session data (e.g., engagement, drop-off points, views) will only be available in **Walnut Insights**.
    

---

**Where Can I Find My Demo or Playlist Embed Code?**

-   In Walnut, open your demo or playlist, select **Share**, then choose the **Embed** option. Copy the iframe code provided.
    

![Walnut demo options menu with the 'Get embed code' option highlighted, along with Demo preferences, Rename, Add collaborators, and Manage tags](pathname:///images/4d685a30b0f64dc8.png)

[\> Learn more about Embedded Demos & Playlists](/help/playlists/embed-demos)

---