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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
public partial class _Default: System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Do Nothing } protected void btnSubmit_Click(object sender, System.EventArgs e) { // Build dictionary of field names/values (must match the HS field names) Dictionary < string, string > dictFormValues = new Dictionary < string, string > (); dictFormValues.Add("firstname", txtFirstName.Text); dictFormValues.Add("lastname", txtLastName.Text); dictFormValues.Add("email", txtEmail.Text); dictFormValues.Add("phone", txtPhone.Text); dictFormValues.Add("company", txtCompany.Text); // Form Variables (from the HubSpot Form Edit Screen) int intPortalID = ; //place your portal ID here string strFormGUID = ""; //place your form guid here // Tracking Code Variables string strHubSpotUTK = Request.Cookies["hubspotutk"].Value; string strIpAddress = System.Web.HttpContext.Current.Request.UserHostAddress; // Page Variables string strPageTitle = this.Title; string strPageURL = System.Web.HttpContext.Current.Request.Url.AbsoluteUri; // Do the post, returns true/false string strError = ""; bool blnRet = Post_To_HubSpot_FormsAPI(intPortalID, strFormGUID, dictFormValues, strHubSpotUTK, strIpAddress, strPageTitle, strPageURL, ref strError); if (blnRet) { pnlSuccess.Visible = true; } else { pnlError.Visible = true; lblError.Text = strError; } } /// /// This helper function sends data to the the HubSpot Forms API /// /// HubSpot Portal ID, or 'HUB ID' /// Unique ID for the form /// Dictionary containing all of the field names/values /// UserToken from the visitor's browser /// IP Address of the visitor /// Title of the page they visited /// URL of the page they visited /// /// public bool Post_To_HubSpot_FormsAPI(int intPortalID, string strFormGUID, Dictionary < string, string > dictFormValues, string strHubSpotUTK, string strIpAddress, string strPageTitle, string strPageURL, ref string strMessage) { // Build Endpoint URL string strEndpointURL = string.Format("https://forms.hubspot.com/uploads/form/v2/{0}/{1}", intPortalID, strFormGUID); // Setup HS Context Object Dictionary < string, string > hsContext = new Dictionary < string, string > (); hsContext.Add("hutk", strHubSpotUTK); hsContext.Add("ipAddress", strIpAddress); hsContext.Add("pageUrl", strPageURL); hsContext.Add("pageName", strPageTitle); // Serialize HS Context to JSON (string) System.Web.Script.Serialization.JavaScriptSerializer json = new System.Web.Script.Serialization.JavaScriptSerializer(); string strHubSpotContextJSON = json.Serialize(hsContext); // Create string with post data string strPostData = ""; // Add dictionary values foreach(var d in dictFormValues) { strPostData += d.Key + "=" + Server.UrlEncode(d.Value) + "&"; } // Append HS Context JSON strPostData += "hs_context=" + Server.UrlEncode(strHubSpotContextJSON); // Create web request object System.Net.HttpWebRequest r = (System.Net.HttpWebRequest) System.Net.WebRequest.Create(strEndpointURL); // Set headers for POST r.Method = "POST"; r.ContentType = "application/x-www-form-urlencoded"; r.ContentLength = strPostData.Length; r.KeepAlive = false; // POST data to endpoint using(System.IO.StreamWriter sw = new System.IO.StreamWriter(r.GetRequestStream())) { try { sw.Write(strPostData); } catch (Exception ex) { // POST Request Failed strMessage = ex.Message; return false; } } return true; //POST Succeeded } |
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.
|
1 2 3 4 5 |
dictFormValues.Add("firstname", txtFirstName.Text); dictFormValues.Add("lastname", txtLastName.Text); dictFormValues.Add("email", txtEmail.Text); dictFormValues.Add("phone", txtPhone.Text); dictFormValues.Add("company", txtCompany.Text); |
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:
- Install the Hubspot Connector 1-0.
- 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
|
1 2 |
<setting name="Hubspot:APIKey" value="xxxxxxxx-xxxx-xxxx-xxx-xxxxxxxxxxxx"/> <setting name="Hubspot:PortalID" value="xxxxxx"/> |
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.
