|
|
|
|
|
|
|
Getting To know The Web Forms Designer Work Area
|
|
|
|
|
|
|
| |
|
The FormLogix form creator is designed to help you focus on the creation and design of your web forms.
It consists of:
|
|
A) General Toolbar
B) Element Toolbar
C) Design Toolbar
D) Form Design Area
E) Property Grid - Form Settings
F) Property Grid - Element Settings
G) Secondary Side Toolbar
|
|
|
|
Screenshot of the Form Creator work area.
|
| |
 |
General Toolbar
This toolbar focuses on all the general functions of a form, such as saving a form, or publishing a form.
It consists of:
|
|
| Open |
 |
Open a saved page. |
| Save |
 |
Save a page. |
| Print |
 |
Print the page. |
| Publish |
 |
Publish the form. |
| Share |
 |
Share your form. Define it as 'shared' and other users will be able to clone it
and use it as the basis for their form.
|
| Delete |
 |
Delete a page. |
| Copy |
 |
Copy an element in the page. |
| Paste |
 |
Paste an element in the page. |
| Undo |
 |
An ability to cancel one or more last changes that have been done (Ctrl+z). |
| Redo |
 |
An ability to reverse the undo or advances the buffer to a more current state (Ctrl+y). |
| Report |
 |
View the report of the page. |
| New Application |
 |
Creates a new application. |
| New Page |
 |
Opens a new page. |
| Template Gallery |
 |
A way to open and use a template from our gallery. |
| Field Template |
 |
Ready made single or group field templates a user can insert in to a form by choosing from a listbox. |
| Add Field Template |
 |
The option to add your own single or group field template. |
| Show Html |
 |
A view of the forms html source, and the ability to create a template from it.
This option will not appear in regular users. It is only available for administrator users. |
| Request Form Assistence |
|
This option enables the form owner to get a detailed feedback from the FormLogix team on his/her form.
The feedback will cover topics ranging from form design (alignment, background, fonts etc) to content and technical advice (field captions, mandatory fields, tab index etc). |
|
|
Element Toolbar
This toolbar focuses on all the elements and element related features.
It consists of:
|
| |
| Label |
 |
The label enables the user to add short or long text to the form. |
| Textbox |
 |
A text box field in which a user can type letters, numbers, etc. |
| Numeric Textbox |
 |
A text box field in which a user can type only numbers. |
| Password |
 |
This element is like the textbox, only hides the characters entered. It is often used for sensitive input such as passwords. |
| Textarea |
 |
This element creates a multi-line text input control. |
| Listbox |
 |
This element creates a menu, in which there must be at least one option. |
| Linkform |
 |
Link between forms data.
This feature requires a license.
To upgrade your account press here (Login required). |
| Checkbox |
 |
A box with on/off switches that gives the user the option to choose (checked or not checked). |
| Radio Button |
 |
Gives the user the option to select one of a limited number of choices.
There are several buttons, and when one is switched "on" all others are switched "off".
|
| Link |
 |
A connection from one Web resource to another. By activating this links (by clicking with the mouse), users may visit these resources. |
| Linkbox |
 |
An element in which a user can input links. |
| File Upload |
 |
This element allows the user to select files and upload them to the form (attachment up to 1.5M).
This feature requires a license.
To upgrade your account press here (Login required). |
| Email |
 |
An element in which a user can input email addresses. |
| Calendar |
 |
An element that allows the user to input a specific date. It consists of year, month and day. |
| Image |
 |
An element that allows the user to add an image to the form. |
| Html |
 |
This element allows adding custom html code to the form. |
| Container |
 |
An object able to contain elements. When this element is moved, all the elements inside move with it as a group.
Fields in the container may also be defined as 'private access fields' and be seen and filled by the form owner only. |
| Multi Line |
 |
Repeatable elements. |
| Submit Button |
 |
By default the submit button submits a form.
It May also be turned into a Reset Button that clears the form fields when activated.
|
| Create With Label |
 |
Checkbox Determining if an element will be presented with a label |
| Show Grid |
 |
Checkbox Determining if a grid will be shown. |
| Snap To Grid |
 |
Checkbox Determining if the elements will be snapped to the grid. |
| Auto Position |
 |
Checkbox Determining that a new element be placed under and aligned the one selected. |
|
|
Design Toolbar
This toolbar focuses on the design aspect of the form: colors, alignments and so on.
It consists of:
|
| |
| Background Color |
 |
Colors the background of the element selected. if no element is selected it colors the form's background. |
| Font Family, Font Size, Font Color |
 |
