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.