Beginner Tutorial Part 3 - Building a Simple Form

Time to start building!

1- Learn how to navigate the Form Designer

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

Question Types

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

There are several buttons, each one for a type of question to add to your form. These will appear in your "Question Tree" in the order they will appear on your device. In order, these buttons are:

• 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 (yes-no) or multiple answers
  
  • Choice: Inserts the options within your multiple choice question
• Number: Inserts a question with a numeric response, such as a phone number or age
• Date: Inserts a date or time question
• Hidden Value: Inserts a value of one question into another or allows you to perform more complex calculations
• Group: Inserts a group question 
• Multimedia Capture: Inserts a question that captures an image, audio, or video file
• Advanced: a list of more advanced, less common question types

You can hover your cursor over the question button to see what it does. For more information on the From Designer and Question types see our Form Designer Help Site.

Try clicking on the "T" to add a text question. You should see the following:

You will now see that there are two sections in the Form Designer 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. Main Properties- 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 Properties- 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 and Content- for adding multimedia or other special types of content
   4. Advanced- advanced stuff that we don't have to look at right now.

In this tutorial we will only be concerned with Main Properties and Logic Properties.

Try adding text in the Question ID and Label Text boxes.

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

2- Add questions

Let's start populating this form with questions.

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

It should look like this:

You can ignore everything that is not in "Main Properties."

Text Question: Village Name

• Add another text question
• Set the Question ID to village_name
• Set the Label text to: Village Name:
  

Easy, right?

Double check it:

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:

• Move Village Name above Woman's Name in the Question Tree

Date Question: Last Menstrual Period (LMP)

• Add a Date question (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!

Multiple Choice (one 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 gave birth previously.

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. When you do that you will see that the circle button next to it lights up:

• Click it twice to add both answers. It should look like this in the Question Tree:

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 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:

• Answer Value: yes
• Label Text: Yes

And the second choice:

• Answer Value: no
• Label Text: No

It will look like this:

Integer Questions: How Many Children?

This next two questions will be easy again. We want to add two integer questions. Click on the numeric question type to add the question.

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's does it look?

Single Select 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 ANC check-up!

The last thing we want to add is a screen that doesn't ask for any information, but 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:

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 you're Question Tree should look like:

3- Add simple logic

Your first form is ready- it's time to test your application. Go on to Part 4.