To access a control’s style properties, click on the control in your form, then click the Style tab in the Forms Designer’s Property area.

Some controls have more style properties than others, so the specific style properties you see depend on which control you click in your form. As you define style properties for individual controls, remember that these will override any form-level properties you have defined. Each control style property is described below.

On this page:

Width

Most controls have a width property. For input controls, the property specifies the width of the area in which users enter data; for example, you might narrow a control used for entering zip codes or widen a control for a full first, middle, and last name.

All control widths are specified in columns. The width is selected by clicking on a grid in the style tab. When you drag and drop most controls from the palette on to the canvas, the control will be 12 columns wide. The trigger, link and panel controls are the exception - the default widths of the trigger and link controls is 3 columns while the panel is 6. To change the width, simply click the number of divisions on the grid to specify how wide you want the control to be. For example, a text control dropped on the canvas from the palette has a width of 12 columns as shown in the image:

To make this control 6 columns wide, click on the 6th division of the grid. The  results are shown in the image:

Here are some important facts to know when working with control widths:

  

Width is a crucial property when designing mulit-column forms. makes this very easy to do. Refer to this documentation for some tips about the drag and drop feature when designing multi-column forms.

Control widths are ignored on the iPhone and the iPad even if the designer has explicitly specified them.

IE8 does not support the CSS3 calc() function. The width of a Section control is set to 98%. If you have a Section inside a Panel that has fewer columns in your form, the right edge does not align.

Item Width

Radio and Checkbox controls have an extra property called Item Width. You can use this property to change the layout of the options from vertical (one radio/checkbox button below the next) to horizontal. This is useful to save vertical space on long forms. And also useful to improve ease of use for forms with questions that each have the same set of options.

See this image as an example. The Item Width can be entered in % or px values.

Show/Hide Item Labels

Check this property to show/hide the Item labels for Radio and Checkbox controls. If checked, the item labels are not visible but they still take up space on the screen. Item Labels in a table do not take up screen space.

Background Color

This lets you specify the color that will appear behind the control. Type any valid CSS color name or its hexadecimal RGB equivalent. For example, if you want a red background, you can type the word RED or #aa2211.

Label Color and Label Size

These properties are controlled by the Styles that you apply to your form. However, you can change the font size and color for any specific control on the form. Specify the color by typing any valid CSS color name or its hexadecimal equivalent in the Label Color field.

These properties work well when you want your entire label to have the same size and color, but for more sophisticated labels you can type XHTML in the control’s label property field. For instance, use XHTML if you want to apply two different font colors inside the same label. Typing XHTML also gives you more font precision, since the label size property lets you pick generic font sizes only--small, medium, and so on. There may be controls for which you want a font size somewhere between the small and medium options in the dropdown.

Changing the label color does not affect the decorator. It is always the same color as defined by the style.

Bold

Check this checkbox to make the control's label bold.

Italic

Check this checkbox to italicize the control’s label.

Center

The center property only applies to the Message control. Checking this, will center the message text. It works best with None and Bordered message types.

Expand/Collapse

This property applies only to the Section control. When you drag a section control from the palette and drop it onto the designer canvas, the expand/collapse icon will be visible and the Expand/Collapse checkbox will be checked. Uncheck this to hide the icon.

Date Picker

You can specify whether or not you want to display the date picker via a checkbox on the Style Property panel. If checked, you will see the date picker inside the the date control and the date portion of the date/time input control. 

Clicking on the today link in the date picker brings you to the current date. If you are looking at another month, July for example, and you click on the today link, the date picker will automatically bring you to the current month with today’s date highlighted(bold). Select the date to populate the field in your form/flow.

 

The Date Picker described above only applies to the desktop view. Date and Date-Time controls on mobile devices display device specific date pickers.

New Line

The New Line Property will be present for all controls that have the 12 column width selector. Check New Line and the control always appears on a new line. For example: Let's say you have First Name and Last Name controls side by side in your form.

If you want the Last Name control to be positioned under the First Name, check the New Line property.

Trigger and Link controls have this property checked by default.

Unsupported Properties

The following properties are no longer supported in : border style, width, color, margins, padding and option width for Radio and Checkbox controls.