8

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());
}
2
  • What are the attributes you need to add? Can you do it using JavaScript, i.e. add a custom CSS class to the button and then trigger some code to add it based on that
    – jammykam
    Sep 27 '17 at 15:59
  • @jammykam I need add some data based on back end data Sep 27 '17 at 17:09
6

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):

FormViewModel.cshtml

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

Before:

wffm submit button

After:

after appling changes

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.