I've installed WFFM 2.4 on my Sitecore 7.2 MVC and its working correctly. Now I want to modify the way fields are being rendered so I can apply/use existing css. Has anyone come across this before? I'm changing the default.css to get some styling correct but there are some fields that I need to change the way they are being rendered.
1 Answer
In the folder yourhostname\Views\Form you have index.cshtml with the next content:
@using Sitecore.Forms.Mvc
@using Sitecore.Forms.Mvc.Html
@model Sitecore.Forms.Mvc.ViewModels.FormViewModel
@{
ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix = Model.ClientId;
var main = string.Format("{0}main.js", Constants.ScriptsBaseUrl);
var requirejs = string.Format("{0}require-2.1.15.js", Constants.ScriptsBaseUrl);
var bootstrap = string.Format("{0}content/bootstrap.min.css", Constants.ScriptsBaseUrl);
var fieldsCss = string.Format("{0}content/Fields.css", Constants.ScriptsBaseUrl);
var jqueryui = string.Format("{0}content/themes/base/all.css", Constants.ScriptsBaseUrl);
}
@Html.RenderStyles(jqueryui, fieldsCss)
@if (Settings.EnableBootstrapCssRendering)
{
@Html.RenderStyles(bootstrap)
}
@Html.EditorFor(x => Model)
@Html.RenderScripts(requirejs)
@Html.RenderScripts(main)
You can change css and js files used. Above content is from a 8.1 solution but on 7.2 I guess is almost the same. On Views/Forms/EditorTemplates you have cshtml files for every type of fields.
3 Comments
Snapper
Hi Sitecore Climber, I found that file and it allowed me to point to my custom css. However I need to modify the render itself. For example, I need to add a <div class="example"> around the fields. How can I achieve this? Am I missing something?
Snapper
I reckon thats exactly what I was looking for! I imagine that if I need a custom field I'd have to add it there as well?
Vlad Iobagiu
if you want a custom field you need to create your field here: /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types . I suggest you to check with dot peek how are made existing fields.
