Sitecore WFFM-Webforms customize html structure - sitecore8

Question

I am Using WFFM with Sitecore-8.2-Update 4 Version. So i have a requirement to change HTML structure of WFFM webforms.
Let me share my case.
We have Name Section that contains first name and last name.
IN WFFM form designer i have created like below
Then the Html is generated like below by WFFM.
<div class="required-field form-group">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}" />
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">LastName</label>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The LastName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
</span>
</div>
<div class="required-field form-group">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}" />
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">FirstName</label>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The FirstName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
</span>
</div>
But I need a Html like below one
<div class="required-field form-group has-feedback">
<span>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The First field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}">
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">First</label>
<span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
</span>
</span>
<span>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The Last field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}">
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">Last</label>
<span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
</span>
</span>
</div>
Steps that i followed change html structure of WFFM.
WFFM using Sitecore.Forms.Mvc.Controllers.FormController and Its using default index action. By this it is using ~\Views\Forms\Index.cshtml on root web site.
Its basically using Editor for template.
So in my case i need to find out name section and need to change my html structure. From my findings SectionViewModel.cshtml is responsible for rendering all sections.
I have create one method to check whether current section needs to customized or not.
#if
(Renderer.IsCustomisedSection(Model))
Below my full SectionViewModel view file. (~\Views\Form\EditorTemplates\SectionViewModel.cshtml)
#using Sitecore.Forms.Mvc.Html
#using AAA.Foundation.HtmlHelper.WffmRenderer;
#model Sitecore.Forms.Mvc.ViewModels.SectionViewModel
<!--Render customised action-->
#if (Renderer.IsCustomisedSection(Model))
{
var customisedFieldHtml = Html.EditorFor(x => Model.Fields);
#Html.Raw(Renderer.RenderCustomisedFieldSection(customisedFieldHtml))
}
else
<!--Render customised action Ends-->
if (Model.ShowTitle && !string.IsNullOrEmpty(Model.Title))
{
<fieldset class="#Model.CssClass">
<legend>#Html.BootstrapText("Title")</legend>
#if (Model.ShowInformation && !string.IsNullOrEmpty(Model.Information))
{
<p>#Html.BootstrapText("Information")</p>
}
<div class="row">
<div class="col-md-12">
#Html.EditorFor(x => Model.Fields)
</div>
</div>
</fieldset>
}
else
{
#Html.EditorFor(x => Model.Fields)
}
This is how i can catch Name section by model title.Below my renderer class file
public static bool IsCustomisedSection(Sitecore.Forms.Mvc.ViewModels.SectionViewModel model) {
bool result = false;
// Check the model needs to customised
if (model.Title == "Name") { // For Ex:
result = true;
}
return result;
}
Then i will call respective customize html section like below.
var customisedFieldHtml = Html.EditorFor(x => Model.Fields);
#Html.Raw(Renderer.RenderCustomisedFieldSection(customisedFieldHtml))
Using "Html.EditorFor(x => Model.Fields)" this i can get default generated html. Then i will pass it to my customise render method. This will identify which sites and which section rendere needs to apply.
public static HtmlString RenderCustomisedFieldSection(HtmlString
customisedSectionHtml)
{
string caseValue = "SiteName-SectionName";
HtmlString result = new HtmlString(string.Empty);
switch (caseValue) {
case "SiteName-SectionName":
result = SiteName_Renderer.NameSection(customisedSectionHtml);
break;
}
return result;
}
My final customised html rendere method like below. I am using html agility pack to reframe the htmls.
public static HtmlString NameSection(HtmlString rawHtml)
{
HtmlNode customisedRoot = null;
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(rawHtml.ToString());
// Find each form group elements
var groupHtml = doc.DocumentNode
.Descendants("div")
.Where(d =>
d.Attributes.Contains("class")
&&
d.Attributes["class"].Value.Contains("form-group")
);
if (groupHtml.Count() > 0)
{
// Initialise root
customisedRoot = groupHtml.First().Clone();
customisedRoot.RemoveAllChildren();
// Customised the html
foreach (HtmlNode htmlNode in groupHtml)
{
HtmlDocument innerRootDoc = new HtmlDocument();
HtmlNode innerRoot = innerRootDoc.CreateElement("span");
var helpBlock = htmlNode.Descendants("span").Where(d =>
d.Attributes.Contains("class")
&&
d.Attributes["class"].Value.Contains("help-block")
);
innerRoot.PrependChild(helpBlock.FirstOrDefault());
var label = htmlNode.Descendants("label");
innerRoot.PrependChild(label.FirstOrDefault());
var inputs = htmlNode.Descendants("input");
foreach (HtmlNode inputsNode in inputs)
{
innerRoot.PrependChild(inputsNode);
}
customisedRoot.PrependChild(innerRoot);
}
}
return (customisedRoot!=null)?new HtmlString(customisedRoot.OuterHtml): new HtmlString(String.Empty);
}
By this approach i can able to customize WFFM web form html.
Below are i have tested after my html changes.
Does validation working or not in website.
If i submit the form will it available in form-reports section.In download excel whether submitted value will present or not.
So all the above cases or passed.
My query is above approach will break any other functionality.