Integrating a lead form into your Walnut demo allows you to effortlessly track and manage contacts created through the demo. When a lead is generated from the embedded form, the associated demo data is automatically linked to that lead. This includes:
- Creating a new Walnut Activity under the contact.
- Updating contact attributes with relevant demo data.
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.
A form can appear on one specific screen in, on multiple guides, or on the demo floating button.
Once you've given the form a name and added the code, you will need to determine if the form should be mandatory
Once you've specified where the form should appear, and if its is mandatory or not, you can 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 () { 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); } }); })() </script>
* Note that using URL params is optional and not a requirement for embedding your form.
To see how to embed HubSpot Lead Forms, check out the following 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;">