HubSpot

  1. Grow organic traffic
  2. Convert more visitors into customers
  3. Run marketing campaigns

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.

Setting up HubSpot

Step 1: Sign Up to HubSpot

To get started with HubSpot, sign up for a Free Account.

Step 2: Create a Form

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.

Step 3: Setting up an Agility CMS Website

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

Step 4: Getting your access token

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.

Install the HubSpot App

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.

Register this app in Agility

See here for more documentation on Agility CMS Apps.

Using the HubSpot App

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.

Adding the HubSpot Form to your Site

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;