Form Sections

.my-custom-style {
    white-space: normal;
    background-color:lightblue !important;
    }

.my-custom-TitleStyle > span.fb-form-section-title {
    width: 100%;
    white-space: normal;
    display: inline-block;
    background-color:darkgray !important;

Reusable Form Sections

Forms Builder provides ability to create and save Form Sections as independent reusable units. Once saved, Form Sections are accessible from the Form Sections tab in Form Designer and can be dropped on to other forms. A Form Section in a form is saved with all of the included form properties as well as any applicable properties that exist for the Form Section itself.

Create and Save a Form Section

1. In Form Designer, click New to activate the Layout pane.

   — OR —

   Click the vertical Forms tab to the left of the Field Properties area and select a form. Continue with step 4.

2. Select a Column layout (1, 2, or 3 columns) and click to add a section divider.

   In Forms Builder 3.6 and later, the Column layout options include 1-12 columns and the Merge With Next / Merge With Previous properties.

3. From the Fields panel, drag a Field into the Layout pane, and/or select a Component from the Components panel and drop it into the Layout pane. Specify any applicable values in the Property Settings pane.

   Repeat this step as necessary to assemble the desired Form Section in the Layout pane.

4. Select the section divider in the Layout pane and specify the Form Section Property Settings.

   

   • Class is an optional CSS class (or space separated classes) added to the top level of the control. CSS specific to the control can be applied. The class must be defined in a Renderer CSS file. For more information, see Custom Styles.

   • Description is an optional field to describe the Form Section.

   • Id is required. It can be any valid JavaScript id attribute value. (Must start with a letter followed by 0 to 9, a to z, dash, or underscore characters).

     • Using a globally unique identifier (GUID) from GuidGen or GuidGenerator prefixed by at least one letter prevents a clash with any other id.

     • Id should contain only a to z (uppercase or lowercase), 0 to 9, dash, or underscore. It should not have spaces.

     • Binding is not supported for this property.

   • Merge with Next and Merge with Previous enable you to merge sections on a form. For more information, see Merged Form Sections above.

   • Title is displayed at the top of the Form Section when the form is rendered.

   • Visible makes the Form Section visible or hidden. This property can be dynamically bound using a vm.models. value or an expression that evaluates to true or false.

   Forms Builder validates the Forms Section properties. Invalid properties will be marked with an icon (). The Layout pane will display a red border on the affected Form Section. If you try to save a Form Section with errors, an error message will be displayed.

5. Click the Save Section button. The section divider in the Layout pane now indicates the Title of the Form Section and, in parentheses, the Form Section Name.

6. In the Unsaved Changes dialog specify the Form Section Name (required), Title (optional), and Description (optional). Click Save to continue.

   

   The Form Section tab indicates the Form Section Name after the Form Section is saved.

   All applicable data for the Form Section is persisted to the database.

Edit a Form Section

1. In Form Designer, click New to activate the Layout pane.

2. On the Form Sections tab, select a Form Section, and drop it into the Layout pane.

3. Edit the Form Section by adding or removing Fields and/or Components and/or editing the Form Section Property Settings.

4. Select the section divider for the Form Section.

   Click Save Section to retain the Forms Section Name, Title, and Description.

   — OR —

   Click Save Section As to change the Forms Section Name, Title, and Description.

Note: When a Form Section is edited as described above after the Form Section has already been used in one or more forms, the edits are not propagated to the form instances where the Form Section is used.

Add a Form Section to a Form

1. In Form Designer, create a new form.

   1. Click New to activate the Layout pane.

   2. Select a Column layout (1, 2, or 3 columns) and click .

   3. From the Fields panel, drag a Field into the Layout pane, and/or select a Component from the Components panel and drop it into the Layout pane. Specify any applicable values in the Property Settings pane.

   4. Repeat this step as necessary to assemble the desired form in the Layout pane.

   — OR —

   1. Click the vertical Forms tab to the left of the Field Properties area and select a form.

2. Select the Form Sections tab and drag a Form Section to the Layout pane.

Edit a Form Section in a Form

1. Click the vertical Forms tab to the left of the Field Properties area and select a form that contains a Form Section.

2. Edit the Form Section.

3. Select the section divider of the Form Section and click Save Section or Save Form Section As.

   The "Unsaved Form Sections" dialog is displayed: If you click Save instead of Save Section or Save Form Section As after editing a Form Section within a form. — OR — If you click to navigate back to the home page.

   When this dialog is displayed, you have the following options:

   • Click Cancel and then click Save Section to save the changes to the Form Section. In the Unsaved Changes dialog specify the Form Section Name (required), Title (optional), and Description (optional). Click Save to continue. The revised Form Section is saved to the database and listed on the Form Sections tab.

   • Click Continue to save the form. In the Unsaved Changes dialog, specify the Form Name (required), Title (optional), and Description (optional). Click Save to continue.

     Notice that the section divider in the Layout pane no longer indicates the Form Section Name after the form is saved.

     

     Note: Changes made to a Form Section in a form are not saved to the Form Section in the database. The Form Section in the database will retain the original Form Section fields.

Delete a Form Section

On the Form Sections tab, select a Form Section, and click Delete Section. The Form Section is removed from the Form Sections tab.

If the deleted Form Section is used in a form, the Form Section Name is removed from the section divider, but the fields of the Form Section remain on the form.

Delete a Form Section from a Form

In the Form, select a Form Section, and click the icon below the title bar of the Form Section.