Update: We suggest using the newer Data Entry fields feature of Zingtree instead to do this.

Zingtree’s Form Fields feature for list boxes has been tied into the Logic Nodes feature.  This means that you can have your end-users use a list box control to pick an option, and then branch according to the option chosen.

For example, you may have a person select from a list of states, and based upon their selection, you would branch to the proper node.  This is a lot cleaner than having 50 buttons, one for each state.

The Small Claims Limit demo tree shows how this is done.

Implementation Details

When you add a List Box form type into your tree, you can offer several options to the end-user. If you examine the HTML code, it may look like this:

<div class="form-group">
<label class="control-label" for="agelist"> Age: </label>
<select name="agelist" class="form-control zt-data">
<option value="" score="0">- pick one -</option>
<option value="<18" score="18">&lt;18</option>
<option value="18-30" score="30">18-30</option>
<option value="31-50" score="50">31-50</option>
<option value=">50" score="200">&gt;50</option>

By modifying the score= attribute on each option, if that option is picked, the score increments by the value shown. In the example above, if the end-user picks 18-30, then the score for that choice increases by 18, the score= attribute.

From there, use a Logic Node to branch according to the cumulative score.

Important Tech Tip: If you use a List Box, the score for your default selection will be added to your running total at the start. (This is due to Zingtree loading the entire tree at once for performance reasons.) The best practice is to make your first option have a score=0, like this:

<option value="" score="0">- pick one -</option>