Form Basics
Last updated
Last updated
A simple form is a tool for collecting basic information from the user. It will contain a prompt for information and fields for the user to complete. Some good examples of simple forms are user sign-up or ticket information collection. This video starts with an introduction to a simple form that collects some user information and finishes by storing the data into AirData.
[block:embed] { "html": "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FAoRcjWC5Q4Q%3Fstart%3D127%26feature%3Doembed%26start%3D127&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DAoRcjWC5Q4Q&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FAoRcjWC5Q4Q%2Fhqdefault.jpg&key=f2aa6fc3595946d0afc3d76cbbd25dc3&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=AoRcjWC5Q4Q&t=127s", "title": "Airkit 101 - Build Your First App in 10 Minutes", "favicon": "https://www.youtube.com/s/desktop/15c06292/img/favicon.ico", "image": "https://i.ytimg.com/vi/AoRcjWC5Q4Q/hqdefault.jpg" } [/block]
The simplest example of a form is a single-page form. This form consists of one Web Page to collect data. Single pages 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 must be on the same page (legal or otherwise).
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:
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 Configuration Builder and add a Zendesk Integration.
To send the data to Zendesk, go to Connection 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 drop-down on the Data Operation type. Select "Create Ticket" from the Operation drop-down. In the Ticket Fieldsset the Subject value to:
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:
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.
