Our native Foleon form element enables you to create and style forms in your content quickly. However, sometimes you may want to use one of your HubSpot forms so that your marketing automation kicks in right after a reader clicks the submit button. This article shows you how to use the HubSpot form element.
💡 This feature is not included in every plan. Please contact our Customer Success Management team if you're interested in using this functionality.
In this article
What to do in Hubspot
The first thing you need to do is connect your HubSpot account to this particular Foleon project.
Go to HubSpot and find your Hub ID by clicking on your profile in the top right corner. Copy your Hub ID to your clipboard.
Link to HubSpot in the project settings
In the Foleon dashboard, go to the relevant project, open the project settings and scroll down to find the HubSpot settings.
Paste your Hub ID in the HubSpot Hub ID field. You can choose the region for that project in the data hosting location field. Global is selected by default, meaning customer data will be processed and stored in the United States (Global).
⚠️ Foleon Docs published before this change in our product — released January 19, 2022 — will have their data hosting locations set to Global by default. There will be no changes to the URLs and source of the existing Foleon Doc.
If you want to apply the EU as a data region, you’ll have to republish the Docs in that project. After republishing, you’ll have different script layouts in DOM and URLs for HubSpot requests.
If you want to use HubSpot tracking, you can enable that by enabling the switch. Learn more about HubSpot tracking here.
Save your project settings.
Using the HubSpot form element
In your Foleon Doc, open the elements bar and drag the HubSpot form to your page.
A modal will pop up asking you to add the form ID. You can find your form ID by looking at the URL when opening your form in HubSpot.
Add your form ID and hit save.
Your HubSpot form has now been added to your page and can be tested in the preview.
In the image below, you see what a HubSpot form element 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 the next section.
Want to enable your visitor to upload a file in a HubSpot form? Check out this thread from the HubSpot community.
⚠️ When you've added a HubSpot form, you might see some HubSpot tracking scripts being loaded (even if you’ve disabled HubSpot tracking in the project settings). This could happen when the form is loading or when the form validation is triggered.
Set up a success message
In the form settings, you can set up a success message for when a visitor of your content submits the form.
Click the cogwheel icon in the blue element bar, go to the general settings, and fill in your custom success message in the text field.
💡 The text styling is inherited from paragraph in the brand settings.
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 to that, 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.