module

How to integrate HubSpot Form to Sitecore

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

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

Hopefully, you can see something like this:

This slideshow requires JavaScript.

How to use the module

  1. for a better practice, in your Sitecore website folder, rename \App_Config\Include\Examples\LiveMode.config.example to LiveMode.config in order to enable live mode, so that data is read directly from the master database, thereby bypassing the need to publish
  2. download this Sitecore package (sample sites) and then install it to your Sitecore instance via Installation Wizard
  3. add new host name mvcsite.local to both the hosts file and the site bindings in IIS
  4. hopefully, you can see something like this
    • hpi_5
  5. 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
    • hpi_9.png
    • on Select a Rendering dialog, add it to main placeholder + check Open the Properties dialog box immediately checkbox and then click Select button
    • hpi_10
    • 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
    • hpi_11
  6. close all the dialogs and then navigate to http://mvcsite.local/ you would see something like this
  7. hpi_12

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.
  • hpi_13
  • log into Sitecore, access /sitecore/system/Settings/Feature/Hubspot Form Integration/Hubspot Form Settings to update the new values and then save it
  • hpi_14.png
  • 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!

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.