Designing the form-how to beautify the form?

Since the form builder has no rigid layout and the design is flexible one needs tools to help him design his form:

Colors, borders  and fonts
background color
you can change the background color from the design toolbar (third from the top) which allows you to choose from a list of colors or from the form settings on the right, in which you can insert any color number (for example: #ffffff).
bg_toolbar
or
bg_side

Font color
you can change the font color from the design toolbar font color list or from the font color field in the element settings.
font-color


Font style

You can control the font style from the design toolbar by setting the font family, size as well as determining if the font is bold, underlined or italic.
font-family

Borders
You can change/add borders to elements by using the border style in the design toolbar.
Choosing border style (solid, ridge etc), width (in pixels), and color (from a color list).
border-style

Element alignments and Spacing

Alignment using a grid
the grid is a network of horizontal and vertical lines that covers your design area. Using this option may be done by turning on the “show grid” and “snap to grid” checkboxes located in the element toolbar. Once you turn the grid and snap on all selected Elements will be pulled into alignment with the nearest intersection of grid lines.
find out more about the grid
grid

Alignment options (left, center, right, top, middle and bottom)

You can align a few elements together by using the alignment options in the design toolbar.  By choosing a few elements (by selecting them with the mouse while the “ctrl” key is pressed) you can choose to align all the elements to the left, for example. All element will align according to the element which resides furthest to the left.
find out more about aligning tools

select the elements and press on “align left”

align-1

the elements will align left
align-2

Same spaces between elements (horizontal and vertical)
You can select a few elements that have a different vertical spacing between them, for instance,  and by using the “make save vertical space” option you can change the spacing between them to an equal one.

select the elements and press on “make same vertical space”

make_same_sp[ace-1

the elements will be arrangedwith an equal vertical spacing between them
make_same_sp[ace-2

1-      Images
you can add images to your form and even place elements on top of them to act as backgrounds. This can by done by simply dragging the “image” element on to the design area. A default formlogix image will appear and you will be able to replace it with your own from the element settings (using the “path” field). Please notice that you will need to change the image width and height according to your image’s proportions.
image1

Advertisements