Using the Grid in the form builder

One of the alignment tools provided in the form builder is the grid. The grid is a collection of vertical and horizontal lines that overlap and create many junctions.

Show grid

The horizontal and vertical lines may be used as guides to place elements against – this may be done by turning the ‘show grid’ checkbox.
Once the option is selected gray vertical and horizontal lines will appear and you will be able to drag elements and place them against them. The space between the vertical lines and between the horizontal lines may be changed in the ‘form settings’ (Horizontal snap, vertical snap).
In order to view the grid all you need to do is turn on the ‘show grid’ in the upper toolbar – alignment and spacing section.

Snap to grid

The most common and beneficial use of the grid is when it is accompanied with the ‘snap to grid’ option. Snap to grid means that each time you drag an element and drop it in the form builder; it will be drawn to the closest junction of grid lines. This option will ensure that the alignment is completely precise. In addition, prior to letting go of the dragged element you will get an indication of where the element will be drawn to by a blue corner that will appear from the time you ‘drag’ the element till the time you ‘drop’ it.
in order to use the ‘snap to grid’ option all you need to do is turn on the ‘snap to grid’ checkbox in the upper toolbar – alignment and spacing section.

* Please note that snap to grid may be used without the ‘show grid’ option, however it is less effective to make alignments without actually seeing the grid lines.


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.