The customizable fields of an MVC form

Abstract

Customize the look of CSS themes and styles in MVC forms.

In Sitecore, you can customize the appearance of ASP.NET MVC (MVC) forms as well as ASP.NET Web Forms (non-MVC) forms.

By default, forms are stored in the content tree, in the Website, Local Forms, or Sample Forms folders (sitecore/System/Modules/Web Forms for Marketers).

Note

Depending on your Sitecore configuration, the location of where you store your forms can be different.

You can customize the following fields in Sitecore MVC forms:

Field	Description
Form Type	Specify the positioning of the form: Basic – places the form vertically, stacked and with labels placed on top of the fields. Horizontal – places form elements in two columns; it places labels on the left and input elements on the right. Inline – places all form elements inline and labels on the side. The alignment of the form depends on the Form Alignment field. The default value is Basic.
Form Alignment	Specify the alignment of elements within the form: Center – places elements centered within a form. Left – aligns the elements within a form on the left. Right – aligns the elements within a form on the right. The default value is Left.
Right-Column Style	Specify the width and style of the right column and define the relevant screen size: xs = mobile phones sm = tablets md = desktops lg = larger desktops Note The sum of the width of the right and left columns in the same row must be equal to 12. To change how the content in the column looks, you can also enter the name of a Bootstrap CSS class, for example, col-md-10 col-xs-10 col-lg-10 col-sm-10 well-lg. The default value is col-md-10 col-xs-10 col-lg-10 col-sm-10.
Left-Column Style	Specify the width and style of the left column and define the relevant screen size: xs = mobile phones sm = tablets md = desktops lg = larger desktops Note The sum of the width of the right and left columns in the same row must be equal to 12. To change how the content in the column looks, you can also enter the name of a Bootstrap CSS class, for example, col-md-2 col-xs-2 col-lg-2 col-sm-2 jumbotron. The default value is col-md-2 col-xs-2 col-lg-2 col-sm-2.
Custom CSS Class	Specify a custom CSS class to assign to a form field to customize a form's borders, colors, fonts, and so on. For example: `contentDescription`
Submit Button Position	Specify the position of the Submit button on your form. The options are: Center Left Right Default
Submit Button Type	Specify the style of the Submit button on your form. The options are: Danger Default Info Link Primary Success Warning
Submit Button Size	Specify the size of the Submit button on your form. The options are: Default Extra Small Large Small
Parameters	Enter the name of the property that you want to modify on a form's class. For example, to modify the date format property, enter: `<DateFormat>dd_mm_yyyy</DateFormat>`