Wufoo Forms App

Developers can generate form driven apps by using our Wufoo App generators. You'll need to have a Wufoo account - you can sign up for Wufoo here. In this tutorial we'll walk you through generating a Wufoo app step-by-step. We've also included a screencast of this tutorial:

Get your Wufoo API Key

You can find your API key for your Wufoo account by navigating to:
https://<your_domain>.wufoo.com/api/code/

Make a note of this, you'll need this later on. Also take note of the domain URL you're using to access your Wufoo account.
Login to the App Studio with your account

Using your login email and password, log into the App Studio
Navigate to the Generate an App area
- After logging in to the App Studio, select the "Apps" tab.
- On the "My Apps" page, select "Create An App". You will be presented with a wizard to guide you through the process. Select "Generate an App":
Select an App Generator

You'll be presented with a list of available App Generators. For Wufoo apps, these include a Single-Form generator and a Multi-Form generator. A single form app is an app based on one particular Wufoo form and a multi-form app displays all available forms to the user so they can choose which form they'd like to fill in. In this tutorial we'll select the single-form app generator.
Configure your App
- Enter your app name in the Application Name field or leave it blank to use the default (WuFoo App). If this name clashes with an existing application, then the studio will append a number to the end of the name.
- To configure your app, you'll need to input your Wufoo API Key which you noted in step 1, and your Wufoo URL (the place where you login to your Wufoo account, e.g. feedhenry.wufoo.com) - then click "Validate". This will validate your account credentials and, in this case since we're generating a single-form app, it will show a list of forms for you to choose from.
Generate your App

Your app is now ready to generate, press the "Generate App" button.
Your App is ready

Your app is now ready to build.

Extensions
Not only do you have access to the standard form fields that might be used on Wufoo, you also have access to some of the special features of the mobile device, that the form will be used on, like the camera, geolocation, signature capture and map display. These features are accessible by adding special keywords to your form fields when designing the form.

Location - Latitude/Longitude
When designing your form, create a field of type Single Line Text, which will receive the Lat/Lon co-ordinates of you current location. Add the keywords fh and fhgeo, to the Add CSS Layout Keywords property field in the form editor. These keywords will cause extra processing to be performed on the input field, when the form is being displayed on the mobile device. In this case, an extra button will be displayed beside the location field. When the button is clicked, the location's co-ordinates will be entered into the field.
Location - Easting & Northing
When designing your form, create a field of type Single Line Text, which will receive the Easting and Northing co-ordinates of you current location. Add the keywords fh and fhgeoEN, to the Add CSS Layout Keywords property field in the form editor. These keywords will cause extra processing to be performed on the input field, when the form is being displayed on the mobile device. In this case, an extra button will be displayed beside the location field. When the button is clicked, the location's co-ordinates will be entered into the field.
Camera
When you want to add a camera action to your form, create a field of type File Upload, and add the keywords fh and fhcam to the Add CSS Layout Keywords property field in the form editor. This will cause a camera button and a library picker button to be display on the mobile device.

Clicking the camera button will present the camera control of the device to the user, allowing them to take the photo. When the photo is accepted, it will be uploaded as a file to WuFoo. The library picker button allows a user to pick a photo from their on-device photo library.

You can add multiple camera fields to a form, and we'll only show one camera field at a time. When a user selects or takes a photo, another photo upload field will appear if more are available. If you need to take up to 5 photos, for instance, you would add 5 photo fields to your form - only one will be shown at a time until all 5 fields are used.
Signature Capture
When you want to add a signature capture action to your form, create a field of type File Upload, and add the keywords fh and fhsig to the Add CSS Layout Keywords property field in the form editor. When the user taps the signature button on the form, a signature box will be displayed, allowing the user to draw a signature. The signature will be sent as an image file when the form is uploaded.
Map
When you want to add a camera action to your form, create a field of type Single Line Text, and add the keywords fh and fhmap to the Add CSS Layout Keywords property field in the form editor. The user filling in the form will be able to move a pin marker on the map, the co-ordinates of the pin will be uploaded in the text field of the form.
Time
Although Wufoo comes with a time field, you may wish to use our time extension which has a button for the user to click to capture the current time. If you want to add this field to your form, create a field of type Single Line Text, and add the keywords fh and fhtime to the Add CSS Layout Keywords property field in the form editor. When the user taps the time button, the current time will be captured.
Date
Although Wufoo comes with a date field, you may wish to use our time extension which has a button for the user to click to capture the current date. If you want to add this field to your form, create a field of type Single Line Text, and add the keywords fh and fhdate to the Add CSS Layout Keywords property field in the form editor. When the user taps the date button, the current date will be captured.

The fields will look similar to the following when displayed on the device.
Generate an App