1) Create New Section(s)

use the documentation below to create new sections within a form component

Create New Section

To create a new section click on the Form Sections tab. Then click the new section icon button, see image on left. The new section button reveals a menu with multiple types of sections to create.


  • Input Fields: select this option to create a section that displays form input fields.
  • Address Fields: select this option to a create a section that displays an address component that includes the google address verification api.
  • Form Component: select this option to create a section that displays a seperate form component.
  • Rich Text: select this option to create a section for displays a header or richtext.
  • Image: select this option to create a section that displays public images.
  • Divider: select this option to create a section that serves as a divider.

2) Customize Section(s)

the following outlines how to customize the display features within the form builder.

demo_section_customization
utility:text
the following outlines how to customize section headers
Section Header Configuration

Section Header

Every section can can display a custom header. To hide the header click the "Hide Header" button displayed within the Section Header accordion. The Section Title value is required.


Header Icon: Optionally use the Icon Type and Icon selectors to select an icon to display within the header. For more information about available icons see the lightning design system documentation.


Header Subtitle: optionally display a subtitle value above the header title.



form_builder_Section_Header_png
utility:builder
the following outlines how to customize section styles
Section Styling Configuration
form_builder_Section_Styling_png

Section Styling

The Section Styling accordion contains parameters for customizing how sections are displayed.


  • Display as Accordion: To a hide a sections content within a collapsible accordion click on the button within the Section Styling section labeled "Display as Accordion" .
  • Override Section Theme: this selector displays options for all themes configured within your organization. When the value is set to "Default" the section receives it's theme value from the option set within Form Settings. To override the Form Theme for the section select an alternate theme option.
  • Section Class: select a custom section class with this selector.
    • Clean: displays the the section without any borders.
    • Box: display the section within a bordered box.
    • Box Shadow: displays the section within a shadowed bordered box.

Section Responsive Settings

The form components utilize the flexible grid system outlined within the lightning design system documentation. "Width Large", "Width Medium", and "Width Small" define the width of the field depending on the Users device. Widths are based off of a 12 column grid. Selecting "12 Columns" sets the width to 100%, selecting "6 Columns" sets the width to 50%.


  • Width Large: the size of the component when being viewed from a desktop computer.
  • Width Medium: the size of the component when being viewed from a tablet.
  • Width Small: the size of the component when being viewed from a mobile device.

The example below displays 3 sections. The first is set to "3 Columns", the second "5 Columns" and the last "4 Columns".

This Section is 3 Columns Wide

No input rendered: Field "Days_of_the_Week_Long__c" not found in response.
No input rendered: Field "Day__c" not found in response.
No input rendered: Field "Month_Long__c" not found in response.

This Section is 5 Columns Wide

No input rendered: Field "Payment_Type__c" not found in response.

This Section is 4 Columns Wide

Section Padding/Margin

Use the margin and padding selectors to add extra margin between sections and padding within the section.

Section Rich Text

All section types allow the addition of custom text above the configured fields or image. The text is displayed below the section header if enabled. If the section is enabled as an accordion the rich text is displayed at the top of the accordion body. Click on the Section Rich Text accordion to add custom rich text. Currently Images added to the rich text input field will not display for external guest users.

utility:display_rich_text
the example below demos a section that includes rich text
Section Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate euismod sapien. Nam libero leo, finibus non vestibulum sed, dignissim sit amet erat.

Section Types (Demo)

the live components below demo the four section types

demo_section_types
utility:edit_form
this section is used to display form fields
Input Fields (Section)
utility:location
this section type is used to display a validated address component
Address Fields (Section)
Address
utility:display_rich_text
this section type is used to display html formatted text
Rich Text (Section)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed metus consequat metus luctus vestibulum. Donec volutpat dui in tellus molestie tincidunt. Nunc pretium lorem quam, et feugiat elit ultricies sed. Proin tempor interdum pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas suscipit vitae felis quis commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec bibendum, justo sit amet vulputate porttitor, justo metus pellentesque lacus, vel pulvinar dui magna a metus.

utility:image
this section is used to display public asset file images
Image (Section)
FB_Icon_png
Logo2png
FB_Icon_png