View Source

Time to start building!

How to add, delete, and change the order of questions in a form
What some of the different question types are
How to add Question IDs and what they mean
Adding and editing Label Text

1- Learn how to navigate the Form Builder

After hitting "create" or "edit" on your form, you are inside the Form Builder. The Form Builder is Dimagi's easy-to-use interface for building CommCare forms. As mentioned in CommCare Fundamentals, once you are comfortable with the process and structure, it is possible to use other tools to create forms.

Question Tree

Along the left side of the screen you will see the Question Tree. Selecting the 'Add Question' button will display a list of question types that you can have in your form.

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > question_tree_update.JPG

Each icon represents a category of question that you can add to your form. These questions will appear in your "Question Tree" in the order they will appear on your device. From top to bottom, these are the categories of question types:

Text: Inserts a text question in which a user types in a response
Multiple choice: Inserts a multiple choice question that can have a single-answer (i.e. Do you have children? yes or no) or checkboxes (i.e. which foods do you like? pizza/toast/peanut butter/apples/carrots)
- Choice: To add additional choices to a multiple choice question, select the 'Add Choice' button
Number: Inserts a question with a numeric response (i.e. phone number or age) such as an integer, decimal, or numeric ID
Date: Inserts a date or time question
Group: Provides a structure to keep related questions together
Multimedia Capture: Inserts a question that captures an image, audio, or video file. A signature capture field is also available
Label: No input required - used to display text only
Hidden Value: Allows access to values from other forms or allows you to perform more complex calculations. The user cannot see a hidden value when working in the form
Advanced: A list of more advanced and less commonly used types of question

You can hover your cursor over the question button to see the type of question it will add. Click on the drop-down next to each category to see a list of all possible question types. For more information on the From Builder and Question types see our Form Builder Help Page.

Click on 'Add Question' to add a Text question. You should see the following:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > add_text.JPG

You will now see that there are two sections in the Form Builder main page:

Question Tree - this is where you will be able to navigate among questions and change the order of questions. This is the portion on the left hand side.
Question Properties - this is where you control the actual content and properties of each question. This is the section on the right-hand side. This section can be further divided into three other sections that are controlled by the drop down menu in the upper right hand corner.

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > question_properties.JPG

Logic- this is where you can control whether a question is required, whether you only want a question to display some of the time, and if you want to put any limits on what type of answer you will accept.
Media- for adding multimedia
Advanced- advanced options that are discussed in other tutorials.

In this tutorial we will only be concerned with the Basic and Logic sections.

Try adding any text in the Question ID and Display Text boxes (i.e. try writing "patient name" or "address")

Delete this text question by using the red delete button in the upper right-hand corner.

You cannot put just anything as a Question ID. Here are the rules:

No spaces (underscores are fine; if you try to add a space it will be replaced by an underscore)
No special characters (like "&" and "$")
Cannot start with a number
Cannot be the same as another Question ID in the same form

If you violate one or more of these rules, you'll get a warning message! Try it!

In addition, we can suggest some best practices for Question IDs:

Make them descriptive- when you look at the data exports you are not going to see the Label text; you are only going to see the Question ID.
Be consistent- it is best to have a simple system such as using CamelCase or using underscores like first_name. This will make it easier when you are referencing Question IDs later.

2- Add questions

Let's start adding questions to this form.

Text question: Woman's Name

Click on the 'Add Question' button again to add a text question
Set Display text to say: Woman's Name:
Set the Question ID to say "womans_name"
- By default, CommCare will attempt to create a Display Text based on the question id. This can be altered to whatever you would like it to be.

This will create a text question, wherein the user will see a box and a full keyboard to type alphanumeric text. It should look like this in the form builder:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > womans_name.JPG

You can ignore everything that is not in this "Basic" section.

Question ID is what the data will look like when viewing the form submission. The mobile user WILL NOT see the question ID, only people look at the data will. If you are going to use a data analysis package, you may want to consider what format of the Question ID will be easiest for your software to process.

Display Text is the text that the mobile user will see. If you have more than one language in your application you will have labels for each language, but the same Question ID. You can have any type of special character (or non-English text) in a Label.

Here's how the question will look on CommCare for Android:

Text Question: Village Name

Add another text question from the Question Tree by clicking the 'Add Question' and then Text button
Set the Display text to: Village Name:
Set the Question ID to village_name

