To design your form we provide a drag'n'drop form builder that allows you to drag form elements onto a template form and then define the FORM ELEMENT DETAILS that specify the labels and the values for the form elements you choose.

The LABEL is the text that will be displayed on the phone next to the form element and should describe what data you wish to be entered into that form element.

The ID is how the data collected for that form element is stored in your project database, and can be thought of as equivalent to a column heading in a spreadsheet or database.

The ID chosen be short and contain no spaces and only consist of alphanumeric characters.

The Title option allow you to choose one form element to act as the title for each entry you make on the phone. Data entered into the title form element will be displayed when all entries are listed (see here for further details).

Note : You can only choose ONE form element to act as the TITLE for each form. If you try to choose more than one you will be warned when you come to save your form.

At your project home page mapping interface (further details here) we provide the facility to display bar charts or pie charts of the data you collect. If you check the Chartable checkbox it means that you wish to be able to display the data collected for this form element as a chart.

Note: Currently you can choose a maximum of three form elements for charting. Also note, that charting will work best for 'Select One' and Select Multiple' form elements where you can specify the choices to be made.

Drag a Text Input form element from the left section to the middle section and drop in place. You will then see that the Element Details section (blue) contains a box to enter the Label and ID of the element and a series of check boxes to specify its properties.

For our first form element we enter 'What is your name / nickname?' in the Label box and we want to store this data as 'name'. We also want all entries to have data for this form element and so we check the Required box. When we list all the entries collected for this form we want the name that was entered to appear as the title for each entry. This Form Element will therefore be the one assigned as the 'Title' and we have checked the Title checkbox. Clicking 'Done' updates the middle Form section with our entries as in the above figure.

If, for example we were asking the question 'what is your age?' we could also check the Numeric checkbox and this would mean that only numeric characters could be typed into this form element when loaded onto a phone (your phones keyboard will not allow you to enter anything other than numbers).

We have left the chartable check box blank as, in general, charts are most applicable when you have specified a defined set of choices for entry (see Select one below for example) so that the charts are meaningful. For example, if you had 100 people entering a different name, your chart would soon become unreadable!

For this question we will use a 'Select One' form element. As with the text input, we drag a 'Select one' from the Form Element section to the Middle section and position it under the 'What is your name....' form element and release. Again, the element details section updates but this time with details for a Select One form element.

Again, the Label and ID boxes are now filled in. For Label we enter 'Male or Female?' and we will store this data with the ID 'sex'.

Now we must define each of the options that a user can choose - In this example the answer to the question can only be 'Male' or 'Female'. This form element differs slightly from the text input form element in that each option has two pieces of information that need filling in - the option Name and the option value.

For each OPTION you wish to use you must specify a Name and Value The Name is what will appear in the drop-down list when viewed on the phone The Value is what will be stored in the database when this option is selected for entry to a select one element. We use these two values because in some cases you may not want to store what is selected by a user as the value in a database. For example, if you had 10 options you wanted to define (eg a list of colours) you may want to store integer values for your list of 10 rather than the name of the colour.

To specify further options simply click the 'Add Option' button and this will add a new option where you can fill in the name and value. So back to our 'Male or Female?' question. In this case we are going to define two options 'Male' and 'Female' Having entered 'Male' in both the option name and value, we can now click 'Add option' and fill in the details for the 'Female' option, as in the following figure.

For this question, we might want to chart the data and so we click the 'Chartable' check box (and we've chosen a pie chart) and also the 'required' option as, in theory, it should always be possible to answer this question.

Once we have entered the choices we can click 'Done' at the bottom right of the Form Builder to save the choices and update the middle Form section with our options (as above).

In the same way, and using further Select one Form Elements, we can now also enter the questions and options for questions 3 and 4 as follows.

Q3. What is your age?

Q4. Which search engine do you most often use?

Clicking 'Done' after entering details for each question updates the form as in the following screenshot (note we are focussed on Q4 so the Element details appear to the right).

As there are several options, we drag a 'Select Multiple' form element to the green Form Section and the Element Details section of the form builder updates. In a similar fashion to the Select One form element we will define a number of options that a user may choose, each of which need an Option Name and Option Value entered.

For the Select Multiple Label we enter 'Which social networking sites do you use?' and we will store this data with the ID 'socialnetworks'.

By using the 'Add option' button we can add our list of websites and specify each option name and value as in our Select One example. After doing so we select that this is a 'Required' field and also that we want to chart the results as a pie chart. Clicking done updates the form as in the following figure.

As you are building up your form, or when you have completed the form, you can get a sense of what it will look like on a mobile device by clicking 'Android' or 'iPhone' on the 'Preview' line at the top of the green Form section of the form builder. As an example below is a preview of the above form on an Android device.

NOTE: 'Select One' options will appear as drop-down lists when loaded on the phone, however, for preview purposes you will see them as a list of options. Also, on an Android device, if your form contains more than five form elements, the form will automatically be paginated into a series of pages to make it easier to enter large amounts of data.

Android Preview