WFFM add custom html attributes to submit button

Question

I need to add some custom html attributes to WFFM submit button.

I know that it is possible to create custom field type for WFFM it is quite easy to do... but it is no way to do it for submit. basically it is located in Sitecore.Form.Web.UI.Controls.FormSubmit namespace at Sitecore.Forms.Core lib.

in WFFM form configuration files it is noting about it. Any ideas how to do it ?

it seems like should be override

// Sitecore.Forms.Mvc.Html.HtmlHelperExtensions
public static MvcHtmlString BootstrapSubmit(this HtmlHelper helper, string title = null)
{
    TagBuilder tagBuilder = new TagBuilder("input");
    tagBuilder.Attributes.Add("type", "submit");
    ISubmitSettings submitSettings = helper.ViewData.Model as ISubmitSettings;
    string value = string.Empty;
    string value2 = string.Empty;
    string text = string.Empty;
    string str = string.Empty;
    if (submitSettings != null)
    {
        value = submitSettings.SubmitButtonSize;
        value2 = submitSettings.SubmitButtonType;
        text = submitSettings.SubmitButtonName;
        str = submitSettings.SubmitButtonPosition;
    }
    tagBuilder.Attributes.Add("value", title ?? text);
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.Append("btn").Append(" ").Append(value).Append(" ").Append(value2);
    IStyleSettings styleSettings = helper.ViewData.Model as IStyleSettings;
    if (styleSettings != null && styleSettings.FormType != FormType.Inline)
    {
        TagBuilder tagBuilder2 = new TagBuilder("div");
        tagBuilder2.AddCssClass(("form-submit-border " + str).Trim());
        tagBuilder.AddCssClass(stringBuilder.ToString().Trim());
        TagBuilder expr_10F = tagBuilder2;
        expr_10F.InnerHtml += tagBuilder;
        return MvcHtmlString.Create(tagBuilder2.ToString());
    }
    tagBuilder.AddCssClass(stringBuilder.ToString().Trim());
    return MvcHtmlString.Create(tagBuilder.ToString());
}

Answer 1

You exactly can override this. See the solution for that:

First of all you need to implement a your custom html helper which should have updated method for rendering the submit button:

using System.Text;
using System.Web.Mvc;
using Sitecore.Forms.Mvc.Interfaces;
using Sitecore.WFFM.Abstractions.Data.Enums;

namespace Namespace.SC.Extensions
{
    public static class WFFMHtmlHelperExtensions
    {
        public static MvcHtmlString CustomBootstrapSubmit(this HtmlHelper helper, string title = null)
        {
            TagBuilder tagBuilder1 = new TagBuilder("input");
            tagBuilder1.Attributes.Add("type", "submit");
            ISubmitSettings model1 = helper.ViewData.Model as ISubmitSettings;
            string str1 = string.Empty;
            string str2 = string.Empty;
            string str3 = string.Empty;
            string str4 = string.Empty;
            if (model1 != null)
            {
                str1 = model1.SubmitButtonSize;
                str2 = model1.SubmitButtonType;
                str3 = model1.SubmitButtonName;
                str4 = model1.SubmitButtonPosition;
            }
            tagBuilder1.Attributes.Add("value", title ?? str3);

        //*** You can add your cusstom attribute here:

        tagBuilder1.Attributes.Add("data-customattribute", "some value");

        //** Adding custom attribute

        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.Append("btn").Append(" ").Append(str1).Append(" ").Append(str2);
        IStyleSettings model2 = helper.ViewData.Model as IStyleSettings;
        if (model2 != null && model2.FormType != FormType.Inline)
        {
            TagBuilder tagBuilder2 = new TagBuilder("div");
            tagBuilder2.AddCssClass(("form-submit-border " + str4).Trim());
            tagBuilder1.AddCssClass(stringBuilder.ToString().Trim());
            tagBuilder2.InnerHtml += (string)(object)tagBuilder1;
            return MvcHtmlString.Create(tagBuilder2.ToString());
        }
        tagBuilder1.AddCssClass(stringBuilder.ToString().Trim());
        return MvcHtmlString.Create(tagBuilder1.ToString());
    }
}
}

Then, after installing WFFM, you should have the following view (FormViewModel.cshtml):

Then you need to find a code there which is below and override it with your custom helper:

Before:

After:

Don't forget to add reference to your custom helper!