Allows the user to choose the font family, size and color of text in labels and buttons, and of text input in element boxes. |
| Bold |
 |
Making the text bold. |
| Underline |
 |
Making the text underlined. |
| Italic |
 |
Making the text italic. |
| Border Style, Border Width, Border Color |
 |
Allows the user to determine the border style, width and color around a selected element. |
| Align Left |
 |
A user can select more than one element and can choose this option, and all the elements will align left. |
| Align Center |
 |
A user can select more than one element and can choose this option, and all the elements will align center. |
| Align Right |
 |
A user can select more than one element and can choose this option, and all the elements will align right. |
| Vertical Align Bottom |
 |
A user can select more than one element and can choose this option, and all the elements will vertically align to bottom. |
| Vertical Align Middle |
 |
A user can select more than one element and can choose this option, and all the elements will vertically align to middle. |
| Vertical Align Top |
 |
A user can select more than one element and can choose this option, and all the elements will vertically align to top. |
| Make The Same Height |
 |
Selecting two elements and choosing this option will make the second element's height be like the first. |
| Make The Same Width |
 |
Selecting two elements and choosing this option will make the second element's width be like the first. |
| Make Same Vertical Spacing |
 |
Selecting at least three elements and choosing this option will make the vertical spaces between them equal. |
| Make Same Horizontal Spacing |
 |
