Make Hubspot lead generating forms to gather email addresses and other information from your flipbook readers.
Table of contents
Overview
With HubSpot’s recent updates, pop-up forms are now part of HubSpot’s Call-to-Action (CTA) feature. This means that to add a pop-up form, you must first create a HubSpot CTA. This allows you to collect email addresses and other details from flipbook readers inside Flipsnack.
Additionally, in Flipsnack, you only need to add HubSpot in Google Tag Manager (GTM) to make CTAs and forms work properly. Follow this guide for setup: Integrate HubSpot with your Flipsnack account.
Note: If you haven't already installed the HubSpot tracking code, please go through the first guide in the series before following this one.
Requirements
-
HubSpot account with access to Marketing Hub (Starter, Professional, or Enterprise).
-
Google Tag Manager (GTM) installed on your Flipsnack profile and flipbooks.
-
CTA permissions enabled in HubSpot.
How to Create a CTA in HubSpot
HubSpot offers different types of CTAs that can be used inside Flipsnack. Below are the CTA types and how they can be integrated.
CTA Types:
-
Sticker Banner: A permanent banner fixed to the top or bottom of your page. It remains visible as visitors scroll.
-
Pop-up Box: A scheduled pop-up that appears after a set delay.
-
Slide-in CTA: A banner that slides in from a page corner and stays visible while visitors scroll.
-
Embedded CTA: A call-to-action button or banner embedded into a page, flipbook, or HubSpot email.
-
Embedded Image CTA: An image-based CTA that can be used in HubSpot pages or emails.
Steps to create a CTA:
1. Log-in to HubSpot and go to Marketing > Lead Capture > CTAs.
2. Click Create in the upper right.
3. Choose CTA Type. Select Pop-up CTA to create a lead capture form. HubSpot offers three types of pop-up CTAs:
-
Banner: A fixed strip at the top or bottom of the page that remains visible as visitors scroll.
-
Pop-up Box: A floating box that appears after a set delay or action trigger.
-
Slide-in: A smaller banner that slides in from the side of the screen and remains visible as users navigate.
4. Customize the CTA design:
- Edit the text, style, and branding.
- Add a relevant CTA message (e.g., “Subscribe for Updates” or “Download Now”).
Setting Up Lead Form Triggers in Flipsnack
After creating and publishing your HubSpot CTA, set the trigger conditions inside HubSpot’s CTA settings:
-
Page Scroll: Show the form when users scroll down a percentage of the page.
-
Exit Intent: Trigger the form when a user is about to leave the page.
-
Time Delay: Display the form after a set amount of time.
-
URL-Based Filtering: Show forms on specific URLs if multiple CTAs exist on your domain.
-
User-Based Targeting: Personalize forms based on country of origin or device type.
Publishing Your CTA-Based Lead Form
-
Once all settings are configured, click Review and Publish in HubSpot.
-
Your CTA now appear on your flipbook.
-
If the form does not appear, try the following:
-
Press Shift + F5 to refresh without cache.
-
Double-check the triggering settings in HubSpot.
-
And once the CTA is published and configured to trigger on your flipbook's URL, it will appear as intended when the HubSpot tag and Google Tag Manager (GTM) are properly installed.
Ensure that your GTM settings allow the HubSpot CTA to load dynamically and that the trigger conditions match your targeting strategy.
Next steps
Useful Resources
To learn more about this subject, visit:
Need Expert Support?
Our team is here to help. Connect with our team experts or message us via the in-app chat for a personalized demo.