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  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 if the form should be mandatory and 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 in the demo. Alternatively, it can be added to multiple guides. Specify which screen or guide(s) the form should appear on within the form panel. You can also decide what action should be taken once the form is submitted. Click done to embed the form.

Once the form is submitted, you will see it saved in the right side panel.

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. This ensures that the lead form does not hinder the user from accessing other demos they may be viewing.
• 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. 
• You can customize your lead form by adding global CSS to the lead form code. Below is an example of a few style components that can be added ahead of the script. Users can swap out the style components to match their needs. 

<div style="background-color: blue; padding: 20px; border-radius: 5px;">