0

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 1

1

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.

enter image description here

Sign up to request clarification or add additional context in comments.

3 Comments

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?
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?
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.