AK101: Building a Contact Form Tutorial AK101: Building a Contact Form Tutorial

AK101: Building a Contact Form Tutorial

Ismaen Aboubakare Ismaen Aboubakare

This article covers how to build a Contact Form app from scratch. This app will capture users’ contact info and then take that information back to AirData.

These are the Studio parts you will be working on:

Creating the Contact Form

When creating an app, you will first land on Journey Builder in the Studio. This is where the app’s Journey is created by choosing a starting Event. 

1. Since the Contact Form app will be triggered by a link, select Clicks a link.

1red.png

2. Click on the '+' sign next to the starting point to add the action that will occur when users click on that link. Among the many options, look for the Navigate to Web Flow action. 

2red.png

3. You will be prompted to select which Web Flow to Navigate to, and since the app doesn’t have any Web Flows yet, add one by clicking on Add Web Flow.

3red.png

To build the Web Flow, you can double click on the added Web Flow or go to Activity Builder, where the application is actually built.

This Contact Form Web Flow will include two Web Pages: A Contact Info Web Page and a Thank You Web Page.

Building the Contact Info Web Page

1. In Activity Builder, double click on the recently added Web Flow to rename it and click on the '+' sign next to it to add the first Web Page. Double click on it to edit the name for a more descriptive one.

4red.png

2. Click on the '+' sign next to the Web Page to add the controls one by one. There are different types of controls, each serving a specific purpose. 

5.png

This Contact Form includes input controls, that is, fields the users will later complete. The input controls on this Form are the following: Name, Phone, Email and Company. Hence, choose the Text input for the “Name” field, as users are expected to enter a text; choose the Phone input for the “Phone” field, as users are expected to enter numbers following a phone format; and so on.

5.9.png

For each input control, a Variable is automatically created and binded to the value of that input.

6red.png

3. Once the controls are added, include a Label text control above each of them to show the user what input they are filling out. 

7.png

To edit the Label, double click on it in the Stage or change the Text property in the Inspector section. You can also change the style of the Label by choosing a Variant.

8.png

4. Finally, add a Button control. It will be later used to submit the inputs to AirData.

9button.png

Edit the name by double clicking on it or from the Text in the Inspector section.

10buttonred.png

5. Now that the Form is ready, click on the Web Page to check all the auto-created Variables that will store the input values. If necessary, rename the Variables so they are easy to identify. For example, change “Text_input” to “name_input”.

11variableswebpage.png

Building the Thank You Page

Add a Thank You Web Page to the Web Flow for users to see after completing the Form.

1. Click on the '+' sign next to the Web Flow and add the second Web Page. Double click on it to edit the name for a more descriptive one. 

12thankyou.png

2. Click on the '+' sign next to the new Web Page to add the Label text control.

13.png

3. Type the message users will see on submitting the Form by editing the Label text.

14.png

Creating the App Object in AirData

To save the information in the app, an App Object has to be built in Data Builder.

1. From Data Builder, click on the '+' sign next to Datastore and select Add App Object.

15AppObjectred.png

2. Click on the '+' sign next to the recently added object and include the fields that you need. In this case, it’s going to be a Text type, for the name and company fields; a Phone type for the phone number; and an Email type for the email address. 

16.png

3. Double click on the App Object as well as on the fields to rename them. We recommend using lower case. 

17.png

4. Finally, save the App for a migration to be run and create the AirDataTable where the information will be saved later on.

16.5.png

Creating the Data Flow to Insert Data 

A Data Flow has to be created from Connection Builder to send the data back to AirData.

1. From Connection Builder, click on the '+' sign next to Data Flow and then on New to add a blank Web Flow.

. 18DataFlowred.png

2. Once added, double click on it to rename it.

19.png

3. In the Inspector section, add the inputs that will enable you to pass the values from the Form inputs to the Data Flow and back to AirData. When all data types display, select the Text input and rename it to “name”; select the Phone input and rename it to “phone” and do the same with the other two fields. 

20red.png

4. Add an AirData Request data operation by clicking on '+' the icon in the Stage.

22red.png

5. Inside the AirData Request, choose from the dropdown the App Object that will save the information and select INSERT as the type of operation to perform since it allows adding an item into AirData. 

23red.png

6. Since AirData expects a full JSON object to pass in, create the “Contact” object inline. You can check out the schema from the sample data of the App Object, by going to the Start step and adding the Contact Object as a Variable.

24red.png

Then, copy the schema from the Variable tab:

25red.png

7. Go back to the AirData Request step and paste the schema to adjust the sample text to the inputs. Hence, replace “Sample Text” with the “name” input; the phone number with the “phone” input; and so on.

26red.png

8. To test the Data Flow and make sure it is sending the information back to AirData, go to the Run Results section and click on Run. A “Successfully run step” message should pop up.

 

27red.png

Save the application and go to Data Builder to check if the data was inserted.

Connecting the Data Flow to the UI

Now that the Data Flow is working and the data is being saved in Data Builder, go back to Activity Builder to connect the operation to the UI. In Activity Builder, you can choose the actions to be run when the users click on “Submit” once they finish completing their Form.

1. Click on the “Submit” button and go to the Actions tab in the Inspector.

 

28.png

2. Click on the '+' sign for the Actions menu to display and select Run Data Flow from the Data Options.

29.png

3. Pick the previously created Data Flow and complete the displayed inputs with the input variables of the Web Page. They will be suggested as you type:

31.png

4. Repeat the process to add an action to the button and this time select the Navigate to Web Page action. Choose the Thank You Web Page so that users are directed there when clicking on the button.

32red.png

Save the app and it will be ready to be tested.

Previewing the App

Once the app is all set, it can be tested in the App Preview.

1. Click on Preview at the right-hand corner of the Studio, which will open a new tab.

33red.png

2. Click on the globe icon, which allows the app to be launched from the start.

34red.png

3. Complete the fields and click on “Submit”.

35red.png

As expected, it will take the user to the Thank You Web Page.

36.png

4. Finally, go back to Data Builder and check if the entered information has been saved into AirData:

37fake.png

Now the application is ready to be published. 

Additional AK101 Resources

Further Reading

1. To change the style of your Web Flow, read Styling with Themes

2. To  connect your application to Salesforce, read about The Salesforce Data Operation

3. To learn more about AirScript, read What is Airscript?

Was this article helpful?

1 out of 1 found this helpful