now enables universal access to e-forms and workflows on tablets and smart phones in addition to desktop support on all standard browsers. Version 5 supports iOS 6 devices, iPad and iPhone, running mobile safari. This tutorial will incorporate several new features into an Employee On Boarding workflow. For example;

  • Touch screen wet signature - the new employee can sign to verify the information using their finger or a pointer.
  • Take advantage of device specific capabilities - you will see the correct date picker and keyboards pop-up on your mobile device
  • Screen Flows - ability to further divide a screen flow into sections that better lend themselves to an iPad or iPhone using the PageBreak control
  • Ability to upload an existing image or a picture taken with the device camera to the e-form
  • Use the iPad's location services to fill in the address
  • Spaces that render in a device specific manner - support swipe gestures and customized icons
  • Enhanced Task List for mobile devices
  • Quick Approval feature - allows quick review of a task by the appropriate person with accept/reject buttons
  • Generate an additional Pixel Perfect PDF for the federal W - 4 form. It is important to note here that there is no limit on the number of PDFs that can be generated. For example, you can collect the information in your form once and then use it to fill in an unlimited amount of pdfs for the new employee i.e. -the federal W - 4 and the I - 9.

  You can download this tutorial as a PDF.


Please view the New Employee On Boarding video for an introduction to some of the exciting features we will be using in this tutorial.

We estimate about 2.5 to 3.0 hours for an experienced designer to complete this tutorial. It may take up to 4.0 hours if you are a new user. 

On This Page:


What are we going to build?

 workflow is a series of routed forms that can now run on all devices including the iPhone and the iPad. In this tutorial, we will create a workflow that can be used when on boarding a new employee joining your company. There will be three participants: the new employee, the new employee's manager and an employee that works for the company HR department. The new employee will complete four forms: Employee Information, W-4 Allowances, Education History and will have an opportunity to confirm the entered data with their signature on a Confirmation form by reviewing a W  - 4 generated pdf. These four forms are referred to as a screen flow. A screen flow consists of steps in a workflow that are performed by the same person. The new employee will complete the screen flow from an iPad and the task will be sent to the new employee's manager for approval. The approval step will be performed on an iPhone using the Quick Approval feature. Once the task is approved, it will go to the HR department for finalization and storage. This tutorial will cover the following:

What are we going to need

  1. Live Forms account on the frevvo SaaS server or a working in-house installation. 
  2. An iPad, iPhone and desktop computer. If you do not have mobile devices, you can perform the Employee On Boarding workflow from your desktop computer.
  3. You will need to download an Acroform for the W-4 form. You can find the latest version of the Acroform here. Right click and save the form to your desktop. Open the form. Notice the name field on the acroform is a combination of the new employee's first name and middle initial and there is no writable field in the PDF for the Employee's Signature or the date field next to the signature.
  4. A PDF viewer such as Adobe Reader - version 11 or higher or Mac Preview and a PDF editor such as PDFescape

Setup users and roles

This is a one-time setup that will have to be performed by an administrator.

We will need three roles: employee, manager and hr. To create these roles in :

If you are using  Online, go directly to Step 5.  in-house users will have to create a tenant first before adding roles/users. Follow Steps 1-4 to do that:

  1. Login as the  in-house superuser admin.
  2. Click the  icon to create a new tenant
  3. Fill in the Add Tenant screen. 
  4. Click the Submit button. Logoff as the superuser.
  5. Login to  as the administrative user for your tenant.
  6. If you do not already see the Manage Tenant page, click the Manage link at the top right of the page.
  7. On the page that is displayed, click the "Manage Roles" link.
  8. Click the  icon and in the form that is displayed, type in the desired role. Note that role names are case sensitive.
  9. Repeat for the second and third roles.

