The customizable fields of an MVC form

Version: 8.1

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>

Do you have some feedback for us?

If you have suggestions for improving this article,