WEBINAR RECORDING: Seize #GivingTuesday Success with Fundraising Wisdom and Salesforce. Watch >>

Displaying multiple fields on a single line with CSS Keywords

created

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.

 soapbox-forms-css-keywords.png

Example: Form without keywords

Each field appears on its own line in the order specified in the administrator.

jsf-submit-field-label-place-default.png

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.

jsf-submit-field-css-keywords.png

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.

Have more questions? Submit a request
Article is closed for comments.