Easy, right?

Double check it:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > village_name.JPG

Here's how it is going to look on the phone:

Changing the Order

Look at the question tree- now we have two questions, "Woman's Name:" and "Village Name:". Let's say we want to put "Village Name:" as the first question. You will click on "Village Name:" in the Question Tree, and then drag it above "Woman's Name:". There is a small bar that will show where the question is going to be inserted and you will also see a green check mark. It will look like this:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > drag and drop.JPG

Drag Village Name above Woman's Name in the Question Tree and let go when you see a green check mark, as shown above

Date Question: Last Menstrual Period (LMP)

Add a Date question from the Question tree by selecting 'Add Question' and then selecting a Date type question.
Set the Display Text to: Date of Last Menstrual Period
Set the Question ID to: lmp

Everything is the same as when you added a text question, just the question type is different!

You can change the question type using the dropdown menu in the upper left corner of the Question Properties box. The questions are indicated by the same icons as in the Question Bar.

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > lmp.JPG

Here's how this question will look on the phone (note that calendar questions may differ depending upon phone models):

Multiple Choice Question: Had previous pregnancy?

Now comes a new type of question- the Multiple Choice question. We are going to ask a "yes or no" question- whether or not the woman previously gave birth.

This means we need to add three things:

The question
The answer choice "No"
The answer choice "Yes"

To do that, click on the "Add Question" question button in the Question tree to add a question. Make sure you choose the Multiple Choice option (Careful! We want a single answer question rather than a checkbox question). By default, no display text, question ID or choices are added with a multiple choice question. Let's change that!

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > multiple_choice.JPG

Click on the multiple choice question (the blank question displayed in the image above) and fill out the Display Text and Question ID:

Display Text: Has the woman given birth to any children that are still alive?
Question ID: living_children

However, we also need to add choices to the question. Select 'Add Choice' button and you will see something similar to what you have seen for other questions. By default, there are no choices, so let's press the button twice to add two:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > add_choice.JPG

The Choice Value is similar to the Question ID - this is how the data will be coded; the Display Text is the text that the user will see.

Set the first one to:

Choice Value: yes
Display Text: Yes

And the second choice:

Choice Value: no
Display Text: No

It will look like this:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > multiple_choice_finish.JPG

Here is how this question will appear on the phone:

Number Questions: How Many Children?

This next two questions will be easy again. We want to add two number questions. Because we only want to count whole numbers of children (1, 2, 3) and not decimals (1.4, 2.5) we will use integer questions.

Click on 'Add Question,' followed by the 'Number' question type to add the integer questions.

The first one should look like this:

Question ID: living_boys
DisplayText: How many living boys?

And then make a second question like this:

Question ID: living_girls
Display Text: How many living girls?

How does it look?

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > numbers.JPG

Here's how it will look on the phone:

Multiple Choice Question: Feeling Sick today?

Almost done with the first part!

Add another Multiple Choice question:

Question ID: feeling_sick
Display Text: Is the woman feeling sick today?

Then add two choices:

Choice 1:
- Answer Value: yes
- Label Text: Yes
Choice 2
- Answer Value: no
- Label Text: No

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > sick.JPG

Label: Be sure to tell the woman to go to get her check-up!

The last thing we want to add is a screen that does not ask for any information, but only provides a written message to the mobile user. We want to remind her to tell the pregnant woman to go to the clinic.

To add a label you will need to click on the 'Add Question' button to open the menu and select the Label question type:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > label.JPG

Then set the main properties as follows:

Question ID: clinic_reminder
Display Text: Remind the pregnant woman to go to the clinic for her check-up!

You're done adding questions! Here is what your Question Tree should look like:

CommCare Public > Beginner Tutorial Part 3 - Building a Simple Form > question_tree_done.JPG

You've got a beautiful form! But before we go too far we should test the form. It's important to test your form frequently so you can catch mistakes early. Fortunately, CommCare has a built in tool for form testing that doesn't even require a phone.

Note that your followup forms must have at least one question before we can test them using the tools described in the next section. Likely, one of your followup forms was pre-populated with a label. Check your second followup form, if there are no questions on it, add one label (it can simply be called, 'placeholder') which can be deleted later when populating the form with further detail.

Go on to the next section, Part 4.