Someone wants you to integrate an existing submit form of an external system, for instance – HubSpot form – to her Sitecore web application and also make it editable so that she will be able to replace it to another one later without the code change.

Assumptions

• using a trial account to create HubSpot forms
  • https://www.hubspot.com/products/get-started
  • https://knowledge.hubspot.com/articles/kcs_article/forms/create-forms
• should follow Helix principles to create Hubspot Form Integration Sitecore module by customizing the HubSpot form embed code
• making the HubSpot form settings editable in Sitecore

Inspired by NuGet packages.config is so yesterday, personally, I wanted to play around with PackageReference in order to build and deploy my HubSpot Form Integration Sitecore module successfully based out of various Sitecore versions (you know, I’m a super lazy developer so I don’t want to create multiple Visual Studio projects for multiple Sitecore versions)

This slideshow requires JavaScript.

How to install Hubspot Forms Integration module

Download and then install the appropriate module version below to your Sitecore instance via Installation Wizard

Note: you can download it from Sitecore Marketplace as well

• For Sitecore 9.1: Vhs-HubspotFormIntegration-Sc91-1.0.0.zip
  • Note: once Sitecore 9.1 has added Feature item by default, you should select Merge / Merge option when installing it
  • 
• For Sitecore 8.1 – 9.0: Vhs-HubspotFormIntegration-Sc81_90-1.0.0.zip
  • Note: this version is to solve the following issue
  • 

Hopefully, you can see something like this:

This slideshow requires JavaScript.

How to use the module

1. download this Sitecore package (sample sites) and then install it to your Sitecore instance via Installation Wizard
2. add new host name mvcsite.local to both the hosts file and the site bindings in IIS
3. hopefully, you can see something like this
   • 
4. add Hubspot Form rendering to the page above
   • log into Sitecore and then access /sitecore/content/MvcSite/Home item
   • click on Presentation menu -> Details button -> Final Layout tab -> Edit link -> Controls tab -> Add button
   • 
   • on Select a Rendering dialog, add it to main placeholder + check Open the Properties dialog box immediately checkbox and then click Select button
   • 
   • on Control Properties dialog, click on Browse link in order to select the associated content, it should be /sitecore/system/Settings/Feature/Hubspot Form Integration/Hubspot Form Settings item
   • 
5. close all the dialogs and then navigate to http://mvcsite.local/ you would see something like this
6. 

How to change the HubSpot form

• after creating a new HubSpot form, we need to publish it in order to make it live. In this case, we select Embed code tab and then note the value of portalId and formId.
• 
• log into Sitecore, access /sitecore/system/Settings/Feature/Hubspot Form Integration/Hubspot Form Settings to update the new values and then save it
• 
• navigate to http://mvcsite.local/ you would see the new HubSpot form

Note: you may want to integrate the second HubSpot form as well

• create a new Sitecore item which is same as /sitecore/system/Settings/Feature/Hubspot Form Integration/Hubspot Form Settings then update its fields with the second HubSpot form settings
• address the web page which you want to integrate the second form to
• follow Step 5 – 6 in How to use the module section

---

Note

You may want to have a look at how to customize the form embed code as well

---

Not Good Enough? Please feel free to download the source code and add your own enhancements if necessary.

---

Got issues?

Please send your issues (with screenshots if possible) to viet.hoang.sitecore@gmail.com so that I have a chance to understand your problem and be able to suggest the solution.

Happy Sitecore Coding!