• Introduction
• Localizing the front-end
• Working with styling
• Changing the HTML or behavior of existing fields
• How to create a new field type
• How to create a new submit handler
• How to create a new security handler
• How to localize the admin UI
• The configuration file

The configuration file

The Form Builder’s configuration file allows you to control what tools are available for you when creating forms with the Form Builder. The file is located on your website at:

• ~/App_Data/Composite/Configuration/Composite.Forms.FormBuilder.xml

The tools available for configuration here are:

• Form fields and other form components (see “How to create a new field type”)
• Submit actions (see “How to create a new submit handler”)
• Secure data submission (see “How to create a new security handler”)
• Form preview styles (see “Form preview styles”)

These are all reflected in the section structure of the configuration file:

<FormBuilder xmlns:f="http://www.composite.net/ns/function/1.0">
  <Fields>
   <!-- field groups and fields -->
  </Fields>
  <Actions>
   <!-- submit actions -->
  </Actions>
  <SecurityHandlers>
   <!-- security handlers -->
  </SecurityHandlers>
  <FieldEditor>
    <Styles>
         <!—links to style sheets -->
    </Styles>
  </FieldEditor>
</FormBuilder>

^{Listing 9: Sections in the Form Builder’s configuration file}

Each form field or handler you want to use when creating forms must be “registered” in this configuration file. Otherwise, they won’t be available in the Form Builder GUI.

Form preview styles

The appearance of the fields in the form preview (the middle area on the “Designer” tab) is controlled via the styles defined in stylesheets.

By default, the form preview uses:

You can reference other stylesheets along with or in place of, the default style sheet in the <FieldEditor/> section within the <Styles/> element.

  <FieldEditor>
    <Styles>
      <Style file="~/Frontend/Composite/Forms/FormBuilder/FormBuilderPreview.less" />
    </Styles>
  </FieldEditor>

^{Listing 10: Stylesheet reference in the configuration}