what is the tab index?

The tab index is an attribute that exists in every input element in the form builder and is designed to determine the order of all fields in the form. The tab index number is not given automatically by the system and the form owner must fill them in and define the fields’ order.
When you give all fields a tab index number you are actually defining which field is first, which is second and so on, thus allowing the form filler to make his way in the form using the ‘tab’ key in his keyboard.
The tab index number is also significant for the form owner since the same field order will be applied on the emails and data management report (the order of result grid columns).

Steps to change the tab index number:
1- enter the form in the form builder.
2- Select the element you want to be first and go to its ‘element settings’ on the right.

3- Fill in a tab index number in an ascending order (first element will be 1).
4- Press on ‘apply’.

5- Select the second element and give it the number ‘2’.
6- Continue to do so with all elements.
7- Save the form.

Advertisements

What kind of forms can I create with a form builder?

There is an endless array of web forms you can create very simply using a form builder.
This post will provide several examples of forms, layouts and designs in order to show the variety you can achieve when using the form builder.

1- Contact form
2- Poll/survey
3- Online invitation
4- Event registration
5- Support form
6- Order form

Each form created in the form builder could, of course, be created in other ways (other fields, other field orders, other colors, other fonts, other layouts etc.). In addition each form can be edited after it is finished.

Online contact forms
The most common web forms. Help websites/blogs/companies keep in touch with their clients/users. A contact form usually consists of the following fields: name, company, email, phone #, subject, contact purpose, detailed message.

Polls/surveys
A tool used to collect public opinions for research or other purposes.
Usually consist of questions and array of answers the form filler needs to choose from.

Online invitation
A web form designed to invite users to a certain event (such as a wedding). It usually consists of a visual image and event details (what, when and where). This form also usually collects data which indicates if the form filler intends on attending the event.

Event registration
Large scale events are always well planed and need to be organized. A registration form to an event is one way or organizing it. This form usually consists of fields such as: full name, telephone #, email address, reservation for # of people etc.

Support form
A form dedicated to provide support to users allowing them to contact the website and discuss/ask for assistance/inquire/feedback about different topics.
This form usually consists of these fields: name, email address, contact purpose (technical problem, sales, or other), phone # and description. This kind of form is much like the regular contact form only it emphasizes the support aspect.

Order form
This form is used to collect orders over the web, it does not include the purchase phase. The user fills in the product he/she is interested in and the quantity and the website owner gets in touch with him/her via email/phone in order to complete the purchase.

Creating an online order or purchase form

In the following post i will discuss the differences between an order form and a purchase form and provide a step by step instruction of how to create a simple order form (I will elaborate on the purchase form in the next post).

Many people have started to collect orders and even sell their products online. In order to add this kind of email form to your website you will probably need to spend a large sum of money to hire a professional programmer. Another alternative, especially for those who do not have any programming skills, is using a form builder.

What is the difference between an order form and a purchase form?
An order form – is a form in which the users choose a product and order it. This form does not deal with the purchasing process at all. Usually the multi-line element is used in this form to collect the info of several items.
A purchase form – a form in which the users can choose the item they want to buy and pay for it online using PayPal/Google checkout/Swreg/Moneybookers. In order to create such a form you have to use the “Payment Integration” option.

Here is a step by step instruction of how to create an order form in the form builder:
1- drag elements to collect the user’s personal information –
textbox to collect his/her name
textbox to collect his/her address
textbox to collect the phone number
email element to collect the user’s email address
Order-elements

a multiline which contains a textbox for collecting the product name, a numeric textbox for collecting the
quantity of each product and a textarea for collecting free text (remarks).
OrderMultielements
* Don’t forget to give each element a name (element settings>caption) and tab index number (element
settings>tab index).
Read more about the cation
Read more about tab index
2- Drag labels for each element. Change their text to be same as the element’s name and
place them next to the relevant elements.
Order-labels
3- Drag 2 labels and create section titles: Personal details and Order details.
Order-titles
4- Drag a submit button.
Order-submit
5- Design the form (colors, positioning etc)
6- Save the form.

Please tune in for the next post about creating a purchase form.