Boost recurring donations this giving season with the new upsell prompt!Fields added to a Forms page appear in the order you arrange them in the administrator, stacked from top to bottom vertically, one per line by default. In some cases, though, you may want to place more than one field on a given line. A common case for this would be a First Name and Last Name field. Rather than using the default arrangement with First Name appearing on a single line and Last Name appearing below it, it is customary to place these adjacent to one another on the same line. You can place multiple fields on a single line using the CSS Keywords field.
CSS Keyword options
The following groups of CSS Keywords are available as options, each one of the group applied to a single field. They divide the horizontal space available to the form into fractions noted in their names.
- leftHalf rightHalf
- leftThird middleThird rightThird
- leftFourth middleFourth rightFourth
- leftFifth middleFifth rightFifth
Entering CSS Keywords
CSS Keywords are entered into the CSS Keywords field in the popup form when adding or editing a Salesforce Element.
Example: Form without keywords
Each field appears on its own line in the order specified in the administrator.
Example: Form with Keywords
Fields without keywords appear on their own line. First Name has CSS Keyword "leftHalf" applied and Last Name "rightHalf". City has CSS Keyword "leftThird" applied and State has "middleThird". Website has no CSS Keyword applied. You are not required to include the final CSS Keywords (in this case, "rightThird") to complete a given row in order to place the following field on the next line.
CSS Keywords and Placement of labels
All fields with CSS Keywords applied will have their labels appear above them in the form in keeping with the default label placement setting for all forms. This overrides any alternate option (e.g., Left or Right) selected for the placement of labels in the option tab of a Forms page. As such, it is recommended to retain the Default (Above) setting for the placement of fields for any form using CSS Keywords.