---
title: "Form steps"
slug: "form-steps"
tags: ["App Editor (Route)", "Form", "Form Step", "Apps - Steps"]
updated: 2025-05-28T18:57:41Z
published: 2025-05-28T18:57:41Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Form steps

*Learn how to use Form Step within the context of your entire App*

          Warning

          

As of r234, Form steps have been disabled for all new Tulip Instances.

**In this article, you will learn…**

- **How to lay out a Form Step**
- **The different ways that you can capture data in a form step**
- **How to add logic based on specific responses in the form**

          NOTE

          

This topic is featured in the "[Basic App Design and Logic](https://university.tulip.co/path/tulip-essentials/basic-app-design-and-logic)" course in Tulip University.

In Tulip, there are two types of Steps that you can add to an App:

1. **Step** - an individual step in a set of paper instructions. Normal Steps also allow extensable formatting.  

2.** Form Step** - allows an operator to input a series of details about the work they are doing.

Form Step are commonly used to replace fields in a work order, checkboxes in a defect report or any other case where operators need to add data. Any time an operator uses a spreadsheet or filling out a form, there is an opportunity for a Form Step.

They replace forms like this:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90543071.png)

To look like this:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_91596583.png)

Here’s how to use a Form Step within one of your Apps. If you are interested in seeing Form Steps in the context of a normal manufacturing process, check out these step by step guides:

- [Guide To Building a Quality Reporting App](/r230/docs/how-to-build-an-automated-rejects-report-app)
- [Guide To Automating Your Work Orders](/r230/docs/how-to-automate-your-work-orders-in-a-frontline-operations-app)

## Form fields

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_397922152.png)

Here are the different options within the form:

### Boolean

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_138826767.png)

**Default Value:** Choose whether the value should be default "Yes" or "No"

### Dropdown

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_138826995.png)

**Default:** Choose an option that should be selected by default.

**Show As Buttons:** List options on the screen rather than forcing the operator to open the dropdown

**Dropdown Options:** Add a new option to the dropdown list, or add a group within the list.

You can add a new option via the "Enter" key. You can also paste a list of options, as long as they are separated into individual lines in a text editor (ie Word or a notes app).

### Multiselect

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_138827162.png)

**Multiselect Options:** Add a new option to the list, or add a group within the list.

**Default(s):** Choose an option that should be selected by default

**Columns:** If the list of options is long, allow it to be broken into multiple columns

The Multiselect Form Widget stores all choices as text values in a variable.

### Text

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_138827288.png)

**Multiline Input:** Turn a single line into a multiline input to encourage longer responses

**Default Value:** Add a default value for the widget

### Number

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_138827457.png)

**Default Value:** Add a default number for the widget

**Required Range:** Do not allow the form to be submitted unless it falls within a certain range

**Hide +/- Controls:** Hide the + and - buttons from the widget

### Image

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Technical%20Details%20of%20Form%20Steps_146888575.png)

**Photo Input Options:** Choose whether operators can add a photo via camera, Image upload from the local computer, or both.

## Modify form fields

You can modify the following options in every type of form Widget:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_138826342.png)

**Input Label:** The label within the form

**Font Size:** Size of label font

**Font Color:** Color of label font

**Font Style:** Style of label font

**Variable:** Variable that stores the value that is entered by an operator

**Required:** Whether the operator must enter any value before the form can be submitted

For more detail on each form widget, [check out this guide to form widgets](https://support.tulip.co/docs/technical-details-of-form-steps)

## Change the form layout

Click the anywhere on the **Step** itself to see a list of options for changing the layout in the Context Pane on the right of the screen.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_138826082.png)

You can change the functionality of the Cancel and Submit buttons using the dropdowns menus in the context pane. You will see how to build more complex logic with these options in the next section. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90541481.png)

Add multiple columns and then drag each field to the new column in order to fit a greater number of fields on the form.

All Form Steps include three buttons at the bottom:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_91596796.png)

- **Cancel**, which has multiple options for Triggers
- **Menu**
- **Submit**, which has multiple options for Triggers

## Use Variables within forms

Let’s say that you want to build some dynamic logic based on the specific response in a form.

For example, if a person is doing a quality inspection, and they select an option that says “Rework” as opposed to “Scrap”, you want to direct them to place the part in the appropriate bin for rework.

This is where you will need a variable to track the value of a field in the Form Step.

Select the **field**, then go to the **Variable** section in the **Side Pane**.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90541949.png)

Click **+** to create a new variable that will track the value of the field.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542035.png)

Then, you can change the name of the variable via the **Name** field.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542068.png)

## Complete a form

There are a couple things that can happen when a user is ready to complete a form. The operator must press the "Submit" button in the bottom right corner or the **Cancel** button in the bottom left corner.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_91597829.png)

In order to choose what happens after an operator presses one of those buttons, you can select from the options in the middle of the Context Pane when you click on the background of the Form Step.

Here are some options for the **Submit** button:

**Go To Next Step-** By default, the user will advance to the next step.

**Go To Step…-** Choose a specific step in the app.