Selecting at least three elements and choosing this option will make the horizontal spaces between them equal. |
|
|
Form Design Area
The design area is the most functional and dominant part of the form creator.
It is a white empty canvas, where the form creation and design take place.
|
|
Property Grid - Form Settings
The Property Grid provides information about the form and element settings.
This information can be changed.
It is located on the right side of the form creator screen.
Form Settings focuses on general aspects of the form: form name, form height, etc.
It consists of:
|
|
| Form Name |
A textbox in which the user enters the form name.
This name will later on appear in the form's window title, in the email subject and "from" name, and also in your form list.
|
| Form Width |
A numeric field containing the width of a form in pixels.
The default value is 727 but may be changed to a smaller number (for a narrower form) or a larger number (for a wider form). |
| Form Height |
A numeric field containing the height of the form in pixels.
The default value is 502 but may be changed to a larger number (for a higher form) or a smaller number (for a lower form). |
| Application Name |
A listbox containing all application names.
You may choose under the application under where to save your form.
|
| Post Submit Url |
A field for entering a Url the form should redirect to after it is submitted.
The URL may be entered in two ways:
1. Filling in the textbox with a valid url.
2. Using the 'Url Picker' to pick an existing form. (  )
The Url must be valid and start with http or https. For example: http://www.bbc.com
Leaving this field empty means that the form will not redirect anywhere, but simply clear and remain open for use.
Read more about Post Submit Url
|
| Thank You Message |
A field in which the form owner can enter a short message which will appear in a special window once the form is submitted.
For example: Thank you for filling in my form.
Read more about Thank You Message
|
| Horizontal Snap |
A numeric field showing the space (in pixels) between the horizontal grid lines.
The grid lines (horizontal and vertical) are used for aligning elements, whether by using them as reference or by automatically snapping elements to them.
Changing the number in this field will widen (larger number) or narrow (smaller number) the space between the grid lines.
Read more about Using The Grid |
| Vertical Snap |
A numeric field showing the space (in pixels) between the Vertical grid lines.
The grid lines (horizontal and vertical) are used for aligning elements, whether by using them as reference or by automatically snapping elements to them.
Changing the number in this field will widen (larger number) or narrow (smaller number) the space between the grid lines.
Read more about Using The Grid
|
| Right To Left Layout |
A checkbox determining if the form is right to left (for forms in Hebrew or Arabic), or left to right (English, Spanish, Chinese, French, Dutch, Russian). |
| Public Form |
A checkbox determining if the form has external access - public, or not.
Once the checkbox is turned on the form is defined as public. Once it is turned off the form is private and may be used internally only.
|
| Mailing List |
A Textbox that determines who will receive a new data entry alert (containing all the data in it) in addition to the form owner.
The form owner receives a new data entry alert by default, and so if no addresses are entered in this field the form owner will remain the only recipient.
When filling in this field be sure to use valid email addresses separated by a semicolon (;). For example: daddy@yahoo.com;momi@hotmail.com
Read more about Mailing List |
| Background Color |
A Textbox in which the user can enter a custom color and change the background color of the form.
Valid values for this field are: color number (for example: #ffffff), or name (for example: red).
The other option for changing the background color is using the listbox in the design toolbar, which consists of fixed colors only.
If you do not know the color's value you can use this Color Picker.
|
| Font Color |
A Textbox in which the user can enter a custom color and change the font color of an element.
If you do not know the color's value you can use this Color Picker. |
| Email User Message |
A textbox in which a user can enter a message that will appear in the system's default e-mail sent to form fillers (if 'send copy' checkbox in the email element is checked) and recipients listed in the mailing list.
In order to create a multiple line message one must use [n] as a line breaker.
For example: Line1[n]Line2 (see also screenshot below).
Leaving this field empty will result in our standard email message.
Read more about Email User Message
|
| Spam protect |
A checkbox with which a form owner adds a captcha number to the form in order to prevent user spamming.
Once this checkbox is turned on all form filler will need to enter a random number prior to the form submission.
Read more about spam protect
|
| Disable Emails |
A checkbox with which a form owner can disable the email sent to him upon every data entry made to the form.
The checkbox is turned off by default - making the form owner the default recipient of data entry alerts. Once this checkbox is turned on the emails will not be sent to him.
Read more about How To Disable Emails |
| Max Rows |
A numeric field in which a form owner can determine the maximum entry rows he wants to collect (number of form submissions), after which the form will expire.
The default value is 0 and means that there is no row limit. |
| Close Form On |
A textbox in which a form owner can determine the expiration date of his form. Date format is mm/dd/yyyy (mm range from 1-12, dd range from 1-31) For example:12/24/2015.
This field is empty by default which means that it has no expiration date.
|
| Force Single Row Per User |
A checkbox with which a form owner can limit each user by allowing him to submit only one entry.
Once a user enters data the form will not be accessible to him again.
|
| Custom User Email |
An option to customize the standard format of the email sent to form fillers and mailing list recipients.
The email may be customized in terms of its appearance and form variables may be inserted to it as well.
Read more about Custom User Email
|
| Payment Integration |
An option to add a payment component to your form through which you can collect money from your customers..
The payment may be executed through PayPal, Swreg, Google checkout or Moneybookers.
|
|
|
|
|
Property Grid - Element Settings
The 'Element settings' as opposed to the 'Form Settings' is not always displayed.
It is only shown when ever an element is chosen.
On selection the 'Element Settings' table will be displayed (below the 'Form Settings' table),
containing the relevant element features.
There are a few basic common features which appear
in almost all elements settings.
In addition to these basic features, each element has its own special features as well.
Basic features are, for example:
Width - width of an element (in pixels).
Height - width of an element (in pixels).
Background Color - background color of an element.
Font Color - font color of an element.
|
|
| Width |
A numeric field which determines the elements width in pixels..
For example: the default width of a textbox element is 105 px. Changing the value to a larger number will make the textbox wider, while
changing the value to a smaller number will make the element narrower.
|
Height |
A numeric field which determines the elements height in pixels.
For example: the default width of a textbox element is 21 px. Changing the value to a larger number will make the textbox taller, while
Changing the value to a smaller number will make the element shorter.
|
| Background Color |
A Textbox in which the user can enter a custom color and change the background color of the element.
Valid values for this field are: color number (for example: #ffffff), or name (for example: red).
The other option for changing the background color is using the listbox in the design toolbar, which consists of fixed colors only.
If you do not know the color's value you can use this Color Picker.
|
| Font Color |
A Textbox in which the user can enter a custom color and change the font color of an element.
Valid values for this field are: color number (for example: #ffffff), or name (for example: red).
The other option for changing the background color is using the listbox in the design toolbar, which consists of fixed colors only.
If you do not know the color's value you can use this Color Picker. |
| Style |
A field intended for adding style code to an element or changing the current style code.
Attributes that may be changed using this field are border styles, font styles, background styles etc. Valid syntax for this field is: style attribute:value; (for example: FONT-FAMILY: Verdana;).
|
| Caption |
A field used for giving the element a name.
The caption given to an element will later appear in:
1- The form's report table
2- The new entry alert emails sent to the form owner, form fillers and mailing list recipients.
3- Pop up tooltip over the element when filling in the form.
4- Filters field list in the data management tool.
5- Variable list in the custom email window.
Id no caption name is entered, the default caption text will appear instead. For example: the default caption text of the textbox is: textbox-any.
|
| Mandatory |
A checkbox used to define the element as mandatory and force the user to enter a value in it..
The default status of this checkbox is turned off - this means that the element is not mandatory by default.
|
| Tab Index |
A numeric field used to define the order in which elements will receive focus when navigated by the user via the keyboard (Tab)..
In order to use this option one should select each and every element in the form and according to the field order one wants to create simply give each element an ascending number starting with the number 1.
For example: if you have 3 elements, the first will be 1, the second 2 and third 3.
Read more about Tab Index
|
| Max length |
A numeric field used to determine the maximum number of characters which may be entered in the element.
For example: The default max length value of the textarea element is 670 and the default max length of the textbox is 255. The value in this field may be changed but can never exceed 675, which is the system's character limit.
|
| Text |
A free text field in which the user enters text that will appear in the element itself.
This option exists in the Label element, the Link element and the Button. For example: the default text in the Button element is "Submit". This value may be changed to any other text.
|
| Items |
A button which opens an element's item list.
This option exists in: Listbox and Radio button. For example: when pressing on this button in a Listbox element settings a window will open in which one can enter the options in the listbox.
|
| Link Data |
A button which opens a list of forms and elements the element can link to.
This option exists in the Linkform.
|
| Vertical |
This option applies to the radio button element only. It is a checkbox determining if the radio items will be arranged in a horizontal or vertical layout.
This checkbox is turned off by default which means that the default layout is horizontal.
|
| URL |
This option applies to the link element only.
A field for entering a Url
The URL may be entered in two ways:
1. Filling in the textbox with a valid url.
2. Using the 'Url Picker' to pick an existing form. ( )
The Url must be valid and start with http or https. For example: http://www.bbc.com
|
| New Window |
This option applies to the link element only.
A checkbox determining if the url in the link will open in the same window or in a new window.
The checkbox is turned on by default meaning that once the link will be pressed the url will open in a new window.
|
| Send Copy |
This option applies to the Email element only.
A checkbox determining if an auto response email will be sent to the address entered in this element.
Read more about Send Copy.
|
| Alt |
This option applies to the Image element.
A text field in which one can enter text that will appear as a tooltip over the image.
|
| Source |
This option applies to the HTML element.
A textarea in which to insert the HTML custom code.
|
| Path |
This option applies to the Image element only.
A button which opens a browse option for uploading the image.
|
| Private Access |
This option applies to the Container element and the Multi Line element only.
A checkbox determining that all fields in the container will be visible to the form owner only.
Read more about Private Access.
|
| Mouse Over Color |
This option applies to the Container element and the Multi Line element only.
Along with the 'Mouse Out Color' option this field is used for creating a roll over effect.
Valid values for this field are: color number (for example: #ffffff), or name (for example: red).
Read more about Roll over effect.
|
| Mouse Out Color |
This option applies to the Container element and the Multi Line element only.
Along with the 'Mouse Over Color' option this field is used for creating a roll over effect.
Valid values for this field are: color number (for example: #ffffff), or name (for example: red).
Read more about Roll over effect.
|
| Reset Button |
This option applies to the Button element only.
This checkbox determines whether the button will act as a submit button (sending the data entered in the form) or as a reset button (clearing the form from all the data entered).
The checkbox is turned off by default which means the button is a submit button. Once this checkbox is turned on the button will act as a reset button.
|
| Auto Complete |
This option predicts the word or phrase being entered by the user and completes it.
The checkbox determines whether the auto complete will apply to the element or not.
|
| Mask |
This option enables applying a mask format on a simple textbox.
The textbox may be formatted to collect:
alpha numeric data, numeric data, date (month, day and year) and time (hour, minute and second).
Read more about the Mask
|
| Email Validation |
This option applies to an email element only.
It forces the form filler to validate his/her email address prior to submitting the form, thus preventing him/her from inserting a wrong or invalid email address.
Read more about the Email Validation
|
| SMS Alerts |
This option enables the form owner to receive SMS alerts (upon each data entry). This field should contain the form owner's cell phone number.
The SMS option requires an SMS bulk purchase.
Read more about the SMS Alerts
|
|
|
|
|
Secondary Side Toolbar
This toolbar is a combination of the three top toolbars and it appears on the right hand
side whenever the form is longer than 670 pixels.
The toolbar was designed to simplify the process of creating a long form. It prevents having
to scroll up in order to add or change elements or settings which were once only located
at the top of the designer.
The toolbar is a user friendly tool that follows you along when you scroll up/down a long form.
It moves in sync with the user and situates itself parallel to him.
The secondary toolbar consists of these elements/settings:
All elements :Label, Textbox, Numeric Textbox, Password, Textarea, Listbox, Linkform...
Font style options: font family, size, color, bold...
Alignment options: align right, align left, vertical align top...
Delete option and background color option.
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
