With Umbraco Forms, you have the full control over the markup that renders with Forms, but in Umbraco Forms, it would be the same markup for each form, but try to see this documentation.
That helped me a lot but I just think that my output is a little messy. I have tried to remove some og the <divs> but I was not able to remove all of them.
Is the output amount below what to expect when using Umbraco forms?
I think that you can keep the file, as it is by default, and the add the divs and stuff to this. When I get home, I would try to make an example that you can use.
With this code you will get a div with the class="form-group" around every input field. For adding the class="form-control" to each field type go to this \Views\Partials\Forms\Fieldtypes folder in your Umbraco installation, and add the class to each field type.
@foreach (var c in fs.Containers) { foreach (FieldViewModel f in c.Fields) { bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;
I would like to suggest a different approach to custom css markup and styling. You could just create css styles using the form name you specify within Forms. In my example below, my form is named H_Form and I can apply whatever styling to my form without having to make any changes to the default razor view.
Umbraco 7 Forms custom css and div tags
Hi
How is it possible to achieve this with Umbraco Forms (wrap a div and a class around every input field):
// René
Hi René
With Umbraco Forms, you have the full control over the markup that renders with Forms, but in Umbraco Forms, it would be the same markup for each form, but try to see this documentation.
https://our.umbraco.org/documentation/Products/UmbracoForms/Developer/Custom-Markup/
Hope this helps,
/Dennis
Hi Dennis
That helped me a lot but I just think that my output is a little messy. I have tried to remove some og the <divs> but I was not able to remove all of them.
Is the output amount below what to expect when using Umbraco forms?
// René
Hi René
I think that you can keep the file, as it is by default, and the add the divs and stuff to this. When I get home, I would try to make an example that you can use.
/Dennis
Hi René,
With this code you will get a div with the class="form-group" around every input field. For adding the class="form-control" to each field type go to this \Views\Partials\Forms\Fieldtypes folder in your Umbraco installation, and add the class to each field type.
@using Umbraco.Forms.Core
@using Umbraco.Forms.Mvc.Models
@using Umbraco.Forms.Mvc.BusinessLogic
@using Umbraco.Forms.MVC.Extensions
@using Umbraco.Web
@using ClientDependency.Core.Mvc;
@model Umbraco.Forms.Mvc.Models.FormViewModel
@{
Html.EnableClientValidation(true);
Html.EnableUnobtrusiveJavaScript(true);
}
@if (Model.SubmitHandled)
{
if (Model.RenderMode == "full" || Model.RenderMode == "form")
{
<p class="contourMessageOnSubmit">@Html.Raw(Model.MessageOnSubmit)</p>
}
}
else
{
if (Model.RenderMode == "full" || Model.RenderMode == "form")
{
<div id="contour_form_@{@Model.FormName.Replace(" ", "")}" class="contour @Model.CssClass">
@using (Html.BeginUmbracoForm<Umbraco.Forms.Web.Controllers.UmbracoFormsController>("HandleForm"))
{
@Html.HiddenFor(x => Model.FormId)
@Html.HiddenFor(x => Model.FormName)
@Html.HiddenFor(x => Model.RecordId)
@Html.HiddenFor(x => Model.PreviousClicked)
<input type="hidden" name="FormStep" value="@Model.FormStep" />
<div class="contourPage">
@if (string.IsNullOrEmpty(Model.CurrentPage.Caption) == false)
{
<h4 class="contourPageName">@Html.Raw(Model.CurrentPage.Caption)</h4>
}
@if (Model.ShowValidationSummary)
{
@Html.ValidationSummary(false)
}
@foreach (FieldsetViewModel fs in Model.CurrentPage.Fieldsets)
{
<fieldset class="contourFieldSet">
@if (string.IsNullOrEmpty(fs.Caption) == false)
{
<legend>@Html.Raw(fs.Caption)</legend>
}
<div class="row-fluid">
@foreach (var c in fs.Containers)
{
<div class="@("span" + c.Width) @("col-md-" + c.Width)">
@foreach (FieldViewModel f in c.Fields)
{
bool hidden = f.HasCondition && f.ConditionActionType == FieldConditionActionType.Show;
<div class="@f.CssClass" @{
if (hidden)
{
<text> style="display: none"</text>
}
}>
@if (!f.HideLabel)
{
<label for="@f.Id" class="fieldLabel">@Html.Raw(f.Caption) @if (f.ShowIndicator)
{
<span class="contourIndicator">@Model.Indicator</span>
}</label>
}
@if (!string.IsNullOrEmpty(f.ToolTip))
{
<span class="help-block">@f.ToolTip</span>
}
<div class="form-group">
@Html.Partial(FieldViewResolver.GetFieldView(Model.FormId.ToString(), f.FieldTypeName, f.Caption), f)
</div>
@if (Model.ShowFieldValidaton)
{
@Html.ValidationMessage(f.Id)
}
</div>
}
</div>
}
</div>
</fieldset>
}
<div style="display: none">
<input type="text" name="@Model.FormId.ToString().Replace("-", "")" />
</div>
<div class="contourNavigation row-fluid">
<div class="col-md-12">
@if (Model.IsMultiPage)
{
if (!Model.IsFirstPage)
{
<input class="btn prev cancel" type="submit" value="@Model.PreviousCaption" name="__prev"/>
}
if (!Model.IsLastPage)
{
<input type="submit" class="btn next" value="@Model.NextCaption" name="next"/>
}
if (Model.IsLastPage)
{
<input type="submit" class="btn primary" value="@Model.SubmitCaption" name="submit"/>
}
}
else
{
<input type="submit" class="btn btn-lg btn-theme-primary" value="@Model.SubmitCaption" name="submit"/>
}
</div>
</div>
</div>
}
</div>
}
if (Model.RenderMode == "full" || Model.RenderMode == "script")
{
@Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)
foreach (var script in Model.CurrentPage.JavascriptFiles)
{
if (Model.UseClientDependency)
{
Html.RequiresJs(script.Value);
}
else
{
<script type="text/javascript" src="@Url.Content(script.Value)"></script>
}
}
if (Model.CurrentPage.JavascriptCommands.Count > 0)
{
<script type="text/javascript">
@foreach (var cmd in Model.CurrentPage.JavascriptCommands)
{
<text>@Html.Raw(cmd)</text>
}
</script>
}
foreach (var css in Model.CurrentPage.CssFiles)
{
if (Model.UseClientDependency)
{
Html.RequiresCss(css.Value);
}
else
{
<link rel="stylesheet" href="@Url.Content(css.Value)" />
}
}
}
}
Hope this helps,
/Dennis
Hi Dennis
Great that was what I needed. Thanks!
// René
Hi Dennis
Are all the extra <div> tags and <fieldset> that comes with the Umbraco Form really necessary?
It would be great if the form was almost as clean as the code in my first post.
I have tried to remove the extra <div> tags and <fieldset> but that gives me some errors.
See the <div> tags and fieldset below:
// René
Hi Dennis
I managed to make it a bit more clean:
// René
Hi René
That is great to hear. Happy that I could help you solve the question about how to customize the markup for the Umbraco Forms
Happy Umbraco coding :)
/Dennis
I would like to suggest a different approach to custom css markup and styling. You could just create css styles using the form name you specify within Forms. In my example below, my form is named H_Form and I can apply whatever styling to my form without having to make any changes to the default razor view.
/Martin
is working on a reply...