**Complete App-** The user has completed the app.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_91636377.png)

**Custom Action-** This is where you can add a custom Trigger based on a variable that was updated in the form (or any other variable)

[See here for a more complete guide to custom actions.](/r230/docs/widget-triggers)

There are only 2 ways to clear the values in the Form Step:

1. Complete the app
2. Cancel the app

You can use the Signature Form Step to require operators to add a signature after they fill out a form. This will prevent them from advancing to the next step until they add a signature.

The Signature Form allows an operator to sign off on completed work or a defect report. The signature will be automatically concealed via star characters (*) in the Tulip Player.

## Signature Form

          
          

As of r234, Form steps have been disabled for all new Tulip Instances. Use the [electronic signature widget](/r230/docs/how-to-use-the-electronic-signature-widget) instead.

To add a form with a signature, click **Add** button in the top left of the App Editor and choose **Signature Form**.

![Creating A Signature Form Step_113455523.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Creating%20A%20Signature%20Form%20Step_113455523.png)

Then, you will have two options for permitted signatures with the **Form Submitters** option in the Side Pane.

![Creating A Signature Form Step_113456442.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Creating%20A%20Signature%20Form%20Step_113456442.png)

**Any User:** Any operator can add a signature.

**Any operator besides app executor:** Any operator can sign off EXCEPT the one that is currently logged in.

**Specify a list of allowed users:** Choose from a list of all users and operators in your Tulip account. Multiple users allowed.

**Current User:** Only the currently logged-in operator can add their signature.

If you choose this option, the e-signature will be automatically filled in when the operator reaches the Signature Form Step. The operator will not be able to change this signature.

Note: Autofilling credentials when the widget is set to "Current User" is only available when:

1. Your organization is not using Validation Mode
2. Your organization requires operators to authenticate with LDAP or SAML credentials.

There are three ways that an operator can sign:

1. Badge ID
2. LDAP Username/Password: If your organization uses LDAP to authenticate users in Tulip, then an operator must input their username and password from your LDAP directory.
3. SAML Username/Password: If your organization uses SAML to authenticate users in Tulip, then an operator must input their username and password from your SAML directory in a popup window.

You can add multiple Signature Forms within any app.

### Signature History

In order to see the signature(s) added to each app completion, go to the **Completions** tab. There will be a column for each signature field, with details about the operator and the time they filled out the Signature Form. This timestamp will be different than the timestamp for the app completion.

![Creating A Signature Form Step_113466138.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Creating%20A%20Signature%20Form%20Step_113466138.png)

## Use form fields in Analytics

You can analyze the data from forms regardless with or without variables.

Navigate to an Analysis, then choose the **X Axis** category on the left sidebar.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542281.png)

Click the existing data point.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542334.png)

Then choose the **App forms** category.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542525.png)

You will be able to choose any form field from the entire app.

If you choose to track the result of a form field in a Variable, you can also use the variable in the “App variables” category.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542432.png)

A Table Analysis can show you multiple Form fields at once. To select multiple Form fields, click the **Operations** tab in the left menu.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542614.png)

Click the **Add a new operation** button, and then choose a specific Form field to add.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542703.png)

Here’s what the Table will look like.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Build%20Your%20First%20Form%20Step_90542745.png)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Form Step**

**Form Steps**are a special type of **S****tep** that is designed specifically for data entry. They lack some of the flexibility of normal steps but can streamline app creation.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

*Form Steps have been disabled for every new **instance** in r235/LTS9.*

**Tulip University**

**Tulip University**is a free resource to guide Tulip users through learning the Tulip. 30+ courses cover everything from the basics to **Connector Functions**and **Edge Devices.**

Enroll in your first course at [university.tulip.co](//university.tulip.co).

**Steps**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

**Step**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

**Boolean**

**Boolean's**are a Tulip Datatype. Booleans can have True/False (Yes/No) values.

**Number**

**Number**is a Tulip Datatype. Numbers can be any positive or negative number. Numbers support decimals.

*ex. -5, 15, 47, 155, 15.2, -12.73*

**Image**

**Images**are a Tulip Datatype. Images are a reference to a web-hosted location for all Tulip Images.

**Widget**

**Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic.

*Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.*

**Trigger**

**Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**.

**Triggers** can contain **actions**, **transitions**, and **conditions**.

**Variables**

**Variables**are a location to store app information. Variables have a specific type that must match the contents they can store.

Variables are only accessible within a single application and are cleared when the app is restarted or completed.

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)

**Analytics**

**Analytics** are live updating graphs and metrics calculated based on app data, Table data, and machine data. Analytics can be embedded and dynamically filtered within an application.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/image-1662410510869.png)

**Variable**

**Variables**are a location to store app information. Variables have a specific type that must match the contents they can store.

Variables are only accessible within a single application and are cleared when the app is restarted or completed.

**Tulip Tables**

**Tulip Tables** are a global location to store your production data. **Tables** are made up of **Records** (rows). A single can be accessed from multiple apps or stations at the same time. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Tulip%20Tables%20Overview%20-%20Feature%20Overview(1).gif)