How to embed a HubSpot form in a Flipsnack flipbook

Skip to content

Contact sales

Overview

You can embed HubSpot forms into your flipbooks to collect leads, survey readers, or drive newsletter signups. Whether placed directly on the page or in a pop-up window, these forms make your publications more interactive and valuable.

💡 Benefits of embedding a HubSpot form in your flipbook

Lead capture within content: Collect user data without redirecting readers
Your own forms: Use your existing HubSpot forms
Flexible placement: Embed inline or via popups
Interactive experience: Encourage engagement in catalogs, brochures, and more

This article explains how to embed a HubSpot form into your flipbook using either the HubSpot form embed or HubSpot form pop-up interaction in the Design Studio.

Requirements

Plan: Enterprise and up: contact sales
Tip: To get your HubSpot form embed code, follow this HubSpot guide. It shows you how to copy the iFrame code for any form you’ve created in your HubSpot account.
HubSpot account: Sync works from HubSpot Free. Custom events need HubSpot Professional and up. You also need an active HubSpot form and access to its embed code: go to HubSpot

Embed a HubSpot form directly on the page

To embed your form using the HubSpot form embed interaction:

Open your flipbook in Design Studio.
Click Interactions on the left.
Scroll to the Embeds section.
Drag the HubSpot form embed interaction onto your desired page location.
In the left panel, paste your HubSpot embed code in Embed code. If you need help locating this, refer to HubSpot’s guide on embedding forms on external sites.

Embed a HubSpot form in a pop-up window

To display your form in a pop-up that opens on click:

In the Interactions tab, under Embeds, find and select HubSpot form pop-up.
Place the pop-up frame over a button, image, shape, or any clickable element.
Resize and reposition the frame to match your layout.
In the pop-up settings panel:
- Paste your HubSpot embed code in Popup frame code. You can find it by following this HubSpot article.
- Add a Tooltip message (e.g., “Open form” or “Click to fill out”)
Adjust the frame’s color and transparency as needed.
Preview the flipbook to test the pop-up interaction.

Require a mandatory HubSpot form submission

Embed a HubSpot form as a pop-up and require every reader to submit it before they can continue reading. Ideal for gate-keeping documents when you need a custom CRM form to qualify leads, control access, and sync submissions straight into your existing workflows.

Select the HubSpot form pop-up on your Canvas.
In the left panel, turn on Make element mandatory.
In Instructions, add the text readers see before they can move to the next page.
Mandatory actions are not enforced in preview mode.

Once enabled, readers will not be able to interact with the rest of the document until the form is successfully submitted.

Additional tips / FAQs

Where do I get the embed code? You can copy the iFrame code directly from your HubSpot form's settings. See HubSpot’s official instructions for more details.
Which embed code format is accepted? HubSpot typically uses iFrame code, which is supported in both embed methods.
Can I track form submissions in HubSpot? Yes, form submissions are tracked through HubSpot, not Flipsnack.
What if the form doesn’t display? Ensure the code is correct and hosted on HTTPS.

Common use-cases

Lead generation: Capture emails directly inside product catalogs
Event sign-ups: Promote webinars or launches in interactive brochures
Newsletter opt-ins: Invite users to subscribe within a digital magazine

Troubleshooting

Form isn’t displaying:

Embed code copied incompletely: Double-check that your embed code is copied in full

Pop-up not triggering:

Pop-up frame placement: Confirm the Pop-up frame is correctly placed over an interactive element

Related articles

Next steps

Need expert support?

Our team is here to help. Connect with our team experts or message us via the live chat for personalized assistance.