Perfect alignment and spacing in a form builder –Example 2

Following is another example of a different form layout that can easily be created using a form builder with perfect alignments and spacing.

The main tool we will use for this layout is the “grid“.

Steps to create this form:

1- Turn on the grid and the “snap to grid” option in the “element toolbar”.
Read more about the grid

Each element you drag will “stick” to the nearest grid intersection, so if you want it to “stick” to a certain
Intersection you will need to stop dragging (let go of the mouse) in the right bottom square.

2- Change the grid horizontal and vertical snap (in the form settings) to 20px.

3- Drag the 2 first top elements (a textbox and an email element) from the element toolbar.</strong

4- drag 2 label and place each one ontop of an input element.

5- Continue to drag all the elements on to the design area.

6- Make the textarea element wider by selecting it and moving the mouse to the right (while it’s pressed)

7- Change all the labels’ text by double clicking in the label and changing it, or by selecting the label and changing its text in the “element settings”.

8- Give each input element a name and a tab index number in the “element settings”.

9- Add items to the Contact purpose listbox.

10- save the form.

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.


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).