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. If you're interested in using this functionality, contact us here.
Link to HubSpot in the project settings
What to do in HubSpot
Before you can use a HubSpot form in Foleon, you need to connect your HubSpot account to the Foleon project that contains the Doc where you want to add the form.
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.
⚠️ As of 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 into your spam submissions. Learn how here.
What to do in Foleon
In the Foleon dashboard, go to the relevant project, open the project settings, and scroll down to Analytics. Turn on the toggle for HubSpot page tracking.
Paste your Hub ID in the HubSpot Hub ID field. In the data hosting location field, choose the region for that project. 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.
Save your project settings.
Create a Form in HubSpot
In your HubSpot account, go to Marketing > Forms and click Create form.
Select the option Legacy Form Editor and click Next.
⚠️ At this time, only forms built using HubSpot’s Legacy Form Editor are compatible with the Foleon form element.
Add and edit the fields you'd like to include in the form. For more information, review HubSpot's documentation here.
Once you've built your form, click Update to publish your form.
Using the HubSpot form element
In your Foleon Doc, open the elements bar and drag the HubSpot form element to your page.
A modal will pop up asking you to add the form ID.
Back in HubSpot, find your form in the list and click Actions > Share. Select the Embed code tab and copy the Form ID from the code, as shown below. 
Navigate back to your Foleon Doc and paste the Form ID. Click 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. To change the form's styling to match your brand, follow the steps in the section below.
💡Want visitors 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 implemented is the responsibility of the creator. Although this feature is easy to use, ensure you know your custom code inside out. We don't recommend using this feature if you're not experienced with coding.
