ASP.NET, CMS

Integrating/Migrating Sitecore WFFM forms with Hubspot.

Sitecore WFFM is a great  module allowing content authors to create forms in Sitecore without or with very minimum help from Sitecore developers. With Sitecore WFFM content authors can use predefined Sitecore forms or create simple forms using simple drag and drop functionality.

But, recently I came across the requirement to integrate the existing WFFM forms in Sitecore with the Hubspot form. In simple words, we want to maintain forms data in Sitecore as well as in Hubspot.

Luckily, Hubspot allows data to be submitted to Hubspot forms from third party system

This works great, but we cannot hard code all the fields that needs to mapped with hubspot fields and also this would require adding separate save action for each form.

Also, we want to give the ability to the content authors to map the WFFM forms and fields with Hubspot.

So we decided to make use of Sitecore Sheer UI to create a custom editor on save action where content authors can map forms and fields. We created a basic version of connector that can be used with Sitecore 8.2 to connect with hubspot.

Prerequisites:

  • Hubspot account with following information:
    • APIKey
    • PortalID
    • Forms created in Hubspot
  • Sitecore 8.2 Updated 7 or below
  • Sitecore WFFM Module

 

Step 1:

 

  • Once the installation is completed, publish following item.

/sitecore/system/Modules/Web Forms for Marketers/Settings/Actions/Save Actions/SendDataToHubspot

 

Step 2:

  • Go to Website\App_Config\Include\HubspotConnector\Hubspot.config and add your portal Id and APIKey

 

Step 3:

  • Now go to Sitecore form which you want to map with Hubspot form and add SendDataToHubspot action to the the form

 

Step 4:

  • Click on Edit button

Step 5:

  • All the forms available for the account will be fetched from Hubspot and will be rendered in the Select Forms drop down. Select the Form.

 

Step 6:

  • Once, the form is selected, fields associated with form will be fetched and made available to user to select in the field drop down.

 

 

Step 7:

  • Map WFFM fields with the associated Hubspot form fields.

 

  • Save and publish your changes.

 

 

When any visitor submits the forms, along with Sitecore, data will be saved in Hubspot as well.

  • Form in Sitecore Website:

  • Data saved in hubspot.

 

About The Author