What kind of forms can I create with an email form builder?

Email form is a term that describes all the online web forms which automatically send the form owner an email (containing the data entered) upon each form submission.
a common email form is a contact form. This email form is used to communicate with the site users. It enables the users to get in touch with the site owner and the site owner to be aware of things.
Another kind of common email form is an order form. This type of email form allows the form owner to offer his products over the web.
An invitation form is used to track people’s expected event attendance. It is used to to inform people of an upcoming event and collect their comments and confirmations regarding their attendance.
A support form is used in many technical related issues in websites and it allows the users to ask for specific assistance and describe their problems in length.
In short, Email forms are used on a large scale and are very important for keeping track of what is going on in your website. Other commonly used email forms are: polls, surveys, rsvp, feedback forms etc.

How to change the font color in your email form

One of the design tools available in your email form builder is the font style. You are able to change font size, weight (if it is normal or bold), italic, underlined…and you can also change the font color.
In order to change font color in the form builder you can use:
1- The form settings – font color field.
Through this field you can determine the font color of all the elements in the form at once.
The field enables you to enter any color by specifying its number (such as #ffffff) or its name (such as red).
2- The ‘font color’ icon in the upper toolbar – style section
This option allows you to change each element’s font color separately. In this option you can only pick from a list of colors given to you.
All you need to do is select the element and press on the icon. a small window will appear and you will be able to pick a color from the list.
3- The element settings – font color field.
This option, like the first in the form settings, allows you to enter any color you want. The only difference is that the font color in this option is only applied to a certain element and not to the entire form.

How to change your email form’s width and height

A new email form always has a default size width and height (727×506 px).
Usually the size of the form is not important unless you wish to embed the email form in a specific area of the webpage – in this case you will have to determine the exact height and width of the email form so it doesn’t get cut. When embedding a web form you need to publish it as “script” or “iframe” and insert the generated code the specific area of your web page html.

Following are steps to change your email form’s width and height:
1- Enter the form in the email form builder.
2- Go to the ‘form settings’ on the right.
3- enter a different width and height.
* if you are trying to contract the form size when there are elements in it you may not be able to do so if there are elements in the way. If this is the case, try to move/change elements size to allow the wanted contraction.
4- press on ‘apply’.
5- save the form.

** please note that if you change your form’s dimensions after it has been embedded you will need to publish it again and replace the current generated code with the new one.

Adding a mask to your email form

A mask is a format which is applied to a textbox element and enables the form owner to collect
data in this specific format. The mask format is determined by characters and delimiters
which are used in a certain order. Once the mask is applied to the textbox the form filler will not
be able to enter data that does not fit the format.

examples of masks:
Date – dd/mm/yyyy
Time – HH:MM:SS
A code – x-nnnnn
A phone number – nn-nnnnnn

Characters and delimiters
A character represents specific data and is made out of one or more chars. for instance HH is
a character which is made out of 2 H chars and represents hour data.
A delimiter is a sign that separates between 2 characters. For example HH:MM -the colon sign
is a delimiter between the hour character and the minute character.

Following are the mask characters and delimiters:

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

/ – 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 email form creator).
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.

Take note!
the mandatory checkbox must be turned on in order for the mask to work and be validated.

Send a copy of your email form alerts

Each time a person fills in your published email form and presses on the ‘submit’ button you automatically receive a new data entry alert e-mail.

If you wishe to send a carbon copy of this email to the form filler (as a confirmation, for example) you may do so by using the ‘Send Copy’ option situated in the ‘element settings’.
Steps to add a Carbon Copyto your email form:

1) Select the E-mail element in the form.
(A carbon copy is sent to the email address that is entered in your email element, so if your email form does not contain an email element-just add one).

2) Select the email element and turn on the “Send Copy” checkbox in the “element settings”.
3) Press on the “apply” button.
4) Save the email form.

Protecting your email form from spam

‘spam protect’ is a feature that prevents the possibility of a form filler to spam your form and shower you with unwanted entries and emails. Once a form filler presses on the ‘submit’ button in your published email form he/she is prompted to fill in the characters in the captcha box before the form may be submitted.

Please note!
In Safari/IE6/IE7 or in forms smaller than 220×220 pixels the spam protect prompt (in section 3) will appear in a regular pop up window.

All you need to do in order to add this feature to your email form is:
1) enter your form in the email form creator
2) check the “Spam Protect” checkbox situated in the ‘form Settings’.

3) Save the form.
The Following image displays the ‘Spam Protect’ prompt that will appear once a user attempts to submit the form.

Using the grid to design your email form

One of the best design tools in the email form builder is the grid.
The grid is a network of horizontal and vertical lines that covers your design area.
The ‘Show Grid’ and ‘Snap to Grid’ checkboxes in the top menu allow for more precision in positioning Elements on your form.
The ‘Show Grid’ option makes the grid appear, whereas the “Snap to Grid” pulls the Element selected into alignment with the nearest intersection of grid lines.
These 2 options are best used together, but can be activated separately as well.

Steps to use the grid:

1) Check the ‘Show Grid’ and ‘Snap to Grid’ options in the “Element Toolbar”.

2) Determine the space between the vertical and horizontal lines in the “Form Settings” box on the right.

3) Drag an element and let go (drop) it somewhere in the design area.
Notice that while holding the element a Blue corner will appear, indicating the closest intersection of grids, where the element will be snapped to if you let it go.

4) The element will then align to the nearest intersection of grid lines.