There are several options to integrate Optimizely CMS/Commerce with HubSpot CRM. You can use the HubSpot connector or maybe your requirement is just to collect data from customers and submit it to HubSpot.
There are 2 ways HubSpot can capture form data from the website
- HubSpot Tracking Code
- HubSpot Form
HubSpot Tracking Code
You can add HubSpot tracking code on every page of your website (or the pages that use forms). HubSpot tracking code basically looks for the submit event on the button and sends form data to HubSpot.
Now, this approach looks really simple. All you have to do is create a Global property in Site Settings and render a Js snippet code on every page (or the pages that use forms). The problem with this approach is these form submissions are stored in Hubspot as “non-hubspot forms”. That means it is very difficult for CRM users to link these forms’ data with any workflows or prospect deals.
Hubspot form Block
Another option is to create a custom block type and render the Hubspot form. There are a lot of benefits of this approach like
- HubSpot forms can be used as CRM workflows & Deal forecast and conversion.
- HubSpot forms offer progressive profiling on HubSpot
- All spam & security is being handled by HubSpot
- You can style it using your CSS
HubSpot form snippet is usually the same with the exception of following
- Region
- Portal Id
- Form Id
Following is a sample HubSpot form snippet
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: --region--,
portalId: --portal Id--,
formId: --Form id--
});
</script>I have added flexibility of styling form and added the option to open it in the model window
HubSpot Form Block Model
[SiteImageUrl("CMS-icon-block-hubspot-form.png")]
[ContentType(DisplayName = "Hubspot Form Block",
GUID = "00000000-0000-0000-0000-000000000000",
Description = "Provides the space inside which the Hubspot Form will be placed",
GroupName = TRM.Web.Constants.StringConstants.Groups.Social)]
public class HubspotFormBlock : TrmBlock, IControlDisplayOptions
{
#region SiteSettings
[Display(
Name = "Region",
Order = 10,
GroupName = Constants.StringConstants.Tabs.SiteSettings)]
[Required]
public virtual string Region { get; set; }
[Display(
Name = "Portal Id",
Order = 20,
GroupName = Constants.StringConstants.Tabs.SiteSettings)]
[Required]
public virtual string PortalId { get; set; }
[Display(
Name = "Form Id",
Order = 30,
GroupName = Constants.StringConstants.Tabs.SiteSettings)]
[Required]
public virtual string FormId { get; set; }
#endregion
#region Apperance
[Display(
Name = "Enable modal window",
Description = "Changes the style of the block to open in modal view.",
Order = 40,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual bool EnableModalWindow { get; set; }
[Display(
Name = "Call-To-Action button text",
Description = "The text displayed on the Call-To-Action button (if the block is used as a modal window).",
Order = 50,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual string CtaButtonText { get; set; }
[Display(
Name = "Modal window header text",
Description = "The text displayed as header in a modal window (if the block is used as a modal window).",
Order = 60,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual string ModalHeaderText { get; set; }
[Display(
Name = "Enable submit button solid colour style",
Description = "Setting additional button styling.",
Order = 70,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual bool EnableButtonStyling { get; set; }
[Display(
Name = "Enable white form background colour",
Description = "Setting additional background styling.",
Order = 80,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual bool EnableBackgroundStyling { get; set; }
[Display(
Name = "Enable white modal button colour",
Description = "Setting additional button styling.",
Order = 80,
GroupName = Constants.StringConstants.Tabs.Appearance)]
public virtual bool EnableWhiteModalButtonStyling { get; set; }
#endregion
public virtual string GetDisplayOptionClasses(string tag)
{
var contentAreaTags = ServiceLocator.Current.GetInstance<IContentAreaTags>();
if (tag == contentAreaTags.FullWidth)
{
return StringConstants.GridClasses.ColXs12;
}
if (tag == contentAreaTags.HalfWidth)
{
return StringConstants.GridClasses.ColXs6;
}
if (tag == contentAreaTags.OneThirdWidth)
{
return string.Format("{0} {1}", StringConstants.GridClasses.ColXs6,
StringConstants.GridClasses.ColSm4);
}
if (tag == contentAreaTags.OneQuarterWidth)
{
return string.Format("{0} {1}", StringConstants.GridClasses.ColXs6,
StringConstants.GridClasses.ColSm3);
}
if (tag == contentAreaTags.OneSixthWidth)
{
return string.Format("{0} {1} {2}", StringConstants.GridClasses.ColXs6,
StringConstants.GridClasses.ColSm4, StringConstants.GridClasses.ColMd2);
}
if (tag == contentAreaTags.TwoThirdsWidth)
{
return string.Format("{0} {1}", StringConstants.GridClasses.ColXs12,
StringConstants.GridClasses.ColSm8);
}
if (tag == contentAreaTags.ThreeQuartersWidth)
{
return string.Format("{0} {1}", StringConstants.GridClasses.ColXs12,
StringConstants.GridClasses.ColSm9);
}
return StringConstants.GridClasses.ColXs12;
}
public override void SetDefaultValues(ContentType contentType)
{
base.SetDefaultValues(contentType);
EnableBackgroundStyling = false;
EnableButtonStyling = false;
EnableModalWindow = false;
EnableWhiteModalButtonStyling = false;
CtaButtonText = "Subscribe Now";
ModalHeaderText = "Subscribe to our newsletter";
}
}HubSpot Form Block View
model TRM.Web.Models.Blocks.HubspotFormBlock
@{
var classBackground = Model.EnableBackgroundStyling ? "hbspt-form-white-background" : "";
var classButton = Model.EnableButtonStyling ? "hbspt-form-btn2" : "";
var classModalButton = Model.EnableWhiteModalButtonStyling ? "hs-light" : "btn-secondary";
}
@if (@Model.EnableModalWindow)
{
<button type="button" class="btn @classModalButton" data-toggle="modal" data-target="#@Html.Raw(Model.FormId)">
@Model.CtaButtonText
</button>
<div class="modal hs-modal fade" id="@Html.Raw(Model.FormId)" tabindex="-1" role="dialog" aria-labelledby="@Html.Raw(Model.FormId)Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="@Html.Raw(Model.FormId)Label">@Model.ModalHeaderText</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body">
<div class="@classBackground @classButton">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "@Html.Raw(Model.Region)",
portalId: "@Html.Raw(Model.PortalId)",
formId: "@Html.Raw(Model.FormId)"
});
</script>
</div>
</div>
</div>
</div>
</div>
}
else
{
<div class="@classBackground @classButton">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "@Html.Raw(Model.Region)",
portalId: "@Html.Raw(Model.PortalId)",
formId: "@Html.Raw(Model.FormId)"
});
</script>
</div>
}You can use block-specific CSS to style your form according to your website template