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.

Advertisements

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

Saving a filter

While in my previous post i explained about filtering in general, This post examines how to save a filter for future use.

If you seem to view your data in a certain way, or if you look for the same type of information on a regular basis than it is highly recommended to save your filter/s.
Saving a filter means saving the filter terms (and not the results showing in the table) for further use. Once you save the filter you can make it appear in the data center as a shortcut. Saving a filter is also the way you can share your report by making it public.

Steps to save a filter:
1) Enter the toolbox and choose “filter” in the left menu.
2) Fill in the filter terms and press on “go”.
3) Go to the toolbox left menu, and choose ‘Save’ from the Filter options.

Saving the filter for the first time will open a floating window in which you will be asked to :
– fill in the filter name and description.
– save the filter s a shortcut by turning on the “create shortcut” checkbox.
once you save the filter as shortcut it will appear in the data center under the form name, allowing you to
enter the sliced data directly.
– share the filter by turning on the “share” checkbox. This option is used for making the report public. (read
more about public report)
4) save the filter.

Filtering the data in a form builder

When using FormLogix form builder all the data entered in your web form is automatically stored in a data management report in addition to being emailed to you.
The data management tool allows you (the form owner) to view all data entries, edit them, delete them, add remarks, export and import data as well as open a private forum discussion with your form fillers.
The most basic feature in the data management tool is the filter option. Filtering is a tool for slicing the data and enabling the focus on specific entries.

The data management report allows 2 kinds of filters:
1- quick filter
the quick filter, just like its name, is a way to quickly filter the data.

Steps to quick filter:
1) Press on the filter icon in the desired field header.
2) a small section will open under this header containing a filter term:
an ‘operator’ listbox, a ‘where’ textbox, and a ‘go’ button and ‘clear’ button.
3) Choose the operator (contains/doesn’t contain/=/!= etc.) and fill in the ‘where’ term accordingly. For example: if you wish to filter for all the entries where the contact purpose was technical support you can quick filter on the “contact purpose” field and fill in the following information:, operator: “contains”, where: “technical”.
Notice that filling in the terms in the quick filter will also fill them in the main filter section of the “toolbox” above.
4) Press on “go” to apply the filter or press on the “clear” icon to clear the term from the filter rows.

2- Regular filter
the regular filter, like the quick filter, is based on filter terms.
When you open the filter feature in the “toolbox” you will find 3 filter term rows already open.
In order to slice the data you will need to use at least 1 filter term. This filter allows adding endless terms for slicing the data. it also allows you to define the relationship between terms by using a “and” and “or” between them.
For example
(or): you can look for people whose names start with W or start with A.
(and): you can look for people whose names begin with A and are smokers.

Steps to quick filter:

1) Fill in the first term row.
Choose the operator value and fill in the where field. (for example: name contains “a”)
Choose the operand ‘and’ /”or” to determine the relation between this term row and the next term row (if you use more than 1 term). Choosing ‘and’ means that only data entries that fit both row terms will be extracted while choosing “or” means that entries fitting either one term row or the other will be extracted.

Leave the show checkbox unchecked if you wish to see all form’s fields in the results.
by checking the ‘show’ checkbox you can choose to view only specific fields in the results table

2) Fill the second term row in the same way
if you are using only 2 term rows there will be no need to choose an operand on the second row since the relation between the two rows was already set in the first row.
3) Pick the number of rows you would like to see in the result table at once (* will show all rows in 1 page)
4) Press ‘go’.

That’s it really…very simple.
For those who wish to use the same filter again –you may want to consider saving the filter as a shortcut in the data center. Read all about saving the filter in my next post.

find out more about editing the filter properties or deleting a filter.