Defining custom form layout

Development model: MVC Portal Engine
✖
Copy to clipboard

The layout of a form is the HTML output code that the system renders on pages when you add the form. It determines how the form’s fields are organized, and overall how the form appears to visitors.

After you define a form (using the Form builder or the Field editor), the form uses a default layout. The default layout consists of either a table or <div> elements containing the form’s fields, depending on the configuration of the given form web part or widget. When using the default layout, the form’s structure and field order is fully controlled by the field definitions on the Fields or Form builder tab.

If you are not satisfied with the default form layout, you can create your own custom layout for individual forms. The custom layout can be defined on the Layout tab of a form’s editing interface in the Forms application.

To modify the default layout of a form:

  1. Open the Forms application.

  2. Edit () a form.

  3. Switch to the Layout tab.

  4. Select Use custom form layout.

  5. Select HTML or ASCX as the Layout type.

  6. Click the Generate default layout button.

    • This generates a table containing all fields in the form with appropriate labels, input controls and validation controls.
    • Alternatively, you may select the Layout element and field and click the Insert button. This allows you to select which fields appear in the form, and their exact locations within the form’s output code.

  7. Alter the appearance of the form using actions on the text editor toolbar or by editing the layout code (click the Source button on the editor toolbar to access the code directly).

    • For example, type text above the form, select it and apply the Heading 2 format through the text editor toolbar.
      Defining a custom layout for a form

  8.  (Optional) Click Attachments in the tab’s header to upload files with the form.

    • The form’s attachments can then be pasted into the layout using the Paste to text button.

  9. Click Save to save the new layout.

You have changed the form layout. If you have already added the form to the live site, its appearance changes automatically.