The admin user will also need to setup three users, assigning one of the three roles to each one:

  1. Login to  as the administrative user for your tenant.
  2. If you do not already see the Manage Tenant page, click the Manage link at the top right of the page.
  3. On the page that is displayed, click the "Manage Users" link.
  4. Click on the  Add User icon.
  5. Complete the new user form for Jerry Mouse, the manager, Tom Cat, the employee (Select Jerry from the Reports dropdown for user Tom) and Sue Smart - HR personnel
  6. Assign the roles shown in the image above to the users. 
  7. Submit the form.
  8. Make one more user named designer and assign this user the frevvo.Designer role. Use the designer user to create the Employee On Boarding flow. 

Create the Screen Flow

It is very important to keep in mind the screen sizes of the devices you are targeting when designing forms for mobile devices The screen flow for this tutorial consists of four forms: Employee Information, W-4 Allowances, Education History and Confirmation. It is intended that the new employee will complete the screen flow on an iPad. Let's begin with a close look at how the PageBreak control can be used to divide the Employee information form into sections that will make it very easy to fill in the information on the iPad. 

Typically, information about a new employee would include: name, address, SSN, Telephone Numbers, email address and possibly a profile photo. Creating this form for a desktop view would be very simple in the  designer. A form designed for the desktop could look like the image below:  Mobile forms work best when they are broken up into small, logical pieces. The PageBreak control lets the designer create a mobile layout consisting of multiple pages where each page contains a small number of controls (logical groupings). The user navigates between the pages via Back/Next buttons, or on a device that supports it, by swiping left/right. We will use sections plus the PageBreak control to illustrate these concepts.

Employee Information Form designed for a Desktop browser

Refer to Designing Forms for in-depth information on the  features and controls described in the steps below:  

Create the Employee Information Form

Logon to  as a designer. We will create the screenflow in the Forms designer and then drag them into the Flow designer to make the Employee On Boarding flow. Click the  to create a new Application. Click on the  to edit that application. Invoke the new form wizard by clicking on the  New icon at the top of the Forms Home Page. Click the Next button to navigate through the wizard. Name the form Employee Information. 

 Your form should look like similar to the image at this point:

You can specify the allowed file types to be uploaded by checking selections in the Restricted Content Types section on the Properties pane. For Example, check jpg if you only want to allow the upload of files with that extension.


The Employee Information form should look like this at this point:

Employee Information form in the designer

if (form.load)
  FirstName.value = _data.getParameter("");
  LastName.value = _data.getParameter("");
  manager.value = _data.getParameter("");
