How to Create Custom Forms

  • Updated
  • For most forms, we recommend using Data Entry Fields, as this is the easiest way to create a form and track all of your variables. However, if you need a more customized data input form, you can hand-code HTML form fields into the content area of your page.

    Example:

    Using the Code View tool ( </>) when editing a node, insert this HTML to add a data entry field for a variable first_name  in the content area of a node:

    <input name="first_name" type="text" class="zt-data">

    The important part is to include class=zt-data in the HTML coding.


    Here's how it looks in the node editor using  the code view tool:2022-04-28_10-19-36.png


    Please Note:

    • Data Entry Variables included in this way won't appear in the Variables tool.
    • These variables also won't be available in Logic Nodes or Document Nodes until you run a test session first and enter values for the variables.

  • For most forms, we recommend using Data Entry Fields, as this is the easiest way to create a form and track all of your variables. However, if you need a more customized data input form, you can hand-code HTML form fields into the content area of your page.

    Example:

    Using the Code View tool ( </>) when editing a node, insert this HTML to add a data entry field for a variable first_name  in the content area of a node:

    <input name="first_name" type="text" class="zt-data">

    The important part is to include class=zt-data in the HTML coding.


    Here's how it looks in the node editor using  the code view tool:


    Demo:

    Open the Custom Forms Demo tree in the Demo Gallery to see a more complex example.


    Please Note:

    • Data Entry Variables included in this way won't appear in the Variables tool.
    • These variables also won't be available in Logic Nodes or Document Nodes until you run a test session first and enter values for the variables.

  • Throughout 2022 Zingtree will be upgrading customers to our new faster and more modern user experience! Here's how to tell which experience your Zingtree Authors are currently using.

    Log in to your Zingtree Author account and navigate to My Trees. How does your current My Trees page look?

    Zingtree Classic

    2022-02-25_12-24-51.png

    New User Experience

    mceclip0.png

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request