Perfect alignment and spacing in a form builder –Example 1

The FormLogix form builder is a very flexible form creator, enabling you to place your elements wherever you like. The freedom provided in the form builder is indeed great, but order and a controlled layout must also be applied in order to achieve a tidy, clear, organized, great looking form.
Though the FormLogix forms are not created in a tabular way, their general layout still resembles a table and may be translated into rows and columns.

in this first example i will show how to acheive a simple form layout alignment and spacing (of a contact form).

Following are step by step instructions for achieving this layout:

In this example there is a structure that may easily be interpreted in to 5 rows and 2 columns: all label elements (name, company email, subject and message) make up 5 rows which are supposed to have the same vertical spacing between them. In addition there are 2 columns made out of labels (on the left) and input elements (on the right) and the columns are supposed to be horizontally aligned.

Steps:

1- Drag the labels and elements on to the design area. place all labels in a left column, one beneath the other. Place a suitable element on the right side of each label, thus creating a right column.

2- choose the 5 labels and make the same vertical space between them.

Use the “CTRL” key to select multiple elements and press on the “make same Vertical Space” option in the “Design Toolbar”.
* Pressing on this icon again will make the space between the elements smaller.

3- while the 5 labels are still selected – align them to the left.
Again, select all the lebels with ‘CTRL’ and apply the alignment.

4- Choose the first label (name) and its matching element (textbox element) and vertically align them. Make sure that you align the elements according to the label, since we set its vertical position in step 1 and we don’t want to change it. (if the label is lower than the textbox than you choose “align bottom” – this ensures that the textbox moves to the same vertical location as the label).

5- continue step 2 with the other rows.

6- select all the input elements (textbox, textbox, email, textbox and textarea) and align them to the left.

If the space between the 2 columns is too small than you can select all 5 input elements and move them to the right by pressing on the right arrow button in your keyboard (moving them with the mouse will change their vertical position and they will no longer be aligned to the lebels on the left).

Advertisements

One thought on “Perfect alignment and spacing in a form builder –Example 1

Comments are closed.