Creating a hidden field for Sitecore Forms

Sitecore Forms is a versatile tool included with Sitecore 9. Its intuitive controls make it simple for content authors to create their own forms and include them in a page by using the Mvc Form rendering.In a recent project, I found myself needing to fulfill a customer request to include the URL of the page where the form was filled out as part of the submitted form data. Normally a developer would add a hidden field to the standard HTML form, and then use JavaScript or something similar to populate the “value” attribute of that field with the current window location.However, out-of-the-box Sitecore Forms doesn’t come with a hidden field type for authors to use. Thankfully, Sitecore provides documentation on how to create a custom form element for Sitecore Forms.Following this tutorial gets us most of the way there.However, I was then running into a problem – the value I’d populated in the form wasn’t coming across to the server. I found that someone else was having a similar issue in trying to get a Google Recaptcha to submit with their Sitecore form, as described by this blog post.Here, instead of using the FieldViewModel class, they inherit from the specific MultipleLineTextViewModel. Since we only need a single line of text to hold a URL, we can use StringInputViewModel, giving us this code:

[Serializable]	public class ReferringURLViewModel : StringInputViewModel	{		protected override void InitItemProperties(Item item)		{			base.InitItemProperties(item);		}		protected override void UpdateItemFields(Item item)		{			base.UpdateItemFields(item);		}	}

Then we can create the view for the field as follows:

@model Foundation.Forms.Models.ReferringURLViewModel<input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="hidden" value="" /><script type="text/javascript">	var hiddenField = document.getElementById(@Html.Raw("\"" + Html.IdFor(m => Model.Value) + "\""));	hiddenField.value = window.location.href;	var parent = hiddenField.parentNode;	if (parent.classList.contains("sc-formdesign-fieldcontainer")) {		var textDiv = document.createElement("div");		textDiv.innerHTML = "(Hidden referring URL field)";		parent.appendChild(textDiv);	}</script>

The JavaScript here both sets the value of the hidden field to window.location.href, and adds a text div if the field is being displayed inside the Sitecore Forms Designer, so that the field can easily be found.