(Bug-free) Custom Form IDs in Sitecore Forms

July 6, 2020 Rodrigo Peplau 0

Some time ago I was challenged by one requirement need from the marketing team, related to the Sitecore Forms that we put together for them.

In order to do a better event tracking with Google Tag Manager, we had to give the power for Content Editor to customize the form ID. Instead of a hard to read string, composed by concatenations of the form and the session Guids, we should enable any kind of arbitrary string to be configured.

Speaking to my long time friend and Hackathon partner Joao Neto, who is great with Experience Forms, he put together this solution. What amazing friend hu? Joao’s solution does the trick as the marketing team requested, but introduced a 500 error that was affecting the Google ranking – and that, as we know, is also something that marketers love to hate.

So I was provided with the time necessary to investigate and fix this error and now share it with our community.

The error

The forms with custom IDs will trigger 500 errors when doing the field tracking – which happens when you fill a field and move to the next field by pressing TAB.

These errors are not visible to final users, they occur behind the scenes and can potentially affect your search ranking. You can see them happening by using tools like Fiddler or Developer Tools.

The errors are also tracked as Error Interactions of your current Contact:

Why it breaks?

The issue happens because there are some native Javascript that uses the Form ID to extract the Session Id. Since we have modified the Form ID, then this code will fail, causing the issue.

The fix

In order to fix this issue, we will store the original form ID as another attribute in the form, then change the defective javascript to take from that attribute instead of the Form ID itself.

 

STEP 1 – Save the original ID

Looking back to Joao’s code, the class that we need to modify is “SetFormId“.

Modify the line 34 adding the following two lines, before assigning the customId to the form:

if (!args.Attributes.ContainsKey("originalId"))
   args.Attributes.Add("originalId",args.FormHtmlId);
// Setup custom form ID
args.FormHtmlId = customId;

 

STEP 2 – Change the JS file to pick from that attribute

The following native JS must be changed: /sitecore%20modules/Web/ExperienceForms/scripts/form.tracking.js

The method “getSessionId” must be modified to the following code:

function getSessionId(form) {
   var formId = form[0].id;
   // The fix starts here
   if ($jq(form[0]).attr("originalId")!==undefined)
      formId = $jq(form[0]).attr("originalId");
   // The fix ends here
   var targetId = formId.slice(0, -(formId.length - formId.lastIndexOf("_") - 1)) + "FormSessionId";
   var element = form.find("input[type='hidden'][id=\"" + targetId + "\"]");
   return element.val();
}

Categories: Experience Forms