Tutorial
First Simple Flovv
This section of the tutorial will guide you step by step on building your own very first flovv. A paper print out of this document might ease your effort.
About the Example
In this example; you are a coordinator of a volunteer organisation. You are to collect the following information recruit a group of volunteers.
-
Identity:
Name, Passport No, Age, Nationality -
Contact Info:
Mobile, Email, Home Address, Home Phone -
Last Assignment:
Duration, Place, Type of Work, Typical Work Week Description -
Preferences:
Preferred Area of Work, Preferred Country, Maximum Duration, Preferred Start Date
You plan to setup an online form and send the link to them to fill up. The information they fill in is to be used to do the preliminary filtering of the applications.
Creating the First Page
Even though we could have all the information being gathered on a single page, (see Tips on Making the First Flovv) we will have the Four Form Pages linked serially.
These four pages, we will name them as;
- About You
- Last Assignment
- Preferences
- Contact Info
We’ll start with a “Welcome Page” and end with a “Thank You” note. But in this tutorial, we’ll add them at the end.
If you have not registered yet, please click Manage My Flovvs or Create New Flow, it will take you 1 minute to get registered.
Click, Build New Flovv on the Home Page of Flovv.com, you will get a pop up window with the Flovv Application. (Make sure your browser is Pop-up enabled)
Figure 1: Flovv Page View
You can see the Items Pane on the left and the Page Pane on the right.
Click on the Page Heading, Page 1 to change it to About You. You can change the Name, as well. But it’s not needed at this point. If you need read more about the Name, property.
Figure 2: Changing the Name of the Page
Click on Items Pane, and Click Single Line Text. The item will get added and you will see the properties of that item on the Property Pane.
Figure 3: Single Line Item Added to the Page Pane
Now, change the Title of the Single Line Text Item to, Name. The moment you press the TAB key and move to another field, you will see that the “Name” also changes to name and the Page Pane on the Left, shows the change as well.
Click the Items Pane again and click Single Line Text item, this time change the name to Passport No. Since the passport number is no more than 12 characters in length, set the maximum length to 12.
Figure 4: Setting the Maximum Length
Click the Items Pane to add an Integer Field, for the Age and another Single Line Text for the Nationality.
After you have added all the four fields, the page should look like below.
Figure 5: The Page Pane with all the four fields added
Click on any of these fields to get the Property Pane to display its properties. You can change any of these at any time you want.
Saving the Flovv
You can save the flovv at any point of the process. Click on the Flovv Pane to change the name of the Flovv.
You can click the Save link, on the Page Pane or in the Flovv Pane. Saving the flovv periodically will make sure that you will not lose your work.
Figure 6: Saving the Flovv
After you give a name, click the Save link to save the flovv.
If you decide to continue this tutorial later, you can do so by clicking the Manage My Flovv, button on the home page, and clicking on Edit, against the name of the flovv.
Building the Second Page
Click the Add Page link, to create a second page for your Flovv. Name this Page as the Previous Assignment, and add the following Items from the Item Pane to setup the second page.
Integer Item for the Duration
Single Line Text Item for the Place
Single Line Tex Item for the Type of Work
Text Area for the Typical Work Week Description
At the End of these steps your page should look like below.
Figure 7: Items for the Second Page Added. Name for the "Typical Work Description", shortened to make it simpler.
Using the Flovv Pane to link Pages
Click the Flovv Pane, you will see the two pages you built.
Figure 8: Default Flovv Pane view, with the two pages, Page1-AboutYou, Page2: Previous Work
Drag and re-organize the two pages so that the Previous Assignment page box is to the right of the About You page box. See Maintaining the Flovv Pane, for further suggestions on organizing more complex page connections.
Linking the Pages
Click, Add Link on the About You Page box and select the Assignment page from the list of the pages and click done.
Figure 9: Linking About You Page box to Previous Assignment Page Box.
By creating the link, you are able to let your visitors move to the Previous Assignment page, by clicking the Forward button on the About You page.
Rest of the Pages, we’ll work from the Flovv Pane. We’ll add the pages first and then add the content to them.
Click, Add Page, and add the rest of the two pages.
It is usual that in a Flovv that visitor is greeted with a Welcome page, describing the flovv. Click the Add Page again and add a Welcome Page. As the ending page, a Thank You is added.
Click the Add Link, of each of the pages. The Flovv Pane would look like below after these steps.
Figure 10: Flovv View with the Six Pages Added
Click Save. If you want you can Preview the Flovv through Manage Flovv page.
Build the Flovv and then Add the Content
Later on when you build further advanced flovvs you will realize the planning out the pages on the Flovv Pane and then adding items to the pages is easier.
Click the View of the Preference page box, to go to the Page pane view.
Build the Preferences Page, in the following manner.
Completing the Rest of the Flovv
Using a Drop Down List
Add a Drop Down List item, for the Preferred Area of work.
There are four types of Areas of Work that your volunteer organization is involved in. They are;
- Mothers and Infants
- Rural Education
- Small Enterprise
- IT Enabler Services
Add these items to the list of drop down items of the Drop Down List.
Figure 11: Adding the items to the Drop Down Box
Similarly, Add a Drop Down List item for the Preferred Country as well. Add the following countries to the list. They are the countries that your organization is currently established in.
India, Indonesia, Sri Lanka, Vietnam.
Maximum duration will be in Months. Add an Integer Item for that. Later in this Tutorial, you will learn how to set limits to the number field, by Setting Field Validations.
For the Preferred Start Date, you can add a Date Field. This will let the user type in a valid date automatically.
Now, switch to the Contact Details page, by clicking the switch page link. Add the following content.
Add Single Line Text items for the Mobile and Home Phone, Email Field for the Email and a Text Area Field for the Home Address.
Changing the Field Order
You can change the order of the fields by clicking the up and down arrows next to each field.
Re-order the fields, so that the page looks like the image below.
Figure 12: Re-ordered Contact Us Page
Adding a Summary to the Thank You Page
We recommend you that a Summary of the content filled is shown to the user at the end of the Flovv. . This will give your visitors an opportunity to view the information that they filled in before submitting the information.
Switch to the Thank you page.
Add a Text Description Item and give a description to the flovv that your visitor just completed. Add the following Text.
Thank you for completing the Flovv. We will take a look at the information you have
submitted and contact you shortly.
Please check the information below and click and go back if there are changes to be made.
Thank you,
VI Volunteers.
Add a Form Summary, Item below this text.
The Page will look like this.
Save the Flovv.
Complete your Flovv
Similarly add a description to the Welcome Page as well.
Welcome to Volunteer International, recruitment.
Please fill in the details for the pre-filtering of the application. Please fill in your details in the following Pages.
Save your flovv
Go to the Manage Flovvs, to view and edit the flow. You can let your friends know about the flovv, by sending them the Public URL.