Calculated Fields Form Blog

Tips and cases of use for a successful WordPress website with calculated forms.

Blog / HubSpot Integration

HubSpot Integration

HubSpot is define itself as a marketing, sales, and service software that helps your business grow without compromise. The CFF - HubSpot add-on allows to integrate the forms on website with the HubSpot service, to create/update contacts in HubSpot with the information collected by the forms.


There are multiple services in the market for managing the relation with customers, the sales and services. In other posts we have talked about MailChimp, SalesForce and other services. This time is HubSpot who capture our attention.

HubSpot is define itself as a marketing, sales, and service software that helps your business grow without compromise. Between its multiples advantages are: To include a marketing automation process that brings all the important elements of the strategy into a single place - Its user interface is simple and easy to use - It includes a built-in CMS - Implements intelligent email workflows, stores and organizes the customers and leads information.

For the advantages described above and the popularity of HubSpot, we've decided to implement an add-on that allows integrate the forms on personal and company websites with HubSpot accounts, to create and update the contacts' information with the data collected by the forms.

The "CFF - HubSpot" add-on is distributed with the Platinum version of the "Calculated Fields Form" plugin. It takes the information collected by the website's forms to create or update the contacts' information of customers or leads in the HubSpot accounts. The rest of the post will be centered in activate and configure the add-on:

Activating the add-on

The first step in the process would be activate the add-on:

  • Go to the settings page of the plugin through the menu option "Calculated Fields Form"
  • Tick the "CFF - HubSpot" checkbox
  • And finally, press the "Activate/Deactivate Addons" button.

Enabling add-on

Once the add-on be activated would be included a new section in the form's settings, to configure the integration between the website's form and the HubSpot account.

Form Settings

Please, press the "Settings" button corresponding to the form.

To describe the process, I've created a form with some basic fields: fieldname1 for the email, fieldname2 and * fieldname3* for the first and last name respectively, fieldname4 for the user's company, and the fieldname5 for entering his phone number.

Form Structure

In the form's settings there is a "HubSpot" section:

HubSpot Settings

To enable the relationship between the form and HubSpot, tick the "Enabling HubSpot Integration" checkbox, and enter the HubSpot api key

Furthermore, should be entered the fields names, into the corresponding HubSpot attributes (the previous screenshot includes the names of fields in the demo form)

To get the HubSpot API Key:

  • In your HubSpot account, click the settings icon in the main navigation bar
  • In the left sidebar menu, navigate to Integrations > API key
  • If a key has never been generated for your account, click Generate API key
  • If you've already generated an API key, click Show to display your key

HubSpot api key

  • With the key displayed, click Copy to copy the key

Finally, the public form and the contact created in HubSpot:

Public form

HubSpot contact