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:
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
- Edit a question node from Overview or Designer.
- Click Add next to Data Entry Fields.
- 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.
- Select Required to make this field require an entry before proceeding.
- 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.
- 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:
- Make sure the variable names in your Zingtree form match the variable names on the form you want to inject data into.
- When opening the URL for the destination form, make sure to include &session_id=#session# in the link URL.
- In the destination form, include this piece of code:
<script id="zingtree_field_id" value="session_data" src="//zingtree.com/api/zingtree.js"> </script>
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.
- 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.