QuickStart TutorialQuickStart TutorialFor this tutorial, you'll design an Employee Confirmation Form from the beginning. This form is used by companies to verify phone numbers, room number, emergency contacts and other employment related information. Quite often, this information is not updated when an employee is promoted or moves. With this form, employees can update their own information as it changes.
In addition, by using Formatta Server companies can pre-populate forms from an existing database with the last known employee information. Or, Formatta Server can be used to automatically decrypt forms and extract data to an existing database. In just one example, employees could fill out a form to automatically update a web-based telephone directory.
Lastly, this tutorial also explains how companies can receive a paper form and process it for the same cost as an electronic transaction using Formatta's Dual Dimension technology.
To begin the tutorial, start Formatta Designer 7.0 (or download a 60-day trial copy), and create a blank form by selecting File | New. Follow the steps outlined below by clicking on each step:
Make sure the catalog entitled "default" is displayed (Formatta loads this catalog by default). You'll use this catalog and Formatta design tools to create a new form in about 15 minutes. Catalogs are a powerful way to design a whole series of forms by using pre-formatted form objects. In addition to corporate logos and other form objects, attributes of objects such as fonts, colors, and XML tags can also be copied into a catalog and re-used for new forms. Catalogs can be shared between form authors further reducing form design time.
Display the catalog by selecting Catalog Manager from the View Menu. If the "default" catalog is not displayed, right click on the catalog window and select Catalog | Open from the dropdown menu. This catalog, named default.cat, is saved in the Forms directory during program installation -- usually C:\Program Files\Formatta 7.0\My Forms. You can also download this catalog from Formatta's website.
With a blank form now displayed, select the Fields Layer 
from the Zoom
Toolbar. Layers
are very useful for complex forms; however, for this tutorial you can
use the Fields layer for all your form objects. You
can also just press 
on the Zoom Toolbar to edit all layers at the same time.
From the default catalog, select the first icon entitled, "1 Corp Header" (corporate header) and drag it to the top-right corner of the form. Don't worry too much about exact placement of this form object right now, we'll come back to that later in the tutorial.
Note: The form object you just copied is actually composed of 3 objects grouped together using the Group command from the Draw Menu. This allows you to group and ungroup objects as necessary.
Save your form using File | Save As, and name it "Employee_Confirmation". Your form should now appear similar to this example.
Select "2 Logo" (corporate logo) from the catalog and drag it to the top-left side of the form. You may want to select the Header from Step 1, and use the arrow keys to move the object downward. Your form should now appear similar to this example.
Controlling Form Objects
After a form object is selected:
Objects can be moved a pixel at a time with the arrow keys.
Using the Control key and the arrow keys moves a form object by ten pixels.
Using the Shift key and the arrow keys controls the height and width of a form object.
Note: Your
corporate logo can be added and used in a catalog just as easy as Formatta's
logo. Use
on the Format Toolbar to select a bitmap of your corporate logo from your
harddrive. (Formatta
supports ICO, BMP, DIB, JPG, BMP and TIF images.) With
your logo selected, press the ALT key and then use your mouse to drag
the logo to the catalog. From
then on, use the catalog any time you need to put your corporate logo
on a form.
Select "3 Emp ID" (employee identification) from the catalog and drag it to the form, about 1 1/4 inches from the top. These objects are not grouped, as the Header object was in Step 1; rather, they are four independent objects which can be selected individually.
Again, don't worry too much about object placement yet. Let Formatta's snap-to-grid feature do most of the work.
Note: Access Grid Settings from the Layout Menu. There you can control the grid display, snap and grid spacing.
Select "4 Date" (today's date) from the catalog and drag it to the form. Place these date objects next to "Employer ID", so they're lined up horizontally. Your form should now appear similar to this example.
Form authors often like to test their forms as they're being created.
Press 
on the Layout
Toolbar to see how the form is progressing. Press
the icon again to return to editing mode.
Did you notice that the date field displayed a calendar with today's date highlighted? Formatta has sophisticated field masks to control all types of form calculations.
Note: You
can create a formatted date field by displaying the Property Sheet from
the View Menu. Draw
an Editbox using 
on the Format Toolbar. Select
the Field tab from the Property Sheet to display all properties which
can be set for this field. Next
to FieldType, select "3-Mask" and press Enter. Next
to FieldMask, type MM/DD/YYYY. Next
to DisplayCalendar, select 1-Yes.
Select "5 Corp Name" (corporate name) from the catalog and drag it to the left-side of the form, approximately 1 3/4 inches from the top. Your form should now appear similar to this example.
Note: You
can zoom in and out of your form using 
on the Layout
Toolbar or 
on the Zoom Toolbar. The
Zoom Toolbar also allows a keyboard entry such as 75 to display the form
at 75%.
Select "6 Corp Addr" (corporate address) from the catalog and drag it to the right-side of the form, so it's even with "Employer's name" -- the object you placed in Step 5. Note that these objects are not grouped together as a single form object, as they were in Step 5. We'll be copying some of these objects later in the tutorial. Your form should now appear similar to this example.
Note: If you make a mistake, use Ctrl+Z to undo your last action.
Although we could have added more objects to the catalog, it will be a good exercise to use a few of the form design objects on the Format Toolbar.
Draw a textbox using 
similar in size to the blue rectangle named "Employer Details"
from Step 5. With
the object selected, select a dark blue background using 
and white text using 
.
Also, select
Times New Roman, 7pt, Bold, Italic from the Font
Toolbar. Finally,
double-click on the object to edit the text. Highlight
the text and type "Employee Details".
Finally, draw a small box using 
and place it next to the "Employee Details". Format
it using what you've learned in this lesson so that it looks like the
light-blue from Step 5. Your
form should now appear similar to this example.
Note: If you prefer a shortcut, select "7 Details Bar" from the catalog.
In Step 3, you placed 4 form objects on the page: 2 labels and 2 editboxes. Highlight the label entitled "Name" and the editbox below it. (Select multiple objects by holding down the Shift key.) From the Edit Menu, select Copy and then Paste. When form objects are copied, the pasted objects are placed directly on top of the copied objects. Simply use your mouse to drag these 2 objects so they are below the "Employee Details" textbox. Remember, let the snap-to-grid feature do the work of aligning form objects.
So far, all of the form objects have been copied from the catalog. The catalog objects have been pre-formatted so you can avoid most of the repetition of the form design process. Catalog objects allow you to format an object the way you want, then store it for use on other forms. This is a very powerful way to design forms quickly and easily.
The editbox in this lesson however, was copied rather than pasted from the catalog. Consequently, it needs a new field name. In the Property Sheet, next to FieldCode, type in "employee_name_1".
Note: An editbox is the area where people enter data into your form.
The editbox needs a name because it's going to be a "protected field" (i.e., protected from data entry) and equal to another field on the form. On the Field tab of the Property Sheet, enter "employee_name" next to SetByFormula. Next to ReadOnly, select "1-Yes".
You should also change the label from "Name" to "Your name" (since each employee will be filling this out) by double-clicking on the object. Lastly, copy the dark-blue box entitled, "1.2" and paste it next to the just-named field entitled, "employee_name_1". Your form should now appear similar to this example.
Note: If you prefer a shortcut, select "8 Emp Name" (employee name) from the catalog.
Select "9 Epoc" (emergency point-of-contact) from the catalog and place it underneath the objects in Step 8.
Next to the "Your name" and "Emergency point-of-contact" objects will be the employee address; however there is no pre-built catalog object for employee address. Rather than create these from scratch, let's save some time and use an existing catalog object and modify it. Select "6 Corp Addr" and place it on the form. You'll need to make a few minor changes:
Change "Employer's address" to "Your address"
Change "1.2" to "1.4"
Change "Mailstop" to "Apt."
Use the Property Sheet to change the field names to:
employee_street
employee_apt
employee_city
employee_state
employee_zipcode
These objects can now be reused in other forms. Group all of these new employee address objects and then add them to the catalog. Your form should now appear similar to this example.
Note: Remember, objects can be added to the catalog by first selecting them, then while holding down the ALT key, drag the object(s) into the catalog.
Select "10 Words" (privacy information) from the catalog and place it on the form, about six inches from the top. Next, select "10 Title Office" (employee title and office number) and place it underneath the green privacy verbiage.
You'll need to add two more fields under the employee office information: (1) email address, and (2) instant messaging address. Use "10 Blank" (blank formatted field) from the catalog to add these objects to the form. Your form should now appear similar to this example.
Note: It's a good idea to periodically save your work by pressing Ctrl+S, or using the Save option under the File Menu.
There are four additional fields that need to be added to the form: (1) Office phone, (2) Mobile phone, (3) Office fax, and (4) pager. Since these fields don't exist in the catalog, you can create them using "10 Blank" as a starting point. Drag this object 4 times to the right-hand column of the form.
Since these are phone numbers, they should be formatted appropriately. This means you get to add a FieldMask. Select one of the editboxes and open the Field tab on the Property Sheet. Next to FieldType, select "3 - Mask" and press Enter. Note that FieldMask is no longer greyed-out.
Select FieldMask and enter the following (without the quotes): "(###) ###-####". This is a simple way to both format a telephone number and enforce only numerals for data entry. Repeat these steps for all four telephone numbers.
You should also change the FieldCodes to the following:
Office phone = employee_office_phone
Mobile phone = employee_mobile_phone
Office fax = employee_office_fax
Pager = employee_pager
Your form should now appear similar to this example.
Note: If
there's room left on your form, you may want to add an employee comments
section using the Multi-editbox 
.
Select "12 Print" (print the form and data) from the catalog and place the objects in the lower right corner of the form. As you can see, employees will have the opportunity to print the form. In the next lesson, you'll learn how to provide employees with the option to encrypt and submit their information electronically.
Formatta designed strong, 128bit encryption into all our products so data could be submitted using the Internet. This encryption actually serves two functions:
Allows end-users to encrypt their data
Allows form authors to maintain the integrity of their forms (i.e., forms can't be tampered with by others even with a copy of Formatta Designer)
From the Form Menu, select Lock to enable encryption. From the Lock / Unlock window, select "Formatta Encryption", press OK, and enter a form password. Do not disclose this password to anyone else. End-users can use their own password to encrypt and decrypt their private data; the form author can use this form lock password to encrypt and decrypt private data. This dual symmetric encryption allows you to exchange encrypted data with your end-users without ever sharing passwords.
After locking the form, you'll need to specify the fields which should be encrypted. Select Field Sets on the Form Menu to display the Manage Field Sets window. A field set is nothing more than a group of fields. By default, all fields are available for encryption using the name "SetOfAllFields", but you can create you own field sets to do many different actions; however, for this lesson you'll use the default.
Turn on encryption capability by clicking the checkbox entitled, "Encryption".
Select 
from the Format
Toolbar and draw an Action button on the form. Action
buttons, such as the Print button, are customizable actions you can add
to your forms. The
first button will be used for Encryption, the second for sending the completed
form via email.
When you first draw an Action button, a List of Commands displays. Press Add to add display a list of customizable actions. Select Encrypt FieldSet as the action (i.e., "Command"); use the drop down list to select SetOfAllFields and press "Set" to specify all form fields to be encrypted.
Draw another Action button on the form; however, this time add "EmailTo ToName(ToAddr,(ToAddr)". Enter your name and email address as follows (without the quotes): "Robert Athens, athens@formatta.com".
Now when any end-user presses this send button, the form will be emailed to you.
Note: You can change the name of an Action button to suit your needs.
Your form should now appear similar to this example.
Step 14 • Non-Print Background
This form would look very nice with a silver background. Use
to draw a large box around all the form objects. Set
the background to silver using
on the Font
Toolbar. Because
this silver box was "layered" on top of the editboxes and labels,
use 
on the Layout Toolbar to send this object to the back of all other form
objects. You
can remove the border by setting PenWidth on the Property Sheet to "0".
While a silver background looks good on a computer screen, it's better if this background doesn't print. To keep this object from printing, set NoPrint to "1 - Yes" on the Property Sheet. Remember, the object must be selected before you can set its properties on the Property Sheet.
Step 15 • Bubble-tips and Tab Order
Each of your editboxes can have online help, called Bubble-tips. Bubble-tips can be added to each field on your form to help guide end-users during form completion. In addition, Bubble-tips can have HTML links to websites for more detailed information on how to fill out a form. To add a Bubble-tips, select the field and click on BubbleTip on the Property Sheet.
Lastly, end-users usually tab between field as they fill out a form.
You can
ensure the tab order is correct using 
on the Layout
Toolbar or Ctrl+I.
This tutorial started out by stating that by using Formatta, companies can process a paper form for about the same price as an electronic transaction. Formatta's innovative Dual Dimension technology eliminates the need for data entry or optical recognition.
To add a Dual Dimension to your form (that is, a form that works as
well on both paper as it does across the Internet), draw a box using 
on the Format
Toolbar. Select
SetOfAllFields and OK. With
Formatta's Dual Dimension Server, your form can now be processed on paper
for the same cost as an electronic transaction.
You can review the Employee Confirmation Form in Formatta Filler, or download it to your computer and open the form in Formatta Designer. The form password is "formatta" (all lower case).
Lastly, there are numerous other features you can build into your e-forms:
Have forms expire and automatically update
Add form advertising
Use digital certificates
Control form routing
Add hot-keys
Add form summary and contact info
and much, much more.
