Form Builder‎ > ‎

Layout and Appearance


The Layout and Appearance features of the action form is managed on the Form Builder (Step 2: The Form) page, identified on Figure 1. You can use the  Submit and Cancel Type properties to configure the appearance of the Submit and Cancel buttons, identified on Figure 2.
Figure 1: Identifies Layout and Appearance Properties


Figure 2: Identifies Submit and Cancel Button Properties

Layout and Appearance Properties

The layout and appearance properties, highlighted on Figure 1, allows you to configure the layout and appearance of the action form.

Figure 3: Displays Action Form


Title Property

The Title text box allows you to enter the title or name of the action form. It appears in the top left corner. In Figure 1 for example, Contact Form is entered for the Title. Notice that it appears in the top left corner of the action form. 

Form Align Property

The Form Align property allows you to align the action form to the Left, Center or Right. You can change the alignment by selecting the Form Align drop down menu and select the align position for your form. In Figure 1 for example, Center is selected to align the form in the center.

Label Position Property

The Label Position property allows you to align the labels on the action form. The labels are the title names for the text box, for example Last Name and First Name, displayed on Figure 3. You can position the labels to the Left or Right. To select a position for your labels, select the Label Position drop down box and specify the position.

In Figure 1 for example, Left is selected for the position of the labels. Notice that the labels are positioned to the left on Figure 3. If you select Right for your label position it should look similar to Figure 4.

Figure 4: Displays Right Label Position


Label Column Width Property

The Label Column Width property allows you to specify the width of the label columns on the action form. It controls the space allocated for labels, so it can make the labels appear closer or farther from the controls.  You can specify the label column width to any size you want. To specify the Label Column Width, enter the width in pixels in the Label Column Width text box. Ensure that you specify a number that provides sufficient space, does not overlap the labels or insert a wide space between the labels and the text box.
In Figure 1 for example, the Column Width entered is 160. 160 provides sufficient space between the labels and the text box. In Figure 5 on the other hand, 16 is entered for the column width. This is insufficient width between the labels and the text box. It creates a narrow column width. Notice the labels highlighted in yellow on Figure 6. They overlap because there is insufficient space between the labels and the text box.

Figure 5: Specifies Column Width



Figure 6: Displays Narrow Column Width

jQuery Theme Property

The jQuery Theme property allows you to specify a theme for your action form. Its drop down menu specifies the themes for the action form. Each theme gives the action form a different appearance. Themes are applied to the labels, the buttons, and background of the action form. Some themes apply simple changes while others are prominent. When you select a theme ensure that it blends with your pages and make your labels visible.

In Figure 1 for example, flick is selected from the jQuery Theme drop down menu. Figure 3 reflects the 'flick' jQuery Theme. Notice that the appearance is not significant. Figure 7 on the other hand selects black-tie for the jQuery Theme. Notice the labels on Figure 8. They are not very visible. If label visibility is important this theme is not appropriate.

Figure 7: Specifies black-tie jQuery Theme



Figure 8: Displays Black-tie jQuery Theme

   

Building Custom Themes

Rolling your own theme is also possible. Create the theme using http://jqueryui.com/themeroller/, then copy it to folder \DesktopModules\AvatarSoft\ActionForm\templates\jQuery\yourthemename. Also check the other themes in the folder and make sure you follow the same naming convention for jquery-ui.css. After you complete these steps the theme will also appear in the jQuery Theme dropdown. Selecting it will reflect on the front end.

Submit and Cancel Buttons

The Submit and Cancel button properties configures the Submit and Cancel buttons. The button properties are located at the bottom of the Form Builder (Step 2: The Form) page in the Buttons section identified on Figure 9.

The Buttons section specify two options for configuring the Cancel and Submit buttons, the Cancel Button Type and the Submit Button Type. The Cancel Button Type allows you to apply Text, Image URL or Hidden features to the Cancel button. The Submit Button Type allows you to apply Text and Image URL features to the Submit button.

Figure 9: Identifies Cancel and Button Properties

Cancel Button Type

To specify a Cancel button type, select one of three options in the Cancel Button Type section, identified on Figure 9. Select Text, Image URL or None(Cancel button is hidden) radio button.

    Text Type

  • To apply the Text type, select the Text radio button and enter an appropriate text for your Cancel button. A text version of the Cancel button is inserted on the action form. In Figure 3 for example, the Text type is selected for the Cancel button and Cancel is entered for the text.
      Image URL Type
  • To apply the Image URL type, select the Image URL radio button and insert a URL for the Cancel button. An image for the Cancel button is inserted on the action form. You can apply any image for your cancel button. Just ensure that the URL for your image is valid.
    None Type
  • To hide the Cancel button,  select the None (Cancel button is hidden) radio button. This feature will hide the Cancel button.

Submit Button Type

To specify a Submit button type, select one of two options in the Submit Button Type section, identified on Figure 9. You can choose Text or Image URL.

    Text Feature

  • To apply the Text type, select the Text radio button in the Submit Button Type section. A text format of the Submit button is inserted. In Figure 3 for example, the Text type is selected for the Submit button and Submit is entered for the text.
    Image URL Type
  • To apply the Image URL feature, select the Image URL radio button in the Submit Button Type section and enter the URL for your submit button.  You can apply any image. Just ensure that the URL for your image is valid.
Comments