The basics of creating a form

The simplest example of a form is a single-page form. This form consists of one Web Page to collect data. Single-page forms are best for small amounts of data collection. It is recommended to break large collection processes into steps. For information on how to create multi-page forms, check out our documentation on Web Flows. This section covers forms that have only a few input boxes, or for some reason (legal or otherwise) must be on the same page.

This example creates a simple form for submitting an issue with a book delivery from the fictitious AirBooks Library. It will prompt the user for their name, and the issue they are having and allow a place for them to enter additional notes. Here is the basic app before any fields have been added.

To start, add a Container to the page, then put a Label and Text Input inside the container. Change the text of the Label to "What is your name?". Text Inputs are used to collect smaller lines of text, like a name. When creating the Text Input, a Text Variable is created on the same Web Page as the input. Change the name by double-clicking the field, string_input, and change it to name. Note that changing the reference on the Web Page will update the associated value on the Text Input automatically.

Create another Container, insert a Label reading "How can we help you today?" and a Text Area Input. Text Area Inputs are used for larger blocks of text. In this case a description of what the customer is requesting. Click on the Web Page to change the bound value from text_area to description.

Lastly, add a Button to the Web Page. Change the text on the button to "Submit". Buttons are used to perform actions. In the case here, the button will submit the data that we have collected from the User.

The app should look something like this:

How to submit form data

Once the customer information has been collected, it can be used in many different ways. For the purposes of this example, it will be used to create a Zendesk ticket. Before creating a Data Flow to create the ticket, the Zendesk Integration must be added to the App. Go to Settings and add a Zendesk Integration.

To send the data to Zendesk, go to Connections Builder and create a new Data Flow, name it ZD - Create Ticket From Customer Issue. Add two Text Inputs to the connection in the Inspector, one called name and the other description. Inputs are a way of passing external information to the Data Flows. Data Flows exist in their own scope and do not have access to any of the other variable scopes. The only way to get information into a Data Flow is to pass it in. Enter some test values for your input parameters in the stage of the Data Flow.

Select "Zendesk" from the dropdown on the Data Operation type. Select "Create Ticket" from the Operation dropdown. In the Ticket Fieldsset the Subject value to:

"Support Request from {{name}}"

This is a line of Airscript, setting the Subject to a custom string using the input variable name to indicate who is making the request. Find out more in Working with Text in Airscript. Put the description value in the Description field. Running this connection step will produce a Zendesk Ticket.

Looking at the payload from the response:

{  
  "success": true,  
  "result": {  
    "ticket": {  
      ...  
      "subject": "Support Request from Molly Fey",  
      "raw_subject": "Support Request from Molly Fey",  
      "description": "I ordered a copy of the new Edward Tufte book and haven't recieved any shipping information yet. Might you be able to tell me when it will ship?",  
      ...  
    },  
    ...  
  },  
  "error": null  
}

The ticket has been created with the information passed in.

The last step is to connect the Data Flow to the Submit button on the form in App Builder. Select the Submit button, add a clicked Action. Under the "App" section, select the Run Data Flow action. Select the ZD - Create Ticket From Customer Issuedata flow from the list. Pass in the name and description, respectively.

Running the App in Preview will submit a ticket every time the submit button is pressed. This is one example of how to use the data, but using an HTTP Operation it is possible to send this data to any external API.