Zingtree Tags: form fields

Form Fields: Decision Trees with Data Entry


One of the most requested features for Zingtree interactive decision trees is to have the ability to collect key customer information from users while they are navigating your tree. So, we made it happen!

With Zingtree’s data entry feature, you can do things like…

  • Add form fields to your trees (text, list boxes, check boxes, radio buttons, dates and numbers).
  • Include form data dynamically in other parts of the tree (i.e. you can ask for a name in the first node, and have that name appear in other parts of the tree).
  • Export form data into any other system, including Help Desk or CRM applications.
  • Validate email and phone numbers, as well as USPS addresses.

For example, your decision trees can gather data like this:

Example Tree

Try the Form Fields and Data Entry Demo tree from the gallery. This will ask you for some information, echo it in other parts of the tree, and finally inject it into a standard HTML form.

How to Include Data Entry Fields in your Tree

Here’s how to add a Data Entry field to a node:
  1. Edit a question node from Overview or Designer.
  2. Click Add next to Data Entry Fields.
  3. A new Data Entry field dialog appears.  Select the type of data you want to collect, and enter a variable name and a label which the end-user will see.
  4. Select Required to make this field require an entry before proceeding.
  5. For radio buttons and list boxes, you can enter the option choices as well. If you are using scoring nodes, you can enter a score variable, and a score to assign to each choice.
  6. Click Add Field when finished.


Inserting Form Field Data into Other Parts of the Tree

Once the end-user adds data to a form field and then clicks a button, this data can appear anywhere in the tree’s content, question or title areas. The trick is to use the variable name, surrounded by # characters. For example, after adding a text input field named name,  insert text like this into a node to show the value of name:

Hello #name#! Welcome back.

The #name# part will be replaced with whatever was entered previously into the name field.

Injecting Zingtree Form Data into Other Systems

Once your form fields are set up and your tree is running, the entered data can be injected into any other form.  Here’s how to do it:

  1. Make sure the variable names in your Zingtree form match the variable names on the form you want to inject data into.
  2. When opening the URL for the destination form, make sure to include &session_id=#session# in the link URL.
  3. In the destination form, include this piece of code:
    <script id="zingtree_field_id" value="session_data" src="//zingtree.com/api/zingtree.js">

When the destination form is opened, it will include the data from the Zingtree session in the fields that match.

The Form Fields and Data Entry gallery tree shows a full example. Click all the way through, and you’ll see an HTML page with Zingtree forms data present.

Misc Notes

  • The form fields button in the editor is not available in Designer. You’ll need to use Overview, Edit Node to access it.
  • Tech note: If you’re hand-coding the HTML for your forms, each form element must have a class of zt-data to be recognized and saved.

Any questions? Reach out to us at any time.

Updates: HTTPS Security, Email Attachments and Better Forms


Usually we have a common theme around our weekly updates, but this week it’s a smattering of great suggestions from our customers.

Enhanced HTTPS Security

Dave T. pointed out that his company restricts any information being sent insecurely, especially the content of their decision trees. To address this, we ensured that every page on zingtree.com is redirected to https protocol; now all of your information is encrypted end-to-end from your browser to our servers.

Email Nodes with Attachments

Eve B. is building an application whereby their field reps use Zingtree decision trees to go through a returns process. At the end of the process, they wanted to generate an email with a photograph of the damaged item. With the new Attachments capability, any email node can include a file delivered with the email, including documents, images, or anything else.

Better Forms

Tom K. made a suggestion to simplify how the Zingtree content editor creates radio button and list box forms.  Now, there’s rarely a need to modify the underlying HTML when creating these form fields – we ask for the result values up-front, and the form is generated right away. Thanks Tom!

Want to experience the thrill of being a product designer without having to program anything? Send us an idea or a suggestion to make Zingtree even better!

Using Scoring in Form Field List Boxes

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>