Using different form templates

Form Templates are the concept in Chameleon Forms that allows you to abstract the HTML that makes up the form itself as well as the components within it like messages, sections, fields and navigation.

Default form template

The DefaultFormTemplate outputs a sensible default that looks good without any / with minimal CSS and is a nice way to semantically describe a form. It makes use of definition lists to do this.

See Configuring the Default Form Template / Default global config.

To see examples of the HTML this template outputs check out:

  • Form HTML
  • Message HTML - including the documentation about how the ChameleonForms MessageType maps to the Twitter Bootstrap Emphasis Styles
  • Section HTML - including top-level and nested sections
  • Navigation HTML - including how to add submit and reset buttons
  • Field HTML - including:
    • The HTML it uses to layout the field sub-components
    • The HTML it uses for hints
    • The default required designator HTML (which can be overriden)
    • The HTML for nested fields

Twitter Bootstrap 3 form template

See Twitter Bootstrap 3 template.

Custom templates

See Creating custom form templates.

Custom extension method

If you would like to change the template being used across one or more forms, or would like a method name that is more meaningful to your application than BeginChameleonForm, you can simply define you own extension method instead, e.g.:

    public static class FormHelpers
    {
        public static IForm<TModel> BeginMyApplicationNameForm<TModel>(this HtmlHelper<TModel> htmlhelper, string action = "", FormMethod method = FormMethod.Post, HtmlAttributes htmlAttributes = null, EncType? enctype = null)
        {
            return new Form<TModel>(htmlhelper, new MyCustomFormTemplate(), action, method, htmlAttributes, enctype);
        }
    }

If you'd like to use the globally configured default form template rather than newing up the template as shown above then you can use the same code in the BeginChameleonForm extension method to resolve the template:

htmlHelper.GetDefaultFormTemplate()

Which is an extension method on IHtmlHelper in the ChameleonForms namespace, which resolves IFormTemplate from the request services collection. For more information see Configuring the form template.

Using multiple templates in a single application

If you want to use different form templates across multiple forms in a single application then you can't make use of FormTemplate.Default and you will need to create multiple extension methods (as shown above) for each form template you want to use. Then you opt in to a particular type of template by using the corresponding extension method for a given form.