FirstPlusInitial.value = FirstName.value + ' ' + Initial.value;
FullAddress.value = City.value + ' ' + State.value + ' ' + ZipCode.value;
if (form.positionUpdated) {
  var x = _data.getParameter ("position.street_number");
  Street.value = _data.getParameter ("position.street_number") + ' ' + _data.getParameter ("position.route");
  City.value = _data.getParameter ("position.locality");
  State.value = _data.getParameter ("position.administrative_area_level_1");
  ZipCode.value = _data.getParameter ("position.postal_code");

The show/hide pagebreaks icon acts as a toggle to display the PageBreak controls in your form. Once you add PageBreaks, then save the form, the PageBreak controls will not be visible in the designer unless you click this icon. Clicking the icon a second time will hide the PageBreak controls again.


Clicking the Test icon on the Forms Home page provides the ability to display the form on the desktop, iPhone or iPad. Click the appropriate icon to see how the PageBreak controls added to the form affect the display on these devices.


Create the Allowances Form

In this form, we will collect information for the Personal Allowances section of the W - 4 Employee's Withholding Allowance Certificate. The section is shown below. The e-form will have controls for the A, C, D allowances and a control to store the total number of allowances designated by the new employee.

Allowances Form in the designer

Total_Allowances.value = A_Allowance.value +
                        C_Allowance.value +

Here is a rule to populate the Today's Date control when the form loads. Use the Rule Validator to troubleshoot any issues.

if (form.load ){    
TodaysDate.value = frevvo.currentDate(form); 

Create the Education Form

Create an Education form similar to the image below. Use the table control to collect information about the new employee's Education. Name the table control Education History. Refer to this documentation for more information on how to add, move and remove columns in a table.

Education History form in the designer

Perform the following steps to create the grid :

  This is how the Degree Attained column in the table will look on the iPad.

Create the Confirmation Form

The purpose of the Confirmation form in the Employee On Boarding flow is to give the new employee the opportunity to review the information in the generated W-4 PDF and then sign to indicate the information has been reviewed and verified.  Drag and Drop one Signature control from the palette to the form. Change the label of the Signature control to "Employee's Signature - by signing you agree to the content of the W-4 PDF Form". We will add the Form Viewer control to this form when we create the Employee On Boarding flow. This will display the section of the W - 4 Pixel Perfect PDF that we will map with the  data later in this tutorial.  


Create the Approval Form

This form will be used by the new employee's manager to approve or reject the screen flow. In this scenario, the manager, Jerry, will use his iPhone to perform this task when it appears in his Task List. You can use the  Quick View feature to make that process easy . Quick View requires an Approval control. An approval control is a section control in your form with a text area control inside of it. You can set up a signed section if you want the manager to sign after approving or rejecting the task . Drag and drop a section control into the Approval form. Name it Manager Review. Add a text area control for manager comments. Click on the Security tab for the section. Assign the role of manager from the role list. Choose Text/Signature Image or Wet Signature type from the dropdown for the signature type. Refer to Electronic Signatures for more information. Quick view is setup in the flow designer but it will not work if the form does not have an approval control in it. 

Be sure to click the  save and exit icon to save the form.

Create the Office Use Only Form

The last step in the Employee On Boarding flow is performed by Sue, who works in the HR department of the company. Sue receives the task from the manager, Jerry and proceeds to complete the final form, sign it  and submit the data to the company database. Create a form similar to the image below. 


Create the Employee On Boarding Flow

Open the Flow Designer by clicking on the Flows menu item. Click on the   icon to create the new Employee On Boarding flow. Drag and drop your Employee Information, Allowances, Education History, Confirmation, Approval and Office Use Only forms from the palette to the flow editor.  Review this documentation for information about the Flow step properties you can set up. In the image below, the new employee will see the Navigation toolbar to chart progress when filling out the screen flow. Click the  icon in the toolbar. With the who can use the flow permission visible in the dropdown, select Public in Tenant in the Visibility dropdown. New employees will have to log onto the tenant to access the flow. Check to see that the deployment is set  to Production. Click on the Confirmation Form and customize the Button Label for this step of the flow to say "Send to Manager".

Forms can be created or edited directly from the flow, if necessary. Click the form to be edited, (the New Form if you are just creating it) then click the icon to open the form designer. This copy of the form is not the same as the one we created in the Form Designer. Changes to the form in the flow will not affect the original form that was dragged from the palette. 

Click on the Employee, Personal Allowances, Education and Confirmation steps and assign the Employee role to all of them.  Click on the Approval form and assign the role of manager. Click on the Office Use only form and select the HR role from the choices shown in the Role section of the Form Property panel. You can customize the Button Label to something like  "Send to ECM" if you want. Continue the tutorial to setup Quick View for the Approval form, Geo Location for the Employee Information form, Task Email notification and the W - 4 pdf for the flow.

If you want to capture the current location of the new employee when they are filling out the Employee Information form, turn on ' location feature. Click on the Employee Information form to highlight it in the flow designer. On the Property panel that displays on the left, there is a section for the Geo - Location feature. We added a rule to the Employee information form to take advantage of the iPad location services earlier in this tutorial. Once you have the rules in place, you can choose to have the rules execute when the form loads (the On Load) option of the Geo-Location dropdown or specify a custom time period of how often the rules should execute (the custom option of the Geo Location dropdown). Check Detailed Loc to capture additional information, like an address, based on the location.



Setup Quick View 

In our scenario, when the screenflow is completed by the new employee, the manager will receive a notification and access their Task List using a smart phone. The Quick View feature lets the manager review a summary of the information and quickly approve/reject the task.  

The Approval form consists of one section named Manager Review. This section has one control in it – a text area for comments and the Text/Signature image choice selected on the Security Tab. This section meets the criteria for an Approval Control and can be setup for the Quick View feature. Highlight the Approval form in the flow by clicking on it and then click on Setup Quick View in the Property pane:

  1. The Setup Quick View wizard will display all sections of your form that meet the criteria of an Approval control. In this case, there should only by one - the Manager Review section of the Approval form.
  2. Check the Enable box.
  3. Type a Summary statement that will appear on the Task List, if desired. This is essentially the same as the Task Information so if you have set that up already you can leave the summary blank.  To add the new employee SSN to the Quick View, type SSN: followed by the templatized string for the Social Security field. Clicking on the Control dropdown will list all the controls in all the forms in your flow in alphabetical order.
  4. The Manager Review section should be listed in the Approval Control box.
  5. Click the  save and exit icon to close the wizard. You will see the lightening bolt on the Approval flow activity if Quick View is setup correctly.

Quick View Wizard

Task List on Jerry's iPhone


Quick View on Jerry's iPhone

You can customize the message the new employee will see upon completion of the screen flow by typing it into the Pending Message field on the Approval Form Property Panel. Here is an example: "Thank You {FirstName}. Your New Employee Package has been sent to your Manager for approval."  In this message, {FirstName} is a Templatized String, meaning it uses the data from the FirstName field on the form in the pending message.  

You can setup any control on the form that will give the manager more information on the task to be performed by using Templatized Strings in the Task Info field on the form's property panel. For Example, to display the new employee's Social Security Number in the task , type SSN: {SSN} in the Task Info field. SSN: will show as the label followed by the entered SSN.

Setup Task Notification Email

You can configure the email that is sent when the flow is put on someone's Task List. Jerry , the Manager, receives an email notifying him if there is a new task in the Task List. To set this up, click on the Approval form in the flow then click on the "Setup Task Notification Email" link and make changes to the Task Notification wizard. Notice the Templatized Strings in the message shown in the image below. 

Jerry, the manager, will receive an email informing him that there is a New Employee On Boarding task on his Task List. Notice the {task.list.url} is replaced by the link to Jerry's task list. When Jerry clicks this link, he will be directed to his task list. He will have to login if he is not signed on to access it.

Click the  save and exit icon to save your flow. 

Mappable and Max Map Idx Properties for Controls

All mappable controls, including signed sections, table columns, upload controls, etc have a Mappable checkbox on the control property pane that MUST be checked for the control to be available for mapping. If this property is unchecked, mapping options for the control will not appear in the mapper or the detail status screen as described below. Checking this property minimizes the amount of options in the mapper. For large PDFs, that number could be significant.  

The mappable property is checked by default so the designer will have to UNCHECK controls that do not need to be mapped in the pdf.

The Max Map Index property pertains only to tables and controls inside of a repeat. This property determines how many mappable indexes of the repeat item or table are available. 

Before beginning any pdf mapping activity, verify that the Mappable property is checked on ALL the controls in your form that you want to map in the pdf mapper. Be sure the Max Map Index is set for tables and repeats.

Generate the W - 4 "Pixel Perfect" PDF

If the W - 4 acroform that you downloaded does not have a writable field for the signature, follow these steps to add one using PDFescape: 

  1. Navigate to the PDFescape website and upload the W-4 Acroform. It will open in the editor.
  2. Click on Form Field on the menu on the left.

     3. Select Text as the field type from the dropdown. Then click on the Select box.


    4. Draw a rectangular field next to the Employee's Signature label shown in the red box in the image. Repeat for the Date field. Save and download the form. This modified Acroform will be used as our W4 template. We will upload it to  later in the tutorial.

There is a three step process to configure PDF form generation.

View Forms Generated by the Form/Flow

Open the Employee On Boarding workflow in the flow designer. Click on the   view forms generated by the form/flow icon on the toolbar.  Existing mapped pdfs for your form/flow will be listed.

Since we have not mapped a pdf yet, there will be none listed.



Upload PDF Acroform Templates

Use the New Form Generation screen to upload the Acroform for the W-4 Acroform PDF that you downloaded and modified earlier in this tutorial. Click the  New icon to begin. Fill in the name of the template, W-4 in this case, and browse to the location of the W-4 Acroform. Click OK.

The W-4 will be listed as a PDF to be generated for this activity of the flow.   makes a copy of the uploaded Acroform template and modifies it with available selections of appropriate e-form fields for each PDF Acroform field. The modified PDF Acroform (Mapper) will be re-generated every time because the e-form fields may have changed.


Map the E-Form Fields to the Acroform Fields

Download the Mapper by clicking on the  icon. The downloaded mapper is a modified template so it will have the same name as the template that you uploaded.

Open the mapper with an external PDF viewer/editor, such as Adobe Reader (version 11 or higher) or Mac Preview.  Here is an example of the downloaded mapper for the W-4 PDF. Notice the Acroform fields are re-written with editable combo box controls. The combo boxes are pre-populated with the names of relevant e-form fields from the  flow for the purposes of field mapping.

Click on the arrow in the combo boxes to display the e-form fields. Select the appropriate e-form field from the selections provided. The image shows the Acroform field for the Last Name on the W-4 form being mapped to the LastName [form > LastName] [id:_Dpf0vUf3EeK8Grq3Nz0xDg] selection in the list: .

We will not map all the fields on the Acroform PDF for this tutorial. Minimally, selections should be made for these fields in the W-4 mapper. If you have been naming the controls as suggested in this tutorial, control names should be the same as the Live Form Control Name column shown in the table. 

Acroform PDF FieldLive Form Control Live Form Control Name
Hidden control for First Name and Middle Initial FirstPlusInitial
Last NameLast Name LastName
Home Address (number and street or rural route)Number and Street Street
City or town, state and ZIP codeHidden control for City or Town, State, ZIP code FullAddress
Social Security NumberSocial Security Number Whatever you named it
Total Number of Allowances you are claimingTotal Number of Allowances you are claiming Total_Alllowances
Employee's Signature Employee's Signature  Whatever you named it
Date Today's Date TodaysDate
Employer's Name and AddressHidden control for Employer's Name and Address   Whatever you named it
Employer's EINHidden Control for Employee Identification Number  Whatever you named it

It may be difficult to read the entire selection on fields in your form that have a smaller length. Hover over each choice and you will be able to see the entire selection.

Upload the Completed Mappings

Save the completed mapping PDF and upload them to  by clicking on the  Upload Mapping icon on the Activity Form Generation Upload Mapping screen.

 will process the mappings and post a status that can be viewed by clicking on the  [Details] button. Any errors encountered will be listed here. We will not see the  icon until the entire Acroform has been mapped. The Form Generation Mapping Status will reflect those Acroform fields that have not been mapped.


Click the  save and exit icon to save your work and return to the Flows Home page.

Add the Form Viewer Control

Click the  Edit icon to return to the designer. Highlight the Confirmation form by clicking on it. Click on the  icon to edit the form. Drag and drop one Form Viewer control from the flow palette to the form. Change the label of the Form Viewer control to Review PDF Forms. Change the label color and any other style changes you want to make on the Style tab in the Properties pane. See Style Properties for more information.  

Click on the Form Viewer control to select it. Select the W-4 form from the Form dropdown on the properties pane. Click the  save and exit icon twice to save your changes and return to the Flow Home page. 

Assign a thumbnail to the Employee On Boarding Flow 

On the Flows Home page, click the  icon to assign a thumbnail to your Employee On Boarding flow that will display on the iPad and Iphone. You can upload your own icon or select one that  provides. 

Create a Space to Test the Employee On Boarding Flow

There are several ways to test the Employee On Boarding Flow. We will use a  space which can be a valuable tool for testing mobile forms on the iPhone and iPad. Before creating your space, make sure the visibility of your Employee On boarding workflow is set to public or public in tenant and that it is deployed to production.

Follow the steps below to quickly create a space to test the Employee On Boarding Flow:  

  1. Log in as the designer. Click on the Spaces tab.
  2. Click  to create a new space, type a Space ID and Space Name, and then click Create.
  3. Since we set the state of the Employee On Boarding flow to Production in a previous step, it will automatically be included, along with the Task List as menu items in the newly created space. 
  4. Click the  Edit icon.  Click the  icon to hide the left panel and select regular for the form width from the Min Width dropdown on the Property pane. 

  5. If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding Flow section.
  6. If you are using an in-house installation,
    1. Click the menu edit icon. Replace the <localhost:8082> in the urls for the Task List and the Employee On Boarding workflow with your server name and port. 
    2. Click the Save and Exit icon to save the changes and proceed to the Test the Employee On Boarding Flow section.

Test the Employee On Boarding Flow

  1. Logon to your tenant as the designer on your desktop.
  2. Click the  Share icon on the Space Home Page.

     3. Live Forms displays your space's URL — this is the link you distribute to those who you want to view your space. Remember, this flow is designed to only be accessible to users who are logged into the tenant.


     4. Type the Share url for your space into a browser session on the iPad. Your space will look similar to the image below, when accessed from the iPad.

     5. Logoff the desktop and logon to your tenant as the user Tom on the iPad.

     6. Select the Employee On Boarding flow on the iPad by tapping the icon for it.

     7. Fill in the screen flow. Use the Back and Next buttons or swipe to navigate the pages of the forms established by the designer's use of the PageBreak control. The Next button will change to Continue when the flow is navigating to a new form.

     8. You will only see a Save button if the Save/Load property on the flow has been   selected. This property saves a  partially complete form/flow on the Live Forms Form Server.

     9. Later the user can re-open the form either in the same browser or a different browser or even from a different computer, and reload the partially completed form and continue working on it. Saved forms are accessed from the users Task List. The Cancel button will take you back to the Space menu.

    10. The Manager's name should be filled in by  on the first page of the screen flow if you added the rule to do that from the logon information. 

    11. Check to see that the correct keyboards and date pickers are shown for the iPad.

    12. The address should be filled in if you implemented the location feature on the Employee Information Form.

    13. Test to see that you can take a profile picture with the iPad camera and upload it to the Employee Information form.

    14. Verify that the calculation to compute the W - 4 allowances are working and are yielding correct results on the Allowances form. Check that today's date is filled in the Today's Date field if you added the rule to do so.

    15. Sign the Wet Signature control using your finger.

    16. Enter data into the table control on the Education History page. Be sure to try the Degree attained dropdown choices.

    17. Review the data in the W - 4 PDF. Remember, we only mapped a small section of the Employee's Withholding Allowance Certificate.

    18. Click the Send to Manager button when the screen flow is complete. Verify your customized message is displayed to the new employee The flow should progress to the Approval phase now.

    19. Click the Back button then logoff the iPad. Verify Jerry received a task Notification email if you set that up. Do not click on the link in the email as that will take you to the login screen on the desktop.

    20. Logon to the iPhone as Jerry.

    21. Check that the Employee On Boarding task from Tom Cat shows up in Jerry, the manager's Task List.

    22. Tap the task for Tom Cat's Employee On Boarding information. Since we enabled the Quick View feature, you will see the task information, a field to enter a comment and Approve, Reject, Details and a Cancel button. Enter a comment and approve the task. 

    23. You can run through the flow again to see what happens if the task is rejected.

    24. Check to see that the correct pending message is displayed.

    25. Click the Back button and logoff the iPhone.

    26. Logon to  from a desktop computer as user Sue. Click the Perform this Task icon from Sue's Task List to complete the flow. Verify the correct completion message is displayed.

    27. Logoff .