Your audience can provide a lot of valuable information. Think about personal details such as email addresses, which you can then use for your marketing campaign. In this article, we show you how to generate leads with a HubSpot form.
💡 This feature is not included in every plan. If you are interested in using this feature, please reach out to our Customer Success Management team.
In this article
Why gate forms with a HubSpot form?
Our lead generation feature allows you to block (further) access to your Foleon Doc on any page. Visitors are prompted with a pop-up and will have to fill in their personal details to access your content (or the rest of it).
As a marketer or demand generation specialist, you want this information in HubSpot instantly. So you can automatically assign leads to your sales reps, do lead scoring and marketing automation right when they convert.
The benefit is that you won’t have to manually upload all leads on these platforms. Next to that, you will have correct attribution in HubSpot as well.
💡 Don’t forget to enable HubSpot tracking on your Foleon Docs.
How to gate your Foleon Doc with a HubSpot form
In order to use a HubSpot form for lead generation, create a form in HubSpot in the Marketing tab.
⚠️ Since May 16th 2024, HubSpot requires you to add domains for external pages that have embedded HubSpot forms. This means you'll have to add the domains on which you host Foleon content to Hubspot as additional site domains. If you don't, form submissions from your Docs on domains that have not been added will be filtered to your spam submissions. Learn here how.
Once you have your form, click on the form and take note of the Hub ID and Form ID in the URL. This is the quickest way to get this information. The URL will look something like this:
https://app.hubspot.com/forms/YOUR HUB ID/ YOUR FORM ID/performance
On your dashboard, open a Foleon Doc. Then select Foleon Doc settings. In the lead generation section, turn on Gate your Foleon Doc and choose HubSpot as your preferred gating method.
Type this information into the required fields in Foleon, choose your layout template, and hit save.
If the setup is successful, your lead generation gate will now show in the pages overview.
In the image below, you see what a HubSpot form might look like in your Foleon Doc. If you want to change the styling of the form to match your brand, follow the steps in Styling your form.
💡Want to enable your visitor to upload a file in a HubSpot form? Check out this thread from the HubSpot community.
Assigning your gate to a page
When you’ve finished setting up your lead generation method, you can connect it to any of your pages.
Grab the lead generation gate and drag and drop it in front of the page where you want the gate to appear. Instead of gating your entire Foleon Doc, you can give your readers access to a limited portion and make them hungry for the rest.
Once satisfied with your Foleon Doc and the gate you’ve created, hit Publish or Preview to test your gate.
Once a visitor has submitted the form, the lead generation overlay will close automatically. For that reason, no success message will be shown.
⚠️ At the moment, it's also not possible to set up a success message in HubSpot or redirect visitors to a follow-up page.
Allow reader to skip
If you want to offer readers the choice to skip and keep reading your pages without completing a form, that's possible! First, go to Pages, and click on the relevant Lead Generation gate. In Lead Generation's settings, click on General Settings, toggle on the "Allow Reader to Skip" option, and remember to republish your Doc to save the changes.
Styling your form
When you create a form in HubSpot to use in your Doc, there are limited styling options in Foleon. However, HubSpot allows you to customize your form to suit your needs.
💡 Learn more in HubSpot's documentation: Set up and style a HubSpot form on an external site.
In addition to HubSpot form themes, you're able to style embedded forms on a more granular level. You can control the form field width, font family, font sizes, font colors, and form button.
If you want to prevent spam form submissions — for example, by enabling reCAPTCHA — learn how to set this up in HubSpot's documentation: Prevent spam form submissions.
Next, you can apply styling by inserting custom CSS code into the Doc’s remarketing field in the Foleon Doc settings. Using CSS only applies if you insert the HubSpot form as an unstyled, raw HTML form — an option in HubSpot.
⚠️ Any custom code that has been implemented is the responsibility of the creator. Although this feature is easy to use, ensure you know your custom code inside out. If you're not very experienced with coding, we don't recommend using this feature.
Returning visitors
Foleon places a cookie that remembers whether a visitor has passed your lead generation gate for a specific Foleon Doc. This means that if visitors reopen a gated Doc they’ve already completed, they won’t have to submit the HubSpot form again — assuming they visit from the same device and browser.
This cookie is stored for that specific Doc and isn’t linked to the form used to gate. So, even if you swap out the form, returning visitors will not have to submit the new form.
💡Some visitors might use browsers or browser extensions that delete cookies automatically. In this case, these visitors might have to fill in your lead generation form every time they visit your Foleon Doc.