Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!

Tags are CSS class attribute names added inside the rendered HTML of the service. Explained in a less technical way, tags can be used to specify custom design on form elements. In the Help/Style tab of the element properties, you can add tags and those tags can be referenced in the CSS file for the service design. You can use tags to change colors, fonts, styling, add icons, change positions and more per form element. For more information on how to customize service design through skins, see https://composetogo.atlassian.net/wiki/spaces/CNGD/pages/1223754318.

The tags are rendered in the HTML with the prefix tag-. For instance the tag redBackground would be associated a form element as tag-redBackground. In the skin.css file, you would specify the design customization with .tag-redBackground{}, i.e.:

.tag-redBackground {
	/*Add your specifications here*/
	background-color: red;
}

Note: You can add multiple tags by separating the tags with commas (e.g. myTag1,myTag2 etc.). After adding tags and specifying them in the service skin, you can open the DevTools in the browser (Ctrl/cmd + Shift + I for Chrome) in the respondent view of the service. You’ll see how the tag is placed on the element wrapper, and the CSS code associated with the tag.

Bootstrap tags

For the moment, there are no accessible tags in the default bootstrap skin, but here are some tags you can easily copy and paste to your skin.css file.

Multiple elements on the same row

If you want multiple elements on the same row, you use a horizontal group. By turning off the group layout and title the group should blend better into the form.

However, as seen in the preview, all groups get an automatic indent (extra padding) since it looks better with a group layout. The elements are not aligned with the other questions.

We can remove the extra group padding with a tag on the group element.

Add the following CSS code in the skin.css file of your skin:

.tag-unindent,
.tag-unindent > div > div.row.question-group-content{
	padding: 0;
}

If you preview the form with the tag in a skin with the CSS code specified above, your page should look like this (unless you have set some other global attributes affecting the padding):

The extra padding around First name and Last name are gone and all questions are aligned.

Format integer/decimal inputs with units

When you display quantities with units, the custom is to have the number right aligned. By adding a tag and a hint with the unit positioned right, a little CSS code and a tag will format the input element properly.

Respondent view:

CSS code (accounting for all types of input questions):

/*** --------------------------- Price tag --------------------------- ***/
/* Makes right-positioned hints appear on the right of input fields with overridden width */
small.hint_RIGHT{
	display: inline-block;
	opacity: 1;
	font-size: 100%;
}

/* Combine with right-aligned input text for nicely formatted monetary amounts */

.tag-price > div > input[type=text].form-control,
.tag-price > div > textarea.form-control,
.tag-price > div > div > input[type=text].bootstrap-datepicker,
.tag-price > div > input[type=password].form-control{
	text-align: right;
}

/* ------------------------------------------------------------------------- */

Note: This tag will only work with input fields with overridden width!

Toggle button

If you want to change the layout of check boxes and radio buttons, one design option is a toggle button. In this example we’ve added the toggle tag on a check box element.

The CSS code for this tag is quite extensive, but styling containing animation is usually more complex:

/*** ------------------------------ Toggle tag ------------------------------ ***/
/* Override check box / radio button as a toggle button.*/

.tag-toggle > div > div > label.form-check-label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  background-color: #E9ECEF;
  border-radius: 25px;
}

.tag-toggle > div > div > label.form-check-label::after {
  content: ''; 
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.tag-toggle > div > div > input.form-check-input {
  display: none;
}

.form-check-input:checked + .form-check-label::after {
  left: 25px;
}

.tag-toggle > div > div > input.form-check-input:checked + .form-check-label {
  background-color: #2B7BB9;
}

/* -------------------------------------------------------------------------- */

In the respondent view, you will have your check box replaced by a toggle:

Responsive HTML

The default responsive HTML skins have access to some number of icons and tags.

As most services currently are developed with bootstrap framework, the following documentation for Responsive HTML may not be up to date!

System icons can be placed inside a form:

Tell where the icon is going to be placed:	In the Label section : tag = addIconOnLabel In the form element section: tag = addIconOnInput
Tell the position of the icon	Before the element : tag = addIconBefore After the element: tag = addIconAfter

Icons supported in the system skins

Class Selector	Icon

Class Selector	Icon
iconhelp
iconWarning
iconError
iconMandatory
iconRecommended
iconPageMandatory
iconVirus
iconAdd
iconMinus
iconClearField
iconUser
iconExit
iconOk
iconPrint

Provided default CSS - On Tag names, making it easy to organize your form.

Form element	Tag name	Notes

Form element	Tag name	Notes
All form elements	hideMe	Hides the the entire question
All form elements	hideLabelText	Hides the label text, but keeps the wrapper "labelItem"
All form elements	hideLabelWrapper	Hides the entire "labelItem"
All form elements	hideInput	Hides the form element input, but keeps the wrapper "formElementItem"
All form elements	hideInputWrapper	Hides the entire "formElementItem"

PDF related Tag names

Tag name	Context	Description

Tag name	Context	Description
landscape	pages	Sets the layout of the PDF to be lanscape. This will apply only to the page on which this tag is set.
pageBreaks	pages	Starts a new PDF page for the given form page.
hiddenButShowInPDF	questions	By default, questions that are hidden (when the display condition is false) are not included in the PDF. By adding this tag on a question, it will be shown in the PDF regardless of whether it's hidden or not. Note that this does not have an effect if the question is disabled (see under).
disabledButShowInPDF	questions	By default, questions that are disabled (when the enable condition is false) are not included in the PDF. By adding this tag on a question, it will be shown in the PDF regardless of whether it's enabled or not. Note that this does not have an effect if the question is hidden (see above).

Style - form element CSS tags

Bootstrap tags

Multiple elements on the same row

Format integer/decimal inputs with units

Toggle button

Responsive HTML