This is a problem I noticed one or two versions back in Sitefinity where if you create a form and drop a number of fields on the form they correctly make use of the Bootstrap classes (if Bootstrap is the Resource Package you’re using). However, if you use a ParagraphTextField it doesn’t apply the correct formatting.


This is because Sitefinity has forgotten to add two classes to the HTML that make up the template for the ParagraphTextField.


To remedy this I created a copy of the Write.Default.cshtml file found in ResourcePackages/Bootstrap/MVC/Views/ParagraphTextField and placed it in a folder with the same name in root/MVC/Views. So you’re full path should be root/MVC/Views/ParagraphTextField/Write.Default.cshtml.

In this new copy add the following CSS classes:

  1. In the outer DIV add ‘form-group’
  2. In the TEXTAREA add ‘form-control’

@model Telerik.Sitefinity.Frontend.Forms.Mvc.Models.Fields.ParagraphTextField.ParagraphTextFieldViewModel

@using Telerik.Sitefinity.UI.MVC;
@using Telerik.Sitefinity.Frontend.Forms.Mvc.Helpers;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages;

@Html.Script(ScriptRef.JQuery, "top", false)
<div class="@Model.CssClass sf-fieldWrp form-group" data-sf-role="paragraph-text-field-container">
    <input type="hidden" data-sf-role="violation-messages" value='{"maxLength":"@Model.MaxLengthViolationMessage", "required": "@Model.RequiredViolationMessage"}' />
    <label for='@Html.UniqueId("Textarea")'>@Model.MetaField.Title</label>
    <textarea id='@Html.UniqueId("Textarea")' class="form-control" data-sf-role="paragraph-text-field-textarea" name="@Model.MetaField.FieldName" placeholder="@Model.PlaceholderText" @MvcHtmlString.Create(Model.ValidationAttributes)>@Model.Value</textarea>

    @if (!string.IsNullOrEmpty(Model.MetaField.Description))

@Html.Script(Url.WidgetContent("Mvc/Scripts/ParagraphTextField/paragraph-text-field.js"), "bottom", false)

Note: I used Write.Default.cshtml instead of creating a custom template, such as Write.MyTemplateName.cshtml because I wanted this amended template to be used by default. Had I created a custom name I would have had to manually apply this template each time I made use of the ParagraphTextField.