Advanced Form Options

---

Within LDP Forms we have built in some advanced options you can use to insert some pre-formatted elements and styles. Below is how you use the options when building your form and what styles are associated with those tags.

Example Form

 

Advanced Field Options

---

These options can be added to the Advanced input of Form Elements assets to create additional styles and formatting.

 

Add a Class to an Element

addclass=myclass;

Wraps the form element group in a <div> element with the CSS class specified. Classes must be seperated by a space as they would in HTML.

Supported Elements

• Single-Line Text Field
• Multi-Line Text Field
• Radio Buttons
• Checkboxes
• Drop-Down
• Multi-Select
• Date-Time Picker
• Instructional Text

 

Datasets

dataset=state;

Adds a predefined dataset to the list of options in a drop-down. This is useful for data that are frequently used, but tedious to type. For example, the “state” dataset includes all 50 United States so that they may be used in an element.

Available Datasets

• state
• state_ab
• country
• year
• month
• alphabet
• numbers

Supported Elements

• Drop-Down

 

Group Multiple Elements in a Fieldset

Creates a dotted bordered group of inputs. Use this to group similar inputs that go together such as first & last name, or address.

fieldset_start=true;

Defines the opening tag for a <fieldset> within the form. This is used in conjunction with the fieldset_end option to set off a group of elements. It can also be used with the fieldset_label option to define a label for the group.

fieldset_label=Address;

Defines the label of the fieldset (HTML <legend>) . For example, if the group should be labeled “Address” when combining street, state, and zip, then that can be defined here. It can be entered without quotes and can include spaces.

fieldset_end=true;

Defines the closing tag for a <fieldset> and is used in conjunction with the fieldset_start and fieldset_label options.

Supported Elements

• Single-Line Text Field
• Multi-Line Text Field
• Radio Buttons
• Checkboxes
• Drop-Down
• Multi-Select
• Date-Time Picker
• Instructional Text

 

Display a Fieldset around Radio Buttons & Checkboxes

fieldset_wrapper=true;

Wraps Radio Buttons and Checkboxes in a dotted outline fieldset of their own. The Label is used a the fieldset label, there is no need to add one. Do not nest fieldset display radios and checkboxes inside another fieldset group. Nesting fieldsets can cause accessibility issues.

Supported Elements

• Radio Buttons
• Checkboxes

 

Create Rows and Columns

Use the row and add class options to create a grid of inputs in the form. Use this to group similar inputs that go together such as first & last name, or address. Rows can be combined with fieldsets to create a grid inside of a fieldset.

row_start=true;

Defines the opening tag for a <div class="row"> within the form. This is used in conjunction with the row_end option to open a row of elements.

addclass=col-sm-6 col-md-4;

Use the add_class option on any fields inside the row to define their Bootstrap column class. 

row_end=true;

Defines the closing tag for a </div> and is used in conjunction with the row_start option.

Supported Elements

• Single-Line Text Field
• Multi-Line Text Field
• Radio Buttons
• Checkboxes
• Drop-Down
• Multi-Select
• Date-Time Picker
• Instructional Text

 

 

Advanced Form Setting Options

---

These options can be added to the Advanced input under Form Settings of form assets.

 

Add a Class to the Form

form_classes=myclass;

Adds a class to the <form> element. Classes must be seperated by a space as they would in HTML. We recommend using the class form-grid when using the row grid options on elements.

 

Add a Class to the Submit Button

submit_btn_classes=myclass;

Adds a class to the submit button. Default classes are btn btn-primary, classes are added in addition to them. Multiple class names must be seperated by a spaces. An example would be adding the class btn-lg to make a larger submit button.