Beginner Tutorial Part 3 - Building a Simple Form

Time to start building!

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 Bar

Along the top of the screen you will see the Question Bar that displays a number of different icons which represent question types. You can click on the drop down arrows to see the types of questions in each menu.

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 left to right, these categories of question types:

• Text: Inserts a text question or a "label" that does not elicit a user response
• Multiple choice: Inserts a multiple choice question that can have a single-answer (i.e. Do you have children? yes or no) or multiple answers (i.e. which foods do you like? pizza/toast/peanut butter/apples/carrots)
  
  • Choice: Inserts the options available for your multiple choice question
• 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
• 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.
• 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.
• 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 the  to add a text question. You should see the following:

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

1. Question Tree- this is where you will be able to navigate among questions and change the order of questions
2. Question Properties - this is where you control the actual content and properties of each question. This section is further divided into four sections:
   1. Basic- the Question ID is what you will see in the data export, and the Label is the text that the mobile user will be seeing.
   2. 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.
   3. Media- for adding multimedia
   4. 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 Label 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.

2- Add questions

Let's start adding questions to this form.

Text question: Woman's Name

• Click on the "T" button again to add a text question
• Set the Question ID to say: woman_name
• Set Label text to say: Woman's Name

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:

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

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

Text Question: Village Name

• Add another text question from the Question Bar by clicking the "T" button
• Set the Question ID to village_name
• Set the Label text to: Village Name:
  

Easy, right?

Double check it:

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:

• 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 Bar by clicking on the calendar icon
• Set the Question ID to: lmp
• Set the Label Text to: Date of Last Menstrual Period

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

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

Multiple Choice (Single Answer) 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 "multiple choice" question button in the Question Bar to add a question. Make sure you choose this icon:   (Careful! We want a single answer question rather than multiple answer)

When you do that you will see that the circle button next to it becomes active. This button allows you to add choices.

• Because we want to have a yes/no question and there are already two choices, it is not necessary to add any additional choices.

Click on the question ("question4" in the image above) and fill out the Question ID and Label Text:

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

However, we also need to change the names of the choices. Click on one of them and you will see something similar to what you have seen for other questions:

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

Set the first one to:

• Choice Value: yes
• Label: Yes

And the second choice:

• Choice Value: no
• Label: No

It will look like this:

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 the number question type to add the integer questions.

The first one should look like this:

• Question ID: living_girls
• Label Text: How many living girls?

And then make a second question like this:

• Question ID: living_boys
• Label Text: How many living boys?

How does it look?

Here's how it will look on the phone:

Multiple Choice (Single Answer) Question: Feeling Sick today?

Almost done with the first part!

Add another Multiple Choice (Single Answer) question:

• Question ID: feeling_sick
• Label 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

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 drop-down menu text to the "T" for text question in the Question Bar:

Then set the main properties as follows:

• Question ID: clinic_reminder
• Label 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:

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.

Go on to the next section, Part 4.