Choosing a Headless CMS? Here is Your Ultimate Checklist for Free Get it now
HubSpot is a full-service platform for marketing, sales, customer service and CRM software. Amongst many other things, you can use HubSpot Forms to start learning more about your visitors.
Your Forms on HubSpot integrate with your contacts database, so you can keep track of your leads and turn them into customers.
To get started with HubSpot, sign up for a Free Account.
When you're logged into HubSpot, create a new Free Form under Marketing.
Choose the Embedded Form Type.
For this example, we'll use the Contact Form template.
We'll want to add our HubSpot form to an Agility CMS powered website. Sign up for a Free Agility CMS Account. Once you have an account, you'll be able to select a starter and create an Instance.
Getting Started with Agility CMS
To allow your app to establish a connection with HubSpot, you need to get your account's access token.
Go to the Private Apps page by clicking on the settings icon near your profile picture.
On the left panel of the settings page, expand the integration menu and click Private Apps.
Click the Create private app button and fill out the necessary fields.
Make sure to check
Once the private app is created, you should a View access token link like the screenshot below.
In order to use an App in Agility CMS, you must register this app within your Organization in Agility CMS. Then, you can install this app within any Instance in your Organization.
See here for more documentation on Agility CMS Apps.
After Installing the HubSpot App add the HubSpot custom field to a Page Module.
Make sure the custom field is highlighted and the HubSpot app is selected under the field type dropdown then save.
Now that we have created the HubSpot form module we then need to attach it to a page.
Create a new page and hit Add. On the flyout panel you should see the HubSpot module we just created. After adding the new module, click on it and you should be able to see a select box populated with the forms you have on HubSpot.
Once you've installed and applied the app as custom field to your page, you can then use the script below to run a dynamically embedded form from the data sent by your app.
For this example we are using the Agility CMS NextJS starter (https://github.com/agility/agilitycms-nextjs-starter)
Please see the above README on how to consume pages and modules.
import React from "react";
import Script from 'next/script'
const HubspotForm = ({ module }) => {
const { fields: { hubspotForm = undefined} } = module;
if(!hubspotForm) return null;
const {portalId, formId } = JSON.parse(hubspotForm);
const divID = `form_${formId}`;
return (
<div style={{ width: "600px", margin: "auto" }}>
<Script src="//js.hsforms.net/forms/v2.js"
strategy="lazyOnload"
onLoad={() => {
hbspt.forms.create({
portalId,
formId,
target: `#${divID}`
});
}}
/>
<div id={divID}></div>
</div>
);
};
export default HubspotForm;