The following attributes are reserved and cannot be used as CustomIDs or Groups. They should also not be used in custom HTML you may add to your forms.
Please note that standard HTML attributes and proprietary Bootstrap classes should also not be used (unless you know what you are doing) but are not listed here.
These are attributes that are used on the live form. There are many more in the editor that are used to facilitate the functionality of the editor but do not get published on the live form.
IDs
| ID | Function |
|---|---|
| #[FORMID]-selectedpage | A hidden input to store the currently viewed page on multi-page forms |
| #[FORMID]-record | A hidden input to store the record ID of the currently loaded data |
| #[FORMID]-dirty | A hidden input that is set when changes are made to the form |
| #[FORMID]-formstrapcontainer | This is the ID of the form HTML |
| #[FORMID]-logo | The ID of the logo image for the form with ID [FORMID]. |
| #[FORMID]-formtitle | The ID of the title of the form with ID [FORMID]. |
| #[FORMID]-formdescription | The ID of the description of the form with ID [FORMID]. |
| #Page_[PAGENUMBER] | The container for sections that are on page [PAGENUMBER] |
| #[FORMID]-section[SECTIONNUMBER] | The container of the each Section within the Page. |
| #[FORMID]-sectioncol[SECTIONCOLUMNNUMBER] | The container of the each Section Column within the Section. |
| #[FORMID]-formrow[ROWNUMBER] | The container of the each Row within the Section Column. |
| #[FORMID]-formcol[COLUMNNUMBER] | The container of the each Column within the Row. |
| #[FORMID]-input-group-[GROUP] | The container of the multi-field input group with the Group Name [GROUP] |
| #[FORMID]-field[FIELDNUMBER] | The container of each field within each Column (or each Input Group, if used) |
| #[FORMID]-button-field[FIELDNUMBER] | The ID of a custom button within the Field container. |
| #[FORMID]-input-field[FIELDNUMBER] | The ID of a input control within the Field container. |
| #[FORMID]-field[FIELDNUMBER]-option-[OPTNUMBER] | The ID of a checkbox or radio button within a group of checks/radios. |
Classes
| Classes | Function |
|---|---|
| .formouter | The outer container of the form |
| .headercontainer | The container of the form header (logo and title/description) if used - inside the outer container. |
| .formcontainer | The container of the form - inside the outer container. |
| .pagecontainer | The container all sections on each page of the form. |
| .formpage | The container for each sections of the form within each page container |
| .pagecolcontainer | The container for all section column within each section. |
| .pagecol | The container for each Section Column within each section. |
| .formrowcontainer | The container for all rows within each section column. |
| .formrow | The container for each Row within each section column. |
| .formcolcontainer | The container for all Columns within each row. |
| .formcol | The container for each Column within each row. |
| .fieldcontainer | The container for all Fields within each column. |
| .input-group-[GROUP] | The container of a multi-field input group. |
| .formpagenav | The container of a form navigation. |
Data Attributes
| Data Attribute | Component | Function |
|---|---|---|
| data‑customclass | Section, Section Column, Row, Column, Field | Allows you add components to a group. This is used by input groups. |
| data‑customid | Section, Section Column, Row, Column, Field | Allows you apply a human-friendly Custom ID to a component. This is used by user driven events . |
|
data‑defaultcustomformula data‑defaultformula data‑mincustomformula data‑minformula data‑maxcustomformula data‑maxformula |
Field (date, datetime, time) | Allows you to specify a relative formula that will be evaluated when the live form is loaded and set as the default, min or max value of the input (e.g. a MAX formula might be TODAY - 18 YEAR to require the date of birth is 18 years old or over). |
| data‑defaultvalue | Field | Allows to specify a value that will become the default value of an input (or the default selected checkbox/radio button in a group). |
| data‑donotdisable | Field | By default, inputs are disabled when they are hidden. This prevents hidden data from being submitted and also from blocking submission because a required empty control cannot be focused when it fails validation. This option prevents the input from being disabled when hidden which may be a desired in some circumstances. |
| data‑html | Form, Section, Section Column, Row, Column | Determines if flowing plain text (e.g. in a Description field) is converted into HTML (i.e. carriage returns converted to paragraph tags). |
| data‑inputgroup | Field | Is the field part of an input group? |
| data‑inputgroupweight | Field | Does the field try to occupy the maximum space in the group? |
| data‑inputsize | Field | Display a Bootstrap small, regular or large input control. |
| data‑floatinglabel | Field | Does the field utilise Bootstrap's floating label layout? |
| data‑sendmail | Field - Emails | On hosted forms, should a PDF version of the form be sent to this email address |
| data‑initiallyvisible | Section, Section Column, Row, Column, Field | Is the component visible on initial form load? |
|
data‑append data‑prepend |
Field | Add text or icon add-on to field - either before or after. |
| data‑twocols | Field - Radio or Checkbox. | Should radios/checkboxes be displayed in one column or two? |
| data‑customevent | Field | Error message if a field is set to invalid by a custom event. |
| data‑pattern | Field -Text, Email, Url, Password, Tel | Error message if a the input fails to match the specify regex pattern. |
| data‑rangeover | Field - Number, Date, DateTime, TIme, Range | Error message if a the input is over the specified MAX value. |
| data‑rangeunder | Field - Number, Date, DateTime, TIme, Range | Error message if a the input is under the specified MIN value. |
| data‑stepmismatch | Field - Number, Date, DateTime, TIme, Range | Error message if a the input does not comply with the specified STEP value. |
| data‑toolong | Field - Text, Url, Tel, Email, Password | Error message if a the input is longer than the specified MAXLENGTH value. |
| data‑tooshort | Field - Text, Url, Tel, Email, Password | Error message if a the input is longer than the specified MINLENGTH value. |
| data‑mismatch | Field - Date, DateTime, Time Url, Tel, Email | Error message if a the input is does not match the type specified. |
| data‑mismatch | Field | Error message if a the input is required and not provided. With checkbox groups, one checkbox must be ticked if required. |