Form Builder - Using drag'n'drop to define your project form(s)
For defining the questions and media you wish to capture we provide a drag and drop form builder for the creation and updating of forms within a project.
Initial Concepts + Glossary
Project - your project name is used in your project URL (eg plus.epicollect.net/myprojectName) and also when loading onto one or more phones.
Form - A set of questions (text or media) that is defined and presented to a user. A project can consist of one or more forms.
Fields - We use the term fields to refer to the type of question within a form - eg text or media fields.
Entry - We use the term Entry to refer to a completed form. For example, we collected 200 entries for our form.
Key Field - Each form you produce MUST have one field where, for each entry, the value captured by a user will be unique. This is similar in concept to a Unique ID that unambiguously differentiates one entry from another
Title Field - A title field is used when listing all entries for a Project - for example, when listing all your entries on a phone, the title field is displayed and should be chosen so that you can easily recognise an entry. The title field is also used when listing entries for display using Google Maps.
Demonstration Project - Schools - http://plus.epicollect.net/schools
For instructions we will run through the process of form creation on a demonstration project. Initially we will design a single form for a project surveying schools. In our demo project, we want to capture a small amount of information about many different schools in many different locations. To do this we will design a form named 'School' containing the questions we wish to capture.
This is purely to show you the kinds of fields that can be added, and for your own project, you can add any number of text (plain, numerical, date, dropdowns etc) and/or media fields (location, photo, video, audio, barcode) within a form.
The questions we will capture initially are as follows:
1) What is the Schools name? - This will be unique for each school and represents our Key Field
2) What is the Headteachers name? - This will be a plain text field
3) How many pupils attend the school? - We will define this as a numerical field
4) What date does the school year start? - We will define this as a date field, and specify the date format
5) What time does the school day start? - We will define this as a time field and specify the time format
6) What kind of school is this? - We will predefine a number of options as a drop-down list - the user can choose only one.
7) Does the school have any of the following sports facilities? - We will define a pre-defined list and the user may choose, none one or more of them.
8) Take a GPS point of the school - We will define a 'location' field allowing capture of GPS co-ordiantes for the school
9) Take a photo of the school - We will define a 'photo' field allowing the capture of a photo of the school
While defining these questions, we will detail settings you can/must define for each field.
Following this, in the sections on 'Validation' and 'Form Logic', through the addition of further questions we will demonstrate how logic can be defined within the form (eg jump questions) and validation set on different fields.
Finally, we will expand the project to add additional forms to capture information on Teachers linked to each school and also information regarding pupils that are linkied to each teacher.
The Form Builder - Brief Introduction
Briefly, The form builder consists of three sections, labelled 1-3 in the figure above
1) The type of form fields you can use are listed in the left hand column of the form builder (Pink) These consist of basic text inputs, Media Inputs and Links with other forms. You can expand /. contract each section by clicking on the headings.
2) The 'Form' section (green) will detail the form fields you have chosen, and you must define the parameters for each element in the Field Properties section.
To add an element to a form simply, click the one you wish to add, and, whilst holding the mouse button down, drag it to the form section and release the mouse button..
3) Field Properties - This allows you to define all aspects of an element - the question the user sees, the name of the column in your database for storage of data and validation etc.
Initially, you will be presented with a blank page. Firstly, you will need to add a new form- (1) in the figure above. This name will be used within the mobile app to refer to the form a user fills in. Your form name must contain only alphanumeric characters (a-z, A-Z, 0-9), NO SPACES and should reflect the nature of the data being collected.
Navigation and Project Validation
The top of the form builder contains a number of sections as follows:
4) Every time you make amendments to your form we recommend clicking the 'Save Project' button
5) The form you are viewing (we will explain multiple forms in the instructions) is highlighted and several icons are present as follows:
6) Project Validation: This will contain any warnings and or errors within your form. You will not be able to save a form until errors have been corrected. The validation box will point you towards where the errors are within your form.
We will now walk through the process of creating our demonstration Schools project