In the past our form builder was an advanced WYSIWYG tool which produced custom online forms flexibly and simply using a drag & drop motion.
Nowadays our forms builder has wider capabilities: it consists of a basic form builder and an advanced form builder.
The advanced form builder is the original tool, which enables a user (using the dragging and dropping of elements) to create a non restricted, stylish designed form with many customization options (such as email customization, adding images etc).
The Basic form builder is new tool designed to provide users with a quick and simple solution to create an online form. All you need to do is create a Pool of questions. The question text entered will become the field label in the form and the question type you choose will be displayed as the input type element (a textbox, textarea etc).
This for is not as flexible as the advanced builder however it enables to create conditional forms (making the form’s flow change dynamically according to the answers users fill in.).
Find out more about the Basic form builder
While our original form builder is an advanced WYSIWYG tool which provides flexible design using a simple drag & drop motion, the basic form editor lets you create simple forms without having to deal with the design aspects that much. In the new Basic editor all you do is construct a Pool of questions and define the Flow (sequence of questions) and the form is ready to use. You can create a basic flow by simply defining the order of questions in the pool, or you can create a compound flow which consists of several possible routes (based on the form filler’s input) – this is what we call a conditional form (if the answer to question 1 is A than go to question 2, if it is B than go to question 3…).
It is a great tool for creating your web forms easily and quickly. It is also the ideal tool for creating surveys and polls.
Find out more about the Basic Form Editor
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.
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.
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.
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)
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.
the mandatory checkbox must be turned on in order for the mask to work and be validated.
The email form builder enables you to create a rollover effect in a container element.
This means that if the form filler hovers above this container its color will change. This is a simple design feature.
In order to create this effect you need to:
1) Select the container element
2) Go to the container settings (element settings on the right)
3) Enter a color in the ‘On Mouse Over’ field, and a different color in the ‘On Mouse Out’ field.
4) Press on ‘apply’ and save the form.
As a result of this when hovering over the container element in the published email form the user will see one color and when moving the cursor away from the container he will see another color.
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.