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

Using a listbox in your email form

This post will focus on the listbox element and demonstrate how to use it.
Attached is a link to a tutorial movie about using the listbox as well as a step by step written instruction on how to use the listbox.

The tutorial : Using the listbox element

Steps by step detail on how to use a listbox:
1- Drag the listbox element into the form design area.
2- you can change its width by stretching it or using the width attribute in the listbox settings.
3- Press on the items button in the listbox Settings.

4- don’t forget to give the listbox a caption and tab index number
5- Open the items list in the ‘listbox settings’ and fill in your items as needed.
once your item list is complete close the window and press on ‘apply’
6 – you can always add items to the listbox by opening the ‘items list’ and pressing on the “Add Item” button. The new item row will open at the bottom of the list and the new item entered will be placed there.
7- You can also remove items from the list at any time by pressing on the minus icon in the ‘item list’ window.
8- if you wish to change the items’ order you can do so by selecting an item (standing in its row) and pressing on the “up” or “down” arrows (depending on where you want to move it).

Create an email contact form

A contact form is the most common type of online forms in websites today.
The contact form enables a communicational channel between the website owner/manager and the website users.
Being an email form means that all the data entered in the form is automatically sent via email to the form owner – alerting a new data entry. In addition to the email, the information is also stored in a data management tool and may be edited and viewed.

Here are steps to create a contact us form:* the FormLogix template gallery offers readymade contact us templates for those who do not wish to create one from scratch.
1- Enter the form creator.
contact-enter
2- Give the form a name in the form settings.
contact

3- Drag the input elements needed:
textbox – for the name field
textbox – for the company field
email element – for the email address
textbox – for the subject text
textarea – for the description multi rowed text
contact1
4- Select each element and go to its “element settings” on the right and do 2 things:
a- give each element a caption name (for example: “name” for the name field element)
b- give each element a tab index number (starting from 1 to the first element, 2 to the second etc.)
contact3
5- Drag a label next to each element and change its text (to be the same as the element’s caption) .
contact2
6- Add buttons:
submit button – for submitting the form
clear button – for clearing the data filled in the contact fields
contact4
in order to create a clear button simply drag a regular button element -change its text to
“clear” and check the “Reset Button” checkbox (in the element settings).
contact5
7- Save the form.

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.

How to create an online wedding invitation – RSVP

Getting married? Want to use an online wedding invitation- RSVP? No problem – you can build an online invitation form yourself.

An online wedding invitation is a great solution for all you busy people (and really…who isn’t busy when planning a wedding?) who do not want to find out whether or not people are coming by letters or phone calls. Why waste time when you can find out via email?
A wedding is a happy occasion that is never taken lightly: planning the event takes up lots of time and efforts. Finding the right venue, catering, music, cake, dress and suit, shoes, hair dresser, makeup artist, bouquet, rings, minister, honeymoon etc…the list of things to is really long. When you put such efforts in this event you really want to make sure that your guests are coming…this is where an online wedding invitation comes in.

The best thing about creating the form using a form builder tool is that it is really easy and no programming skills are required whatsoever. In addition, you do not need to install or download anything because the form creator is a web tool.

What are we waiting for?  Want to know How to create a wedding invitation?
here’s a step by step manual:

1-      login to the form creator
wed1-login

2-      in the data center – choose “create new form”.
wed2-new

3-      If you have the initial help label on the screen (“To start simply drag an element from the toolbar”) press on the “delete” icon to remove it.
wed3-del

4-      Go to the “form settings” on the right and give you form a name
wed1-name

5-      Change the background color of the form (I chose the color # e9c0ea, but you can keep it white if you like…)
wed4-bg

6-      Add an image of your choice (a picture of you and your boy friend/girl friend, 2 love birds, puppies, flowers, or whatever you think is suitable) by dragging the “image” element. Make sure to enter the actual width and height of the image in the “element settings” so the picture will not be distorted.
wed4-img
wed5-img

7-      Add a 5 px white border around the image by using the border style options in the “design toolbar”.
wed6-border

8-      Drag a “label” element from the “element toolbar” above and change the text in the “element settings” on the right to :”we’re getting married”
wed7-label

9-      Change the font family, size and color of the font (verdana, 37px, white, bold) using the design toolbar.
wed8-label

10-   Drag another label element and enter your invitation text :  “we invite you to join us…”. Again, change its style as you wish.
wed9-label

11-   Drag a textbox element and go to its element settings. Enter the text  “name” in the caption (this will be the element’s name in the system now) and enter the digit 1 in the tab index field.
wed10-label

12-   Drag a label and place it above the textbox. Change its text to “name”.

13-   Drag a checkbox from the “element toolbar” above and go to its settings on the right. Call it “attending” in the caption and enter the digit 2 in the tab index field.
wed11-checkbox

14-   Drag a label and place it above the checkbox. Change its text to “attending”.

15-   Drag a numeric textbox. In the settings call it “number of people” and enter tab index=3.
wed12-num

16-   Drag a label and place it above the textbox. Change its text to “number of people”

17-   Drag a submit button. In the element settings change its background color to # e9c0ea.
wed13-button

18-   Select all elements in the form (by pressing “ctrl”+a) and move them to the left.

wed14-move

19-   Change the form’s width to 600px and press on “apply”.
wed15-size

20-   Save the form.
wed16-save

21-   Preview the form in order to test it
wed17-publish
That’s it!  Your form is done!  All you need to do now is publish it.
stay tuned and find out more about how to beautify your web form.

How to choose the right elements for your form

The formlogix form builder contains a variety of elements designed for creating  forms.
All elements may be dragged and dropped on to the design area and all have settings that may be changed according to the form owner’s needs.

Each element is designed to fulfill a different function and should therefore be used in different circumstances. Following is a description of each element and its most important settings.

1-      Label
the label is a textual element that is used to add text to the form (titles, descriptions, etc). The label is most commonly used as the name of the field which is placed next to an input element.
label

2-      Textbox
the textbox is the most common input element. It is used to collect alpha numeric data (letters, numbers and characters). This element‘s settings include important features such as: Mandatory (forcing the user to fill in this field), max length (determining how many characters may be entered in the field) and auto complete (an option which guesses the word/phrase while being entered and completes it).
textbox

3-       Numeric textbox
this textbox element is used to collect numeric data only. Its settings are identical to the regular textbox.
numeric_textbox

4-      Password
the password element is designed to collect alpha numeric data (just like the regular textbox). The only difference is that this field hides the characters while they are being entered. The field’s settings are identical to the regular textbox.
password

5-      Textarea
the textarea element is used to collect a multi rowed text data. Its settings are identical to the regular textbox (max length is limited to 675 characters).
textarea

6-      Listbox
the listbox element is used to offer the user a list of options from which to choose from.

the important settings of this element are the “items” in which you enter the list values and the mandatory checkbox (take note-when using this option you must see that the first value in the items list is a title text such as: “please select” or “choose”)
listbox

7-      Linkform
the linkform element is a dynamic dropdown list. The values in this list are driven from another form and that is why it is called linkform (links between forms).
linkform
Read more about linkform

8-      Checkbox
the checkbox element has 2 states: off and on and it thus giving the user 2 options to choose from. Defining the checkbox as mandatory in the element settings will force the user to turn on the checkbox prior to submitting the form.
checkbox

9-      Radio button
The radio button, like the listbox, offers the user an array of options, only they are presented alongside each other in a horizontal layout (and may be shown vertically as well.) important settings:  vertical checkbox- turns the radio items layout to a vertical one. Width- the form owner can define a fixed space between each radio button to another.
radio
read more about the radio button

10-   Link
this element is a link to another form or a chosen url that may be inserted to the form.  
The important settings in this element are: url – the field in which the url of the link is defined. You can enter a url or use the picker […] to choose another form. New window checkbox – if this checkbox is turned on the link will be opened in a blank window when pressed.
link

11-   Linkbox
the linkbox element is designed for collecting links. It has no special settings.
listbox

12-   File upload
the file upload element  is used to attach documents to the form. The file types that may be uploaded are:  gif, jpeg, png, jpg, tiff, pdf, xml, htm, html, txt, doc, xls, pff, rtf, zip, mp3, avi, wav, wma, rar, xlsx, docx, dwg, skp. There is also a limit of 1.5mb per file.
upload

13-   Email
this element is designed especially for collecting email addresses. When this element is defined as mandatory in the element settings it turns on a validation mechanism that makes sure that the email address is valid. This element also has a “send copy” option which sends a carbon copy email containing the data entered in the form to the form filler.
email

14-   Calendar
the calendar element allows the user to enter a date made of the day, month and year.
it can be defined as mandatory.
calender

15-   Image
this element enables the form owner to add images to the form and even use them as backgrounds by placing other elements on top of them.  Choosing the image is done using the “path” field in the element settings. An “alt” may also be added to the image. Notice that when choosing your image you will need to enter the right width and height since a default width and height are used.
image

16-   Html
the html element is designed to allow inserting html scripts. It does not have any special settings.
html

17-   Container
the container element is used to contain other elements in it. When elements are placed in the container and the container is moved than all elements move with it without changing their relative position.
Special features that may be assigned to this element in the element settings are: private access checkbox – defining that all fields inserted to the container will not be visible to the form filler, but only to the form owner. This is used to add comments to entries after they are filled in. Mouse over color/Mouse out color – with these fields the form owner can create a roll over effect on the container.
container

18-   Multi line mode
this is an advanced element and is not commonly used.  This element creates a repeatable section and allows the user to insert as many data rows as he wants by pressing on the “add” button, or canceling them by a “remove” button.  This element is usually used in order forms.
multiline

read more about multiline mode

19-   Submit button
This element is used to submit the form. The special options in the element settings are:  text- changes the text on the button.  Reset button checkbox – turning on this option will change the button to a reset button which clears the fields in the form when pressed.
submitbutton

How to publish your web form

so you finished your contact form? All is good and well, but how do you embed it in your website? How do you use the email form?
well…the answer to this is really simple – Once your web form is finished and saved all you need to do in order to use it publicly is “publish” it.
publishing a form means externalizing it. Generating its code and using it in order for other to fill data in it.
There are 6 different publishing methods in the form builder. Choosing the right publish method depends on your needs – whether you want to embed the form to look like an integral part of your site or blog, or you want to use its url as is or as a link.  Once you choose a method (by selecting the radio button value) a generated script will appear and you will only need to copy and paste it.

The 6 publishing methods are:
URL – this is the url of the form. This url can be placed in a link or sent to others so they can enter the form. O simply given as is to enter in the browser’s address bar.
IFRAME – this code is used to embed the form in blogs.
LINK – this code is used to add a link for others to enter the form through.
SCRIPT – this code is used to embed the form in a website.
MAIL – when you choose this option a your mailing system window will open, allowing you to send an email, containing a link to the form.
GOOGLE SITES – this code is suitable for those who wish to put a link to the form with-in “Google Sites”.

form publishing options
form publishing options

read more about the publish option.