Adding a textbox mask to your feedback form

Sometimes you need a special textbox in your form, which can only collect a certain kind of data (such as date or time). This kind of element does not exist as a basic
element in the form builder, but it can be created.

If, for instance, the you wish to collect date and time data in your feedback form, but in a different format than the one used by default he can do so by simply using this option. All you need to do is use a regular textbox and define a mask of
dd/mm/yyyy-HH:MM.

This option may also be applied on collection of alphanumeric codes and numbers (examples below).
examples of masks:
Date - dd/mm/yyyy
Time - HH:MM:SS
A code - x-nnnnn
A phone number - nn-nnnnnn

Mask Format:
In order to use the mask you need to use characters and delimiters as follows:
x- character for collecting alpha numeric data (using only lower case letters)
n- character for collecting only numeric data (using only lower case letters)
yyyy – character (made out of 4 chars) for collecting year data (using only lower case letters)
mm– character (made out of 2 chars) for collecting month data (using only lower case letters)
dd- character (made out of 2 chars) for collecting day data (using only lower case letters)
HH- character (made out of 2 chars) for collecting hour data (using only capital letters)
MM- character (made out of 2 chars) for collecting minute data (using only capital letters)
SS- character (made out of 2 chars) for collecting second data (using only capital letters)

Take Note!
Characters may only be used in the format specified above (for example the year character
may only be entered in 4 lower case letters: yyyy).
Only the x and n characters may consist of one or more chars (n or nn or nnn or nnnnnn etc).

Delimiters:
/ - used as a delimiter. For example: the date dd/mm/yyyy (27/11/2009)
: - used as a delimiter. For example: the time HH:MM:SS (12:32:45)
- used as a delimiter. For example: a phone number nn-nnnnnn (09-8871634 or 04-6543378)

How to Create a Mask
Steps to create a mask:
1- Drag a textbox element (in the form builder).
2- Go to the textbox's settings on the right.
3- Fill in the desired mask format.

4- Turn on the "mandatory" checkbox.
5- Press on "apply".
6- Save the form.

Web form essentials

There are a few important things to remember when creating any type of web form using a form builder:

1- form name
When you create a new form it is not mandatory to change the default name but it is highly recommended since it helps to distinguish between the forms in the future. In addition the form name appears in the emails sent to you and your users in the subject field.

2- form width and height
If you intend on embedding the form in your website/blog then this feature will be really important in order to make the form fit perfectly.

3- element caption
The element caption is basically the element name. The caption appears in many places (emails, data management result table, filter listboxes, etc) so if you do not provide it with a unique name you will not be able to tell it apart from the other elements.
when you drag a new element to the design area it already has a default name, however this name is general and will not help you identify the element in future use.

4- element tab index
The tab index is an attribute that each element has, which defines the order or fields. This order will be applied when the user tabs through the form, it will also be applied in the emails sent to you/users and in the data management result table.

How to create the feedback form?

Let’s get practical – Following are a few simple steps to help you create your feedback form using a form builder:

1- Make a plan. Decide on the data you wish to collect and the way you want your form to look and make a written plan. What data is important to you? Do you want to collect the form fillers name? is important for you to get his address? Do you want the user to categorize what the contact purpose is or will you be satisfied with him describing the purpose freely in a multi row free text field?
What would you need to do in order to nicely embed your form in your website? Would you want the form to have a certain background color? Font family and size? Would you want to add an image to the form?
These questions are important in order to decide on the fields you want to create.

2- Enter the form builder and set the form name and size in the form settings on the right.
on to the design area:
3- start dragging the elements:

Name field – Textbox element
- Drag a textbox for collecting the form filler’s name. Go to the element settings on the right and change its caption to “name”. Set the tab index number to “1″. Press on “apply”.
- Drag a label element and place it next to the textbox. Change its text in the label’s settings to “name”. Press on “apply”.

Email field – Email element
- Drag an email element for collecting the form filler’s email address. Place it below the name textbox you dragged earlier. Go to the element settings on the right and change its caption to “Email”. set the tab index number to “2″. Press on “apply”.
- Drag a label element and place it next to the textbox. Change its text in the label’s settings to “Email”. Press on “apply”.

Feedback Subject field – Textbox element- Drag a textbox element for the subject. Change its caption and tab index as you did in the previous elements.
- Drag a label element and place it next to the textbox. Change its text in the label’s settings to “subject”.

Feedback description field – Textarea element- Drag a textarea element for the message field. Change its caption and tab index as you did in the previous elements.
- Drag a label element and place it next to the textarea. Change its text in the label’s settings to “description”.

4- Add a submit button to the form
5- Save the form
6- Press on “preview” (in the general tobar-5th icon from the left) in order to check the form.
7- Publish the form in order to embed it in your website/direct people to it.