LiveDemo
CTRL K
✏️ Edit a LiveDemoLead Forms

Lead forms

Collect names and emails inside the demo. Available on paid plans.

Form popup asking for email, company and company size

Add a form

  1. Hover between two steps and click Add popup.
  2. In the step settings, set Popup Type to form.
  3. Set Form Type to standard (or hubspot, see HubSpot).
  4. Add a Title and Description, such as "Get the full walkthrough".

Fields

Click Add field and choose Name, Email, Company, Website, Selector, Checkbox or Custom string.

  • Each field has a Label (what viewers see) and a Name (the key saved with the lead).
  • New fields are Required. Uncheck it to make a field optional. Name and Email are always required.
  • Selector is a dropdown. Add options with Key (shown) and Value (saved).
  • Drag fields to reorder them.

Form options

  • Show top labels: labels above fields instead of inside them.
  • Show background: a card behind the form.
  • Use captcha: blocks bots.
  • Buttons: add buttons as on any popup.

Viewers must submit the form to continue.

Where leads go

  • Analytics → Leads, with every answer in Data. See Leads.
  • HubSpot contacts, when connected.

Where to place the form

  • After the "aha" moment, not on step 1. Viewers who've seen value convert better.
  • Ask for as little as possible. Email alone often beats five fields.
  • Use the drop-off step to check that the form isn't where viewers leave.

Next: Embed popups

More in Edit a LiveDemo

  • How to edit a LiveDemo: Learn how to open a captured LiveDemo in the editor and change steps, text, design, zoom, popups and voiceover before you publish.
  • Screens: Rename, reorder, duplicate and delete screens in the LiveDemo editor, add screens from the library or by upload, and understand screen types.
  • Steps: Add, reorder, duplicate and delete the steps of your LiveDemo so the interactive demo follows the exact flow you want buyers to see.
  • Pointer & Hotspot Steps: Guide viewers with pointer steps (an animated cursor) or hotspot steps (a pulsing dot), and set their placement and options in LiveDemo.
  • Step Text & Buttons: Format tooltip text, personalize it with variables, change the Next button label and footer, and write step copy that converts.
  • Transitions: Add the pointer click or hotspot that moves viewers from one screen of a LiveDemo to the next.
  • Popup: Add popups to your LiveDemo to introduce a feature, explain a step or capture leads with a form inside the interactive demo.
  • Popup Buttons & Effects: Add call-to-action buttons to LiveDemo popups: go to the next step, jump to a screen or open a website, with colors and attention effects.
  • Embed Popups: Use an Embed popup to put a Calendly or Cal.com calendar, a Typeform, a video or any HTML embed inside your LiveDemo.
  • Branching: Build a choose-your-own-path LiveDemo with popup buttons that jump to different screens, for different personas or features.
  • Zoom: Use zoom in the LiveDemo editor to focus viewers on the important part of a screen and make small UI details readable.
  • Video Screens: Speed up video screens, add zooms on the timeline and turn video frames into screenshot screens in the LiveDemo editor.
  • Voiceover: Add AI voiceover to your LiveDemo so each step of the interactive demo is narrated for viewers.
  • AI Text: Use Enhance with AI to rewrite every step of your LiveDemo into a clear, contextual guide in one click.
  • Autoplay: Turn on autoplay to play your LiveDemo step by step automatically, like a video, while keeping it interactive.
  • Edit Page Content: Change copy, numbers, colors and images on captured HTML screens in LiveDemo without recording again.
  • Blur & Hide Data: Blur or hide emails, names, revenue and other sensitive data in your LiveDemo before you share it.
  • Design: Customize the look of your LiveDemo: brand colors, fonts, hotspots and tooltip styles that match your product and website.
  • Theme: Match your LiveDemo to your brand with tooltip and button colors, a Google font, tooltip arrows, hover glow and footer button style.
  • Background: Frame your LiveDemo on a solid color, gradient or wallpaper, with padding and blur, for a polished look on your website.
  • Music: Play a preset track or your own audio behind your LiveDemo, trim long files and set the volume.
  • Misc Settings: Turn on completion confetti, remove the browser wrapper, show navigation tabs, use a large custom cursor and control the watermark in LiveDemo.
  • Variables: Add variables such as company or first name to a LiveDemo and fill them per prospect with custom links, so each viewer sees their own name.
  • Content Security Policy: Add Content Security Policy directives so embeds, fonts and images from other domains load inside your LiveDemo.
© 2026 LiveDemo. All rights reserved.