This blog will teach you how to attach custom JavaScript to the existing submit button in Sitecore Forms. It only runs if the form is submitted successfully.
Sitecore Changes First
Firstly, we need to create a template that holds the new field for our scripts. Navigate to /sitecore/templates/User Defined/Features/Sitecore Forms/
and create a new template called Custom Scripts. Add a new Multi-Line Text field with the name Form Submit Script
.
Then go to /sitecore/templates/System/Forms/Fields/Button
and add the Custom Scripts template to the base template under the Content tab.
C# Code Changes
Create a new class that extends ButtonViewModel
. We will be overridiing
the following functions: InitItemProperties
and UpdateItemFields
using Sitecore;
using Sitecore.Data.Items;
using Sitecore.Diagnostics;
using Sitecore.ExperienceForms.Mvc.Models.Fields;
namespace MyProject.Feature.SitecoreForms.Models
{
public class CustomScriptButtonViewModel : ButtonViewModel
{
public string FormSubmitScript { get; set; }
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">override</span> <span class="hljs-keyword">void</span> <span class="hljs-title">InitItemProperties</span>(<span class="hljs-params">Item item</span>)
</span>{
Assert.ArgumentNotNull(item, <span class="hljs-keyword">nameof</span>(item));
<span class="hljs-keyword">base</span>.InitItemProperties(item);
FormSubmitScript = StringUtil.GetString((<span class="hljs-keyword">object</span>)item.Fields[<span class="hljs-string">"Form Submit Script"</span>]);
}
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">override</span> <span class="hljs-keyword">void</span> <span class="hljs-title">UpdateItemFields</span>(<span class="hljs-params">Item item</span>)
</span>{
Assert.ArgumentNotNull(item, <span class="hljs-keyword">nameof</span>(item));
<span class="hljs-keyword">base</span>.UpdateItemFields(item);
item.Fields[<span class="hljs-string">"Form Submit Script"</span>]?.SetValue(FormSubmitScript, <span class="hljs-literal">false</span>);
}
}
}
Notice the Form Submit Script field that we added in Sitecore.
Finally, navigate to the existing Button view at Views/FormBuilder/FieldTemplates/Button.cshtml
We will be adding the following code to the end of Button.cshtml
. Read the comments in the code for more details.
<script type="text/javascript">
function () {
// get the input object
var $input = $("input[name='@Html.Name(Model.ItemId)']");
// get the form object by finding the closest form
var $form = $input.closest('form');
<span class="hljs-comment">// exit if there is no form</span>
<span class="hljs-keyword">if</span> ($form.length == <span class="hljs-number">0</span>) {
<span class="hljs-keyword">return</span>;
}
<span class="hljs-comment">// If the button has a script attached to it, run</span>
@<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">string</span>.IsNullOrWhiteSpace(Model.FormSubmitScript)) {
<text>
$form.<span class="hljs-keyword">on</span>(<span class="hljs-string">"submit"</span>, <span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> (</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>) </span></span>{
<span class="hljs-comment">// on form submit, wait 1000 milliseconds for it to submit then check</span>
setTimeout(<span class="hljs-function"><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function"> (</span><span class="hljs-params"></span><span class="hljs-function"><span class="hljs-params"></span>) </span></span>{
<span class="hljs-comment">// if the form is filled out incorrectly and fails to submit, </span>
<span class="hljs-comment">// Sitecore will add a novalidate attribute to the form with the value novalidate</span>
<span class="hljs-keyword">var</span> validateError = $form.attr(<span class="hljs-string">"novalidate"</span>);
<span class="hljs-comment">// if the form doesn't have the error, run the script</span>
<span class="hljs-keyword">if</span> (validateError != <span class="hljs-string">"novalidate"</span>) {
@Html.Raw(Model.FormSubmitScript)
}
}, <span class="hljs-number">1000</span>);
});
<span class="xml"><span class="hljs-tag"><<span class="hljs-regexp">/</span><span class="hljs-name"><span class="hljs-regexp">text</span></span><span class="hljs-regexp">></span></span></span><span class="hljs-regexp">
}
});
</script>
Finishing Up in Sitecore
Now that we have our new class created, go to /sitecore/system/Settings/Forms/Field Types/Structure/Submit Button
and change to Model Type field to: MyProject.Feature.SitecoreForms.Models.CustomScriptButtonViewModel,MyProject.Feature.SitecoreForm
.
And finally, we can go to an existing button on one of our forms, and add a script. Here is an example
Now when we submit the form successfully, you will see a printed message in the console.
Attaching Custom Scripts to Submit Buttons
Thank you for reading my blog on how to attach custom JavaScript to the Sitecore submit button. I find it easier than creating a new JS file and doing event binding.