Embedding HubSpot Lead Forms

By adding HubSpot lead forms into your demos, you will be able to identify leads within HubSpot. Once you have a dedicated embed code, here's how you add the form into your demo:

Reminder: Before following the instructions below, be sure to grab the embed code from HubSpot. Learn how to create a form in HubSpot here. 

Embedding a Lead Form In Walnut

Open Walnut's editor to the relevant template. Select the forms icon in the top right corner.

Click the  Embed Forms option from the right side panel. 

This will open up a pop-up and you will be instructed to paste your embed code in the side panel.

Want to view the URL params for your form? The code snipped can be found at the bottom of this page.

Once you've given the form a name and added the code, you will need to determine when to have the form shown. You can have the form shown when users land on a specific screen or guide. 

A form can appear on one specific screen throughout the demo. Alternatively, it can be added to multiple guides. Specify which screen or guide(s) the form should appear on from within the form panel. You will also then be able to decide what happens after the form is submitted.

To see where the detail is housed in HubSpot once the form is submitted, read this article.  

<script>
  (function (jQuery) {
    window.addEventListener('message', event => {
      if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        const [_,search] = parent.parent.document.referrer.split('?')
        const searchParams = new URLSearchParams(search);
        searchParams.forEach((value, key) =>  document.querySelector(`input[name=${key}]`).value = value);
      }
    });
  })(jQuery)
</script>

To see how to embed HubSpot Lead Forms, check out the following demo:

View Our Demo

Important To Note 📝

• The enriched demo data will appear in your HubSpot account two hours after your demo with the lead form was viewed. 
• Currently, only one form can be added per demo. It can appear on one screen, or throughout multiple guides. You can make edits to the form at any time.
• Once a prospect has seen or filled the form, they will not be directed to it again even if you have multiple guide buttons linked to it.
• The process for embedding a lead form in your demo is simple and easy. 
  • Once you've embedded your form into the demo, you will see all new leads appear in your original marketing platform. 
  • You are not required to integrate Walnut with another tool in order to embed forms. However, with Walnut's HubSpot integration, users can access additional demo insights and lead tracking within HubSpot. Learn how to set up the HubSpot integration here.