Tag Archives: input forms

Making Dynamic Data Collection Forms

YouAsked

One of our larger customers requested the ability to make a list box that can change depending upon a selection made previously while using a decision tree. If you are doing data collection, this can really simplify things for your end-users.

Demo

For a demo, we’ve built a tree that asks you to select a state in the USA, and from there shows a list of cities in that state.  You can try the demo here.

Setup Overview

This tree uses Zingtree Webhooks. Here’s how we built it:

  1. We created a PHP script for our state-to-city list box generator. This script receives a state code, and returns JSON with a variable called pick_a_city that contains an HTML list box to pick a city in that state. This will be the Webhook URL. It looks like this:
    https://zingtree.com/demo/get-cities-from-state.php?state=#state#

    Substitute #state# with the 2 letter abbreviation for your state to see the results, or just use this example for Alaska.

  2. We created a new Webhook called “City/State Lookup” (under Account > My Apps) with the URL in step 1.

  3. The first node contains a list box with all of the states. The selection is stored to a variable named state. The only button in this node goes to node #2. The end-user view for node #1 looks like this:

  4. Node #2 calls the Webhook we created with the state variable from node #1. The Webhook returns HTML for a list box that replaces a placeholder in node #2 called #pick_a_city#. Here’s the content area for node #2:

    Under Advanced Options, we tell node #2 to send a message to our City/State Lookup Webhook before it loads, like this:

Source Code

  • You can see the entire tree here.
  • The PHP source code for the Webhook URL script is here.
  • The URL for the Webhook is:
    https://zingtree.com/demo/get-cities-from-state.php?state=#state#

Need More Info?

Questions or suggestions? Just holler!