V3 Designing Forms
From Frevvodocs
frevvo Live Forms™ v3
Forms Designer
The frevvo Live Forms™ Designer is the heart of frevvo's simple, quick, no-coding required form creation. The Forms Designer enables you to add controls quickly to your form, customize their appearance and layout, and add rules that affect the behaviour of the form.
- Standard Edition users, just click New
to launch the Form Designer and start creating a new form. Or, to work on a form you’ve already started, click the name of an existing form or click the Edit 
icon below the form name.
- Professional Edition users, start by clicking New to add your first application. Then click the name of the application or the Edit icon and click New to create your first form.
A unique and arbitrary form name will be generated automatically--Form 31 in this example. You'll change this name when you begin working on your form. Also, you'll see that your form already has Submit and Cancel buttons, since these are part of every form.
The Form Designer has several components. Each is described below.
Palette
The palette contains the controls you can use in your forms. Click on the control you want and drag it into your form. See adding controls for more information.
Custom Area
This area stores controls you’ve already created and customized so you can re-use them. Maybe you’ve created a dropdown list with your ten branch offices, for example. To add a customized control to this area, drag it from the form you’re working on and drop it over the shaded area that says “Custom.” (You can’t drag the control into the area beneath this.) The name you see in the Custom Area will be the control’s label; if you can't see the entire label, hover over the control to see the full name. You also may add to the Custom area any of frevvo’s pre-built control templates by clicking Templates > Customs from the top menu and clicking Add.
To use a customized control from the Custom Area, click on it and drag it into your form. Once the control is in your form, you can modify any of its properties or simply leave it as it was. Any modifications you make apply only to the form you’re working on—your changes will not affect the version of the control that has been dragged inside the Custom Area.
To delete any control from the Custom Area, simply click the 
icon.
Custom Group Wizard
Simple controls such as text, date, money, etc.. drop immediately into the Custom Area. Group controls (section, repeat, panels, tabs) display a wizard.
The wizard appears as soon as you drop a group into the Custom Area. The wizard ask if the group should be made read-only. If you mark the group read-only=true, then when it is used from the Custom Area and dropped back onto any form, it will not be editable. This means that you cannot delete or rename controls from within a read-only group. You can only delete the entire read-only group, and changed the styling, validation, etc.. properties.
Custom group controls marked read-only=false can be edited completely. You can drag other controls into the group and delete any one or more controls from within the group.
Any rules used by a custom group controls can be carried along with the custom group. The wizard will show you all the rules used by the group and will allow you to pick and choose among them. As soon as you choose one or more rule to include the group is automatically marked as read-only=true. This is because editing the name of one of the controls in the group could break the rule.
Rules carried along into a custom group control are not visible when dropped into another form. This is because they are not editable. The only rules that can be carried into a custom group control are those that entirely reference controls within group. If a rule references controls both within and outside the group they cannot be included in the custom group since they would not be functional. The custom group wizard will exclude such rules automatically.
Custom groups with rules included when dropped back onto the same or another form, will contain a special "Prefix" property. The property will automatically be given a unique value if you drop the group onto the same form 2 or more times. This ensures that the group controls have unique element name. If using the Professional edition you can view the impact the prefix has on the element names by viewing the form's schema.
Custom Section groups will include the prefix on the parent XML element only. This is enough to make all the child XML elements and the parent (the section itself) unique. Panels, Tabs & Repeats are not created in the schema as Complex Types. Thus all the top level controls inside these custom group types will be named with the prefix. Any Sections within these types will, as a top level control itself, have the prefix. But all it's child elements will not have the prefix since it's again not required to make them unique.
You can edit the "Prefix" property but frevvo will not allow you to make it non-unique.
Properties Area
This is where you define values in a dropdown box, set the max length for an input field, create tooltips, and more control customization. When you click on a control in your form, the Properties area displays the control’s properties so you can view and edit them. There are also form properties; click the toolbar at the top of the forms work area to access these.
Data Sources (Pro Edition only)
This area displays the list of XML schemas added to the current application. You may add to your form one or more elements from any schema listed here by clicking Add from Schema, but you first must upload the schema into your application from the Schemas tab.
Forms Work Area
The right side of the Form Designer is the work area for the forms you create. At the top of this area is the toolbar.
Toolbar
The toolbar at the top of the forms work area is visible when you are designing your forms but it is not visible to you when you test your forms or to your users when they access your forms. The toolbar includes the following buttons:
- Click Preview to see the form as it will appear to users. You cannot enter data or click buttons in Preview mode (but frevvo’s Test feature lets you do this).
- Click Controls when you are finished working in Rules mode. If your form has no rules, you don’t need to use this button
- Click Rules to display your form’s existing rules, edit the rules, delete them, or create new ones. When you click this button, the left-hand portion of the Forms Designer becomes disabled until you click the Controls button. Rules are discussed in detail below
- Click Form Action to configure what users will see when they submit your form
- Click Doc Action to configure what happens to the data when they submit your form
- Click Finish to save the changes to your form
- Click Cancel to discard changes you’ve made to your form
Submit and Cancel Buttons
At the bottom of the forms work area are a Submit button and a Cancel button. They are part of every form you create and are both disabled while you are designing your form. When you test your form or users access it, the Submit button will be enabled dynamically only after valid data has been supplied in all required controls. To turn off this feature uncheck the Enable if Valid property.
Both buttons have properties that you can customize, so you are free to change the names of these buttons by editing their labels. Additional submit controls can be added to the form by dragging/dropping the submit control from the palette.
There is a special template Uri variable named {_frevvo_submit_name}. This template gets converted to the name of the clicked submitted button when users submit the form. The feature makes it possible to pass to the back end system which submit button was clicked (if the form contains multiple submit buttons) so the back end can switch the functionality based on that knowledge.
And example use is to have one submit button labeled "Submit" and drop another onto the form and label it "Save". For the save button uncheck Enable if Valid. The back end system can then control a save/load feature.
Palette Controls
frevvo’s palette offers a rich variety of controls that let you create virtually any form. All controls provide functionality as soon as you drop them into your form but need to be customized (edited) to suit the form you are designing. The purpose of each control is described below.
Input Controls
Input controls allow users to enter data (text, dates, numbers, etc.) into your form and automatically prevent them from entering the wrong data types. For example, if users enter letters into a number control, your form will display an error message and the Submit button will not be enabled until valid data is supplied. This validation happens automatically; you do not have to do anything special. The purpose of each input control is described below.
To validate the content in each input control, frevvo assigns a default XML schema data type to each control. The table below shows the default data types for each input control.
| Input Control | XML Schema Type |
|---|---|
| Text | xsd:string |
| Date | xsd:date |
| types:emailType, an xsd:string restriction pattern defined in types.xsd | |
| Money | types:number, an xsd:double restriction defined in types.xsd |
| Phone | types:phoneType, an xsd:string restriction pattern defined in types.xsd |
| Quantity | xsd:integer |
| Number | types:number, an xsd:double restriction defined in types.xsd |
The explanations below describe the controls generically—before you edit them to impose additional restrictions or define behavior specific to the form you’re creating.
Text
Allows users to type any text and is intended for short, one-line entries.
TextArea
Lets users type any text and is intended for longer, multi-line submissions. When users enter data, scroll bars appear as needed to accommodate the text.
Date
The date control lets users enter a date by typing it or by clicking the calendar 
icon. If users click the calendar to choose the date, the date they pick will be displayed in mm-dd-yyyy format (e.g., 09-01-2008). If users hand-type the date they may enter any of the allowable formats below, but the date immediately will be redisplayed on the form in mm-dd-yyyy format. Professional Edition users should note that in the submissions XML document, the date will be converted to the standard xsd:date format of yyyy-mm-dd.
Allowable Date Formats and Examples:
- yyyy-mm-dd (2008-09-15 or 2008-9-15)
- mm/dd/yy (09/15/2008 or 9/15/2008)
- m-d-yy (9-5-08)
- mmm dd yy (Sep 15 08)
- mmm dd, yyyy (September 15, 2008)
Requires users to enter a valid EMail address. The address must conform to the following syntax: <name>@<name>.<string>
Money
Allows users to enter U.S. currency. Users may type a dollar sign, commas and a decimal point, but if they don’t the form will display these symbols for them. For example if a user types 4000, the form will redisplay the value as $4,000.00. The form also will round all entries to two decimal places. (Professional Edition users should note that if a user types more than two digits after the decimal place the XML submissions document will store as many digits as the user entered but will not include the dollar symbol, decimal point or commas.)
Phone
Used for entering a phone number and allows any of the following formats: xxx.xxx.xxxx, xxx-xxx-xxxx, xxx.xxxx, or xxx-xxxx. If you want to enforce one of the 10-digit formats (to require an area code), you can edit the control’s Pattern.
Quantity
Used for entering quantities or any whole numbers (integers). The form displays an error message if users enter decimal points, commas, or anything other than an integer.
Number
Used for entering decimal numbers. Users may enter any number of digits after the decimal place (although you can edit the control’s Max Length or Pattern property to impose a practical limit).
Selection Controls (Dropdown, Radio, and Checkbox)
Selection controls let users choose from a list of options instead of having to enter text.
- Dropdown - This adds a dropdown list to your form. By default the first choice in the dropdown list will be blank; you define the other choices by editing the control’s Options properties.
- Radio - This adds mutually exclusive radio buttons. You define the number of radio buttons and the specific choices by editing the control’s Options properties.
- Checkbox - This adds a set of checkboxes so users can check one or more. As with the other selection controls, you edit the control’s Options properties to define the number of checkboxes and the specific choices.
Upload Control
Use this to allow user to upload and submit attachments with your forms. The upload controls contains special properties to control the: maximum attachment size to allow (bytes); and the min and max number of attachments to accept per form submission. Attachments are viewable in the Submissions Repository. You can configure you form's Doc Action property to send attachments to a URL endpoint (ex: servlet) that can save the attachments locally within your company. Form more details see handling attachments.
frevvo itself sets an upper limit on attachment sizes. If you enter a value into the control's max attachment size property greater than frevvo's internal default upper limit, you will see an error message displayed on the upload control.
In-house download customer can control frevvo's internal upper limit via the web.xml parameter frevvo.attachment.maxsize. And also can set the max attachment size per user by editing a user's profile in the admin user and editing the form field shown in here.
Message Control (for Static Text)
Use this when you want static text on your form. You provide the text in the control’s Message property and can include arbitrary XHMTL with your text—maybe you want two lines with different font sizes or colors, for instance. The browser will format the XHMTL when users access the form.
Lets say you wanted to add the following header information to your form:
This can be done using 2 panels and 2 message controls.
The first message control contains the following text:
<center style="font-weight:bold;"> Connecticut Neck & Back Specialists, LLC </center> <center style="line-height:1.2em;"> 20 Germantown Road<br/> Danbury, CT 06180<br/> </center>
The 2nd message control contains this text:
<center style="line-height:1.2em;text-align:right;"> <br/> David L. Kramer,M.D.<br/> David A. Bomback,M.D.<br/> Jennifer Madonia-Barr,PA-C </center>
Link Control (for URLs)
Use the Link Control when you want to include a URL in your form. When users click the link, the target URL will open in a separate browser window.
Image Control
This control lets you include an image (picture, logo, etc.) in your form. The control allows you to use .JPG, .GIF, and .PNG files or any other image type that your browser supports.
When you drag in the control, you’ll see a Browse button and an Upload Image button. Click Browse, navigate to the image you want, and click Upload Image. After you upload the image, the Browse and Upload Image buttons disappear, so if you aren’t satisfied with the image, delete the image control and drag in a new one.
You cannot resize your image after it is in your form, so make sure the image will fit sensibly in your form before you upload it. The “regular” form size is 600px but by editing your form’s Width property you can use larger and smaller form sizes that may allow you to accommodate your image without forcing you to resize it.
Video Control
This lets you include video files in your form and works the same way as the image control. The control supports .SWF files and other video file formats that are supported by your browser.
Trigger Control
The trigger control adds a button to your form and is used in conjunction with rules. If your form does not have rules you will not need the trigger control. If your form does have rules, see using triggers with rules for details on how to use trigger controls and examples of when you might want to use them.
Submit Control
The submit control adds a new button to you form that when clicked will submit the form. By default new forms already contain 1 submit button labeled "Submit". Submit buttons can only be added to the bottom of the form in a special drag/drop area.
Group Controls (Sections, Tabs, Panels and Repeats)
Group controls help you organize your forms and give them a professional appearance that is free of visual clutter. Each group control is described below.
Sections
Use sections to create groups of controls that users can expand and collapse.
Click the 
icon to expand a collapsed section or 
to collapse an expanded section. When users access your form the section can be expanded or collapsed—it’s up to you. If you want the section collapsed initially, make sure it is collapsed when you save (finish) your form.
After you drag a section control into your form, you can drag any other controls inside it—panels as in the example below, or even another section control.
If you have a required control inside a collapsed section, the section label turns red to cue users that they must expand the section and supply the required information before they submit the form.
If you delete a section control while designing your form, frevvo will automatically delete all controls you dragged inside the section.
Tabs
This group control lets you create a tabbed view as in the example below.
When you drag the tab control into your form you’ll start with three individual tabs. To add or remove a tab, click any tab and then click the 
or icon. Added tabs appear to the right of the tab from which you clicked the add icon.
To rearrange the tab order, drag one tab on top of another tab; the tab you dragged will move to the right of the tab upon which it was dropped. (Since you can’t move tabs left, if you wanted the Shipping Details tab before the Customer Info tab in the example above, you’d drag the Shipping Details tab and drop it on the Product Info tab.)
You can drag in other controls (including other group controls) into any individual tabs. As you’d expect, users will see only those controls in the currently selected tab—in the example above we dragged the First Name, Last Name, Phone and Email controls into the Customer Info tab, so these will not be visible when users select the Product Info or Shipping Details tabs. When users click the Shipping tab, they see different controls as shown below.
To move your entire group of tabs to another spot in your form, click the area to the right of your last tab and drag the entire group to the desired location.
Tab controls have some limitations:
- Individual tabs in a tab group must be the same size and fit on one row
- Individual tab labels must fit on one line
Tab Widths
Multiple rows of tabs are not fully supported, so if your tabs spill over to the second row, adjust the width of your tabs and also possibly the form width. To edit the tab widths, click the unlabeled area to the right of your last tab; this will display the tab group properties on the left side of the Forms Designer.
Type a percentage in the tab group’s Width property field. With five tabs, for example, typing 19% will cause each individual tab to take up 19% of your form’s width. As with panels you must account for space consumed by tab borders—so if you try to set the width to 20% the five tabs won’t fit on one row.
Deleting a Tab Control
To delete a tab group, in v3.2 and early version, you must delete the individual tabs one at a time; there is no way to delete an entire tab control in one shot. When you delete a tab, frevvo will delete any controls you dropped inside it. In v3.3 and later version you can select the entire tab control by clicking on the unlabeled area to the right or your last tab; this will display a red X that when clicked will delete the entire tab control.
Panels
Use panel controls to create columns. If you want two columns in your form, drag in two panels; drag in three panels for a three-column layout, and so on.
By default a panel's width is set to 49%, so when you drag two panels into your form, the second panel automatically will line up next to the first panel. Panels have a 1px border so you can see their boundaries; so for a two-column layout this means you cannot make both widths 50% or there will not be enough room on your form to line up the panels side by side.
Since panels are group controls, you drag other controls inside them. Below are three panels that have been dragged in to the palette for use in a three-column layout. Inside the first panel is a text control (city), a dropdown control (state) and another text control (zip). Note that when you drag in the third panel, it will not align side-by-side with the first two columns, since at this point the width of all three panels adds up to 147%.
Since our example calls for three columns and we want the first larger than the others, we can modify our panels widths to be 55%, 20%, and 23% respectively. As soon as we adjust the width of the third panel, all three panels automatically will line up next to each other and look like columns, as in the illustration below.
If you want to rearrange the order of your panels, be aware of frevvo’s drag-and-drop restriction that prevents you from dropping a control below a group control. If you have three columns and want the middle column at the far right, you must drag the middle column above whichever control is directly beneath your panels. (If you haven’t dragged other controls into your form, drop the middle column over the submit button.) Also, in a three- or four-column scenario if you want one to move one of the middle columns or the right-most column to the far left, you must drag and drop it above your left-most column.
Although panels have labels you can edit during design, the panel labels and panels themselves are not visible to users or to you when you test or preview your form. (In the example above users will not see the "Three-column layout" panel label.) Only the controls inside your panels are visible; these controls will be organized visually according to the width of the panels. Although users don't see panels, you still may wish to give your panels meaningful labels if you plan to add them to your custom palette and reuse them in other forms.
If you delete a panel frevvo automatically deletes any controls you’ve dragged inside it.
Repeats
Say you want users to be able to enter one or more addresses, phone numbers (or other data); they might have only one address or phone number but could have more. With repeating controls, your form can display dynamically as many controls as users need as opposed to always showing extra input controls that might rarely be needed.
Drag the repeat control into your form and then drag another control into the repeat control just like you would for sections, tabs or panels. When the control is inside your repeat control, click the control to see its properties (on the left hand side of the Forms Designer). Notice that two Settings properties have been added to the properties you normally see for the control: Min# and Max#.
These minimum and maximum properties control the behavior users will see on the form. In the example below we’ve set the phone control min # to 2 and the max # to 5, so when they access the form users will see two phone controls and both will be required. Also, both will have an icon; clicking this automatically displays another phone control. If you click during design, the min# property will be incremented automatically. (The 
icon above each control is optional and appears because we set the phone control's Help property.)
It is often helpful to tell the user how to add additional repeat items. You can easily do this by dragging a message control into the form with the following text:
<center>Click on the <img src="/frevvo/images/icons/add.gif"/> icon to add more phone numbers to the list. <br/></center>
The first items in order up to the min# must be filled in when the form is used in order for the submit button to be enabled. Thus if the user enters a value into the 1st repeat item and then the 2nd repeat item, and then clicks plus on the first repeat item, a new item will be added to the form between what was the 1st and the 2nd moving what was the 2nd item will to the 3rd position in the list. The new 2nd item will become required because it has no value. Until the new 2nd item is filled with a value the form will not be submittable.
Thus it is not enough that 2 items contain values when min# is 2. The 1st two items must contain values.
If users elect to supply the maximum number of values, after all controls are displayed, the icons will disappear from the form and only the icons will remain.
When you edit the label or any properties of a control inside a repeat control, your changes will be applied to every instance of the control inside the repeat control. The same is true if you decide to delete a control inside the repeat control—all instances of the control will be deleted.
As with panels, repeat controls are hidden when testing or using forms and only the controls inside your repeat controls are visible. (The input controls will have icons as a visual cue to users.)
There are some key differences between repeat controls and the other grouping controls:
- You may drag in only one control, and you may not drag in tab controls, panels or other repeat controls.
- You may not drag in trigger, message, image or video controls.
You can have multiple controls inside a repeat. To do this, first adding your controls to a section control and then dragging the section into the repeat control.
If you need to add more controls to the section. You must first drag the section back out of the repeat. Then add additional controls. And finally drag it back into the repeat. Panels are the exception. You can drop a panel into a section without first dragging the section out of the repeat.
For Professional Edition users, if you add a control from a repeating element that was uploaded as part of a schema (maxOccurs > 1), frevvo automatically will generate a repeat control and nest the repeating item in that control. The repeat control will automatically enforce the minimum and maximum occurrence constraints.
Adding Controls (Drag & Drop)
From the Palette
Initially, a form is created with no controls except for a Submit and Cancel button. You must add controls to the form in order to make it useful. Controls can be dropped from the palette or generated from a schema.
When you create a new form from scratch, it has no controls other than the Submit and Cancel button. To make your form useful you must start by dragging in controls from the Palette and dropping them in your form.
As you begin to drag a control from the Palette, you’ll see this 
icon, which means the control is not yet over a droppable area. You must drop controls into the body of the form; you can’t drop them into the toolbar nor can they be dropped below the Submit and Cancel buttons.
As you bring the control over the body of your form, the icon will change to one of the icons below:
-
This means your control will be placed above the control over which you are hovering. You’ll see this icon when you drag the control over the top half of a droppable area.
-
This means your control will be placed below the control over which you are hovering. You’ll see this icon when you drag the control over the bottom half of a droppable area.
-
If you are hovering over a group control--tab, panel, section or repeat--this means your control will be placed inside the group control. (If other controls already are inside your group control, this icon appears only when you hover over the group control header and means your control will be placed inside the group, at the top. You’ll see the and icons as you hover over any controls inside your group control so you can govern exactly where inside the group control your new control will go.)
If you are not dragging your control over a group control, this means your control will be placed at the top of your form. Anywhere to the left of the print 
icon is a droppable area.
-
This means your tab will move to the right of the tab on which it is being dropped. This applies only to tab controls.
Other important drag-and-drop rules:
- If you let go of a control while the
icon is showing, your control will go back to where it was—either back to the Palette or where it was in your form before you tried to move it.
- You can only drop individual tabs in a tab group on other tabs in the tab group (and you’d do this only if you wanted to rearrange the order of the individual tabs inside a tab control).
- You can never drop any control directly below a group control. If you want the control you are dragging to go below the group control, drop your control above a different control that is below the group control or first move the group control. Remember that the Submit and Cancel button are controls, too.
- You can never drop two different controls into a repeat control—for example, you cannot drag in a quantity control if your repeat control already contains an email control. If you need multiple controls inside a repeat control, first drag the controls into a section, then drop the section into the repeat. Once the section is inside your repeat you may not add anything else to the section, so build the section first in this case. You also may never drop a panel, tab or another repeat control inside a repeat control, nor may you drag in trigger, video, image or link controls. See Repeats for more details.
Professional Edition users also should note that repeat items automatically generated from a schema may not be dragged outside the repeat control since this would violate the constraints imposed by the schema.
From Schema
If you have the Professional Edition you can generate controls automatically from schema elements, but you must first upload your schema into your frevvo application. Once you've uploaded the schema and added schema elements to your form's Data Sources area, you can generate controls from these elements automatically. See Generating Controls from Schema Elements
Editing Controls
To edit a control’s properties, click on the control in your form. The Forms Designer’s Properties area will display the control’s existing properties, so you can edit them.
Controls have Setting properties and Style properties. Generally speaking the Setting properties influence the control’s behavior and the Style properties affect its appearance. The specific properties you see depend on the type of control you’ve selected in your form; some controls have more properties than others. All properties are optional, with the exception of the control label.
Control Setting Properties
Each control setting property is explained below. Keep in mind that all controls do not have the same setting properties.
Label
A control’s label is displayed on your form beside or above the control. When you first drag in a control it is assigned an arbitrary and unique label—checkbox 43 for example. Obviously for your users’ sake you will want more meaningful labels. Change a control’s label either on the form itself (by clicking the control and selecting the label) or by overlaying the arbitrary name in the Properties Label field. Message controls are the only controls without labels—they are used for static text so you don’t need a label, too.
You aren’t restricted to plain text for labels. You may use arbitrary XHMTL when typing the label name. Say you want two different font sizes and colors for a label as in the illustration below.
In the Label field, type this XHTML: Password <span style = "font-size:0.9 em; color: red; "> (6 characters) </span>.
When typing labels you are free to use any special characters with the exception of the less-than sign (<). If you need a less-than sign in your label, substitute the characters & l t ; (with no spaces between) for the less-than symbol.
Labels can also contain templates that will be replaced by values entered into your form as the form is used. See Templates for details.
Note that a control's name defaults to its label minus any spaces and special characters. Spaces and special characters are removed in order to make the name valid for use in rules and for XML users, valid as a xsd schema element name. Also note that if you have two controls with the same label, the control's name will automatically be made unique. If you try to edit the name such that it would no longer be unique frevvo will prevent the edit.
Pattern
Most controls automatically ensure that users provide the correct data type, but patterns give you the flexibility to impose additional restrictions on what users enter in a particular control.
In the Pattern field in the Properties area, type your pattern using XML schema regular expressions. A simple example is a pattern that restricts a text control to only allow strings formatted as a US zip code: \d{5}|\d{5}-\d{4}. If you type this expression in the Patterns property, your form will permit values entered into this field only if they are five digits or five digits followed by the '-' character, followed by 4 digits.
When you define patterns you don’t have to restrict what the control handles automatically. It is not necessary to enter a pattern [a-z] for a Number control, since users can’t type letters in a number field anyway. Since essentially you would be attempting to expand the allowed data types in the control, frevvo would ignore this pattern if you entered it.
Note that you may have to first save the form before the pattern takes effect. Patterns take effect immediately the second and subsequent times you edit the form making it convenient to test the pattern in the designer.
See Patterns and Validation for more information and useful patterns.
Hint
This property lets you create a tooltip that will display in your form when the user mouses over the control. Simply type the text for your tooltip in the Hint field.
Help
This property lets you provide for your users more detailed help about a specific control. If you enter text here, a icon will appear next to the control on your form. When the user clicks , the help text you supplied in the Help property will be displayed in a floating box.
Error Message
This lets you display a specific error message if the user does not supply a valid value in the control. If you leave this property blank users will get generic feedback (an “invalid value” message, for example) if they supply a bad value—but if you use this property, you can make the error message more helpful.
For example, if you are using a pattern that requires the user to enter an area code of 203 or 860 in a phone control, you can use the Error Message property to let users know this explicitly if they try to enter a different area code.
Control Type
This applies to selection controls (dropdowns, radios and checkboxes) and most input controls (text, text area, email, phone, quantity and number) and is populated automatically when you first drag in a control. You can change this property if you want to switch a control in your form to a different type of control. This saves you from having to remove the original control and drag in a new one.
There are some limitations: you cannot change a selection control to an input control or vice versa. This means you easily can switch a checkbox to a dropdown list, but you cannot use this property to change a checkbox to a text control.
This property is also useful for verifying what kind of controls are in your form. Since you assign new labels to your controls after you drag them in, you occasionally might forget whether you are looking at a text control or phone control, for example. This property lets you know what kind of controls are in your form no matter what the labels say.
Note: If your control was generated from a schema element, it will have a Format As property instead of a Control Type property. See below.
Format As
This property applies only to controls generated from XSD schema elements. (If the control was dragged in from the palette, it has a Control Type property; if the control was generated from a schema element, it has a Format As property instead, as shown below.)
You can adjust the Format As property to change the way your control looks on your form--for example, by changing a dropdown to a text control or vice versa. This will change the control's appearance but will not affect how the control validates data. If you need to modify the control's validation behavior, you must update the schema.
In v3.4, if you select one of the select control types: radio, dropdown or checkbox, then a new property called Labels becomes visible. By adding strings into the labels property you can restrict the values allowed to be entered into this control when users use your form. When the form is submitted the value will be equivalent to the selected option label.
Another way to set the labels is via a rule to dynamically initialized the options when the form loads. See the Business Rules chapter for more details. Also see the section on dynamic initialization from database SQL queries.
Date Format
This feature is available in v3.3 and later versions.
This property applies only to Date controls. It supports European date formatting. By using this property, dates entered into the form get translated according to the chosen format and be reformatted to match the selected format.
- A date typed into a form field will be reformatted to match the selected Date Format
- A date entered into a form field will be translated according to the selected format. For example,if you choose a European format of DD-MM-YYYY and enter 10-05-2009 the date value will be translated as May 10, 2009. If you choose a US format of MM-DD-YYY the date value will be translated as October 5, 2009.
- If you choose any of MM-DD-YYYY using either - or / or . as the separator, all will be valid for that format but will be translated to the selected separator
- Users can still enter dates like Feb 3, 2001. It will be translated into the specified format
Max Length
This property is available for text controls and other input controls and limits how many characters users can supply in the control. Simply type a number (positive integer) in the Max Length field.
# of Rows
This property applies only to text area controls and lets you define the initial size of the text area. Scroll bars will appear automatically when the user reaches the # of rows you specify.
Required
Make a control required when you want to force users to enter a valid value in the control before they submit your form. To do this, check the Required checkbox in the Properties area. If the data is optional, leave the checkbox unchecked.
As soon as you mark a control required, red asterisks appear next to it on your form. Until users populate all required controls with valid data, they will not be able to submit the form because the Submit button will be disabled.
You cannot mark grouping controls (tabs, sections, panels and repeats) required. Input controls that are direct children (directly inside) of repeat controls also cannot be marked required, nor do they need to be, since the min# and max# properties take care of this already. You may, however, make controls required when they are inside sections, tabs and panels.
Professional Edition users cannot edit the required property for controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs attribute. If a control from schema appears as required and you don't want it to be required, edit the XSD and set minOccurs=0. Re-upload the XSD. Then the control will no longer appear required.
In v3.4 Section controls also have a required property. In v3.3 and prior if a Section contains a large number of controls and most of them are marked required and you have a rule that displays or hides the section depending on something else in the form. If you hide the section but do not also change required to false for all the inner controls your form will never be able to be submitted. See Visible/Invisible Sections in rules for full details.
Options
This property appears for dropdown, radio and checkbox controls and is how you populate the choices the user sees in these controls.
In v3.4 it is now possible to have option labels different from option values. The syntax for the options is <value>=<label>. The <label> is what will be displayed on your form and the <value> is what is saved as the selected value when the user submits the form. In v3.3 and prior versions the syntax was just the label and the value defaults to the label.
When you first drag one of these controls into your form they have generic values: Option 1, Option 2 and Option 3. This matches the generic text you see in the Properties area. To supply your own values, simply overlay the values in the Options property with the values you want and add more (or delete one) as necessary.
In v3.4 if you do not enter both <value> and <label> using the <value>=<label> syntax then the value will default to the label. As soon as you tab off the options property setting options without values will automatically be converted to the new syntax.
Here the options are entered without values. In this case frevvo will default the value to the label.
As soon as you tab out of the Options property the options will be automatically converted to the value equals label syntax.
If you would like the submitted values to differ from the visible label then edit the options as follows. In this case the values are A, B, C while the visible labels remain morning, afternoon, evening.
The order of choices in your control will match the order in the Properties area. If you have choices that need a logical order (you’d want a dropdown of US states to be sorted alphabetically, presumably), make sure the order is correct in the Properties area. (You can’t sort the text you enter in the Options property field but you can cut and paste.)
In addition to the generic Option 1, 2 and 3 choices, a dropdown control also includes a blank option that by default will appear first in the list. This blank option will appear no matter what text you supply in the Options property. You cannot remove the blank option but you can make one of the other options the default. See setting defaults.
What if you want a '=' character to appear in your options? Since the 1st equal sign is the delimiter between the value and the label you can put an equal in the label as follows. For example you want your label to be "good = gold". If you enter this as the option what you will see in your dropdown is the label "gold". To solve this use this options string "a=good = gold". Now the label will be as you wish. Currently if there is an equal in the label it is not possible to also have an equal in the value. This will be supported in a future release.
Professional Edition users cannot change the choices if they have been generated from an uploaded schema, since the schema specifies the choices. On controls generated from schema you won’t see the Options property in the Properties area. However in v3.4 you can change the option labels. See Labels.
Labels
This property applies only to controls generated from schema elements. (If the control was dragged in from the palette, it has a Options property; if the control was generated from a schema element, it has a Label property instead.)
In v3.3 and prior version the label displayed on select control options (dropdowns, checkboxes, radios) was the enumeration values from the XSD schema. It was not possible to change the label visible in the form to something potentially more user friendly. In v3.4 you can change the option labels. For example the schema may specify choices for an event registration as: A, B, C. However the form would be more self descriptive if the labels for A, B and C where morning, afternoon, evening. You can edit the labels and the form will now show morning, afternoon and evening. When this form is submitted the submission will still correctly contain the required values A, B or C. If you want to change the values you must edit and re-upload the schema.
This property is also very useful when used in conjunction with the Format As property. For example imagine your XSD schema contains an element named "product" which is of type xsd:string. But you know for a fact that there are a limited set of product types that are allowed by the back end system (database for example). An xsd:string will create a text control on your form by default. But you can easily change the form to restrict the types by using the Format As property to change the control from text to dropdown. Then use the labels property to enter the list of product choices. The submission values will now be restricted to that set of options rather then any text string.
In v3.3 and prior you cold accomplish this same type restriction by it either required editing your xsd schema to add a enumeration or setting the options in a business rule. In v3.4 using the labels property makes this common task easier.
Enabled
This property determines whether the control is enabled or disabled when users first access your form. If you check the DISABLED checkbox, users may not enter a value in the control until the control is enabled. (You enable the control using a Rule.)
For example, say you are creating a wedding invitation form and want to know if the people completing your form are bringing a guest. Your form might include a text control for the guest’s name that becomes enabled only after users indicate (in another control) that they are in fact coming to the wedding.
You are not permitted to disable grouping controls.
Visible
This property determines whether the control is visible or hidden when users first access your form. It is almost identical in concept to the Enabled property, but instead of disabling the control you hide it and write a Rule that makes it visible based on what users enter in another control.
Hide Label
This property determines whether the control’s label will be displayed on your form. Check the checkbox to hide the label on your form; leave it unchecked to show the control’s label.
Message
This property applies only to message controls and is where you enter the static text that will appear on your form. In addition to regular text, you may include in this property field arbitrary XHTML markup that will be formatted and displayed by the browser.
Min# and Max#
These properties appear only when your form has an input control inside a repeat control and apply to the input control. Simply type a number (positive integer) in the two property fields. If you specify a min # of 1 and max # of 10, users must enter values in at least one input control or they will be unable to submit the form, but they may enter as many as ten. See repeat controls for more details.
If you set the min# to 0, users initially will see one email control but won’t be required to supply an EMail address to submit the form.
For Professional Edition users, these are not editable in the Properties area for repeating controls that have been generated from an uploaded schema, since the schema already specifies this via the minOccurs and maxOccurs attributes.
Password
This property applies only to text controls and other input controls. If you check the Password checkbox, the text the user enters will appear on the form as asterisks. (It will be submitted as normal text, however).
Sensitive
This property determines whether the value saved in the submissions repository is hidden when viewed in the frevvo web submissions UI. The value is not currently encrypted in the database. Check the checkbox if the data users will enter into this field contains sensitive data that should not be visible when viewed in the web UI. In a future release sensitive field values will be encrypted in the submissions database using an SHA algorithm.
CSS Class
This is the control’s class name that was added to your form's XHTML markup. You can use this CSS class to reference the control in any custom CSS or JavaScript when customizing themes.
Name
Every control must have a name and that name must be unique in your form. The name is automatically generated and defaults to the control's label minus any spaces and special characters. Spaces and special characters are removed in order to make the name valid for use in rules and for XML users this makes the name valid as a xsd schema element name.
If you have two controls with the same label, the control's name will automatically be made unique. If you try to edit the name such that it would no longer be unique frevvo will prevent the edit.
The Name property is instrumental in several usages within frevvo:
- Name is how you refer to your control in Rules
- Name is also used when initializing form fields via the frevvo _data URL parameter
- Name is how you refer to form fields from Document URIs
- Name is used in Form Action Display Message and Go to URL Templates
- Name is used in Doc Action Email Address Templates
- And for the Professional Edition only, this is the name given to the XML element corresponding to the control you drag into your form from the palette.
Controls from schema, however do maintain their underlying xsd element name. But in all cases when referring to these from schema controls as listed above, use the Name and not the underlying schema element name.
Printable
This property determines whether or not this form field will appear in the html print view of the form and in the pdf document view. If unchecked the field will not appear in either view.
Enable if Valid
This property applies only to Submit controls. By default frevvo disables the form's submit button until all required fields are filled and until all field fields have valid data. See Valid Forms for details of this feature. However sometimes you may wish to override frevvo's default behavior and allow the user to submit a form even if it is invalid. To do this uncheck this property.
Control Style Properties
To access a control’s style properties, click on the control in your form, then click the Settings tab in the Forms Designer’s Property area.
Some controls have more style properties than others, so the specific style properties you see depend on which control you click in your form. As you define style properties for individual controls, remember that these will override any form-level properties you have defined.
Each control style property is described below. Professional Edition users, for more complex styling consider customizing a theme.
Width
Most controls have a width property. For input controls, the property specifies the width of the area in which users enter data, so for example you might narrow a control used for entering zip codes or widen a control if users typically will be supplying lengthier text. A common example is setting a text control's width to 90% for street addresses, when you are using the text control inside a panel as part of a two-column layout. (The percentage is relative to the entire form when the control is not inside a panel or other grouping control, but becomes relative to the grouping control once inside it.)
This property is crucial for panel controls because you must adjust the panel widths before your columns will line up side by side. For tab controls you access the width property by clicking the unlabeled area to the right of the last tab in your tab group; the width you specify will be applied uniformly to each tab in group. (See Panels and Tabs for more details.)
There is no Width property for section or repeat controls; however, you can edit the Width property of controls you drag inside these controls. Also, if you drag a section or repeat inside other group controls, frevvo automatically adjusts the width to a sensible size.
When setting a control’s width property you may use standard CSS relative values—for example, 5%, 5em, 5ex or 5px.
Item Width
Radio and Checkbox controls have an extra property called Item Width. You can use this property to change the layout of the options from vertical (one radio/checkbox button below the next) to horizontal. This is useful to save vertical space on long forms. And also useful to improve ease of use for forms with questions that each have the same set of options.
See this image as an example:
Option Width
This feature is available in v3.3 or later.
Radio and Checkbox controls have an extra property called Option Width. This property is useful when you option values are longer than a single line. In some cases this may cause the option value to start below the radio or checkbox on certain browsers. You can correct this by selecting a smaller option width such as 80%.
Here is an example of a checkbox option that spans multiple lines:
In order to adjust the formatting so the option aligns next to the checkbox, option width was set to 80%. This is how the checkbox looks after setting option width:
Margin and Padding
Margin and Padding These are two separate style properties but they are similar and often used together. The margin lets you add extra space around the outside of your control, while the padding permits you to add extra space within your control’s boundary.
In this example below, the controls have margin and padding properties of 30 px (pixels).
Type your margin and padding properties using standard CSS syntax. Type a single value such as 5% to apply a 5% margin or padding uniformly on all four sides of the control.
You also can type specify different margin or padding on the various sides of the control: for example, a 5px 10px 15px 20px margin property will give your control a five-pixel top margin, a ten-pixel right margin, a 15-pixel bottom margin and a 20-pixel left margin.
Background Color
This lets you specify the color that will appear behind the control. In the property field type any valid CSS color name or its hexadecimal RGB equivalent. For example if you want a red background, you can type the word RED or #aa2211.
Border Width, Border Style and Border Color
These properties let you specify the thickness, format and color of a border around any control. With the exception of sections and repeats, the border is applied only to the area where the user enters data and does not surround the control’s label.
For tab controls, click the unlabeled area to the right of your right-most tab to access the border properties. Your border properties will be applied uniformly to each individual tab in the tab group. You may not apply borders to panels but you may create borders around controls you drag inside panels.
Remember to make the border color property different from the form’s background color or users will not be able to see the borders. Specify the color using the standard CSS convention of typing the name of the color or its hexadecimal equivalent. When specifying the border width property, using pixels (5px, for example) works best.
Label Color and Label Size
These properties give you an easy way to change the font size and color for any specific control on the form. Specify the color by typing any valid CSS color name or its hexadecimal equivalent.
These properties work well when you want your entire label to have the same size and color, but for more sophisticated labels you can type XHMTL in the control’s label property field. For instance, use XHMTL if you want to apply two different font colors inside the same label. Typing XMHTL also gives you more font precision, since the label size property lets you pick generic font sizes only--small, medium, and so on. There may be controls for which you want a font size somewhere between the small and medium options in the dropdown, for example.
Bold
Check this checkbox to make the control's label bold.
Italic
Check this checkbox to italicize the control’s label.
Control Advanced Properties
To access a control’s advanced properties, click on a control in your form, then click the Advanced tab in the Forms Designer’s Property area.
Only input controls have an Advanced Tab.
Auto Respond
Check Auto Respond to send the form submission email to the email address entered into this control. Of course it only makes sense to check this property on a control into which you expect the form user to enter a valid email address. The same email that is sent to the email address specified in the form's Email Document/Result is sent to the email address entered into this control.
Reply To
Check Reply To if you want the submission email set to the form's Email Document/Result to have a Reply-to set to the email address entered into this control. If you do not specify a Reply To control in your form then it defaults to no-reply@frevvo.com. Of course it only makes sense to check this property on a control into which you expect the form user to enter a valid email address.
Imagine that your form contains the following fields and that the control labeled Auto Respond has the Auto Respond property checked. And that the field labeled Reply To has the Reply To property checked. And that the form's Doc Action Email Document (Professional Edition) or Email Results (Standard Edition) is set to "steve@snet.net".
Then the following will occur when this form is submitted:
- steve@snet.net will receive an email with the form's submission data
- the reply-to address in the submission sent to Steve will be set to sally@company.com
- joe@abc.net will receive the same submission email that was sent to Steve.
Here is the email header of the submission email sent to steve@snet.net.
Setting a Default Value for a Control
When designing your form, you can set default values for most controls. When users access your form, they’ll see the defaults you supplied.
For checkboxes, radio buttons and dropdowns, simply pick the choice you want as a default. For text controls and other input controls, just type the value in the control. Save (finish) your form with the defaults you want. If during design you decide you don’t want the default, just delete the text (for input controls), uncheck the checked checkboxes (for checkbox controls), unclick the radio button (for radio controls), or pick the blank option (for dropdown lists).
Keep in mind that any default value you set must conform to the control’s data type requirements. For example, you cannot set a default of ABC in a quantity control.
Undoing Design Changes
The current version of frevvo does not include an “Undo” or “Redo” feature. If you accidentally delete a control, you must re-add it.
Removing a Control
To remove a control, click on it in your form. You’ll see a red X in the right corner of the control; click the X and your control will be deleted immediately. Keep in mind that there is no Undo feature and that deleting a group control automatically will delete all input controls inside it.
As noted earlier, you cannot delete a tab control in one keystroke. You must delete the individual tabs one by one.
Control Templates
As with form templates, there are two types of control templates: control templates we’ve created for you and those you create yourself. To use one of your own controls as a template, simply drag it from your form into the Custom area of the Forms Designer.
To use one of frevvo’s control templates, choose Examples > Templates from the top menu. Then select Control Templates. You’ll see the same three options you see for form templates:
- Try lets you preview the control and try it—you see a form that includes only the control and the Submit and Cancel buttons.
- Email launches a new message in your default email system and includes a link to the form with the control and Submit and Cancel buttons
- Add automatically adds the control template to the Custom area of the Forms Designer
Once the control template is in the Custom area, you can drag it into any form you like. (If you are using the Professional Edition you can drag it into any form in any application.) Control templates are for your own use and are not available to other frevvo users.
For in-house download customers, control templates can be made public but adding them to the admin user and dragging them into the Custom tab from the admin users. Controls added to Custom this way are visible to all logged in users for use in their forms.
Form & Doc Action Wizards
The Wizards are a new feature introduced in v3.3. They make it easier to configure what happens to the data when a user submits your form and what the users see after submitting the form. The wizards are accessible from the form designer toolbar via the one button labeled Form Action and another labeled Doc Action. The action settings are summarized in the form properties form info tab.
Form Action Wizards
The form action wizards configure what users will see when they submit your form.
Using these wizards you can:
- Close the form window
- Display a message to the user in the existing form windows
- Forward to a nicely formatted web page that you have created elsewhere
- Forward to Paypal if your form has sold items to the user
- Post the form data to a service and then forward the user to a web page
- Display a message formatted using a Google Document
The wizards help guide you through the configuration process. Many of the wizards allow you to use form controls as templates to dynamically create what the users sees rather than hard coding this. See the section on using templates in form actions for full details.
Close the Window
After the user submits the form, if the form was shared via "Full Page/Popup" or "Link (Email/Web page)", the window containing the form will be closed.
Display Message
After the user submits the form, the browser will display a standard frevvo page with a text message. For example, the message might say, “Thank you for completing our form.” You supply the specific text in the Message field. This option works best for relatively brief messages. It can be tricky to enter or edit large amounts of text in the wizard's Message field, so for verbose messages consider creating a simple HTML page for your message and choosing the Forward User to your Web Page wizard.
The message can be customized, using the wizard's control dropdown, with values the user enters into the form. For example if your form contains a fields named firstName and lastName, you can set your message to "Thank you {firstName} {lastName}". Now when a user submits the form the controls templates {firstName} and {lastName} will automatically be replaced with field values "Thank you Joe Smith". See using templates in form actions for full details
Show In
Both the display message wizard and the forward to web page wizard allow you to select where the message is displayed on the page using the "Show In" dropdown. There are three choices: Frame, Parent and Top. This tells the browser where to show the text (if you chose Display Message) or the new Web page (if you chose the Forward to Web Page).
- Frame means inside the form's iframe
- Parent means inside the form iframe’s immediate parent
- Top means at the top of the page, regardless of how many parents are outside the iframe.
Forward to Web Page
After the user submits the form, the browser will be redirected to another URL, which you supply in the URL field. You must include the http:// prefix e.g. http://myhost.com/thankyou.html. For Professional Edition users the application can have a Form Action Base URL which you set in the application properties. For example, you can have http://myhost.com/ in the application baseURL and simply “thankyou.html” in the Form Action URL field.
Show In
These are the same options as described under the display message wizard above. Unless you have created a special page that you know will fit correctly within the form’s iframe you should not choose iframe. Choose the Parent or Top option instead.
Forward to Paypal
When the form is submitted, users will be forwarded to Paypal to complete payment. This multi-step wizard guides you through configuration:
- Paypal account login
- Paypal invoice description based on form values
- Paypal payment amount from form values
and more...
The frevvo Paypal tutorial can help you get started quickly.
 |  |
Post Data then Forward to Web Page
After the user submits the form, the browser will POST the user’s data to the URL you specify in the wizard’s URL field and display whatever is returned—the next page to display.
You URL field must include the http:// prefix e.g. http://myhost.com/services/processPayment. For Professional Edition users the application can have a Form Action Base URL which you set in the application properties. For example, you can have http://myhost.com/services/ in the application baseURL and simply “processPayment” in the Form Action URL field.
The Url can also include control templates. This can be useful when you wish to specify a production versus a test server. For example: http://{serverURL}/services/processPayment/{customerId}. Using this form Url you can specify serverURL using &_data=(serverURL:'testhost'). This makes switching from a test server to a production server a matter of setting the form Url parameter "serverURL" rather than editing the form itself. See Testing & Using forms for more details on _data usage.
In v3.4 you have the option of also sending the data as a pdf attachment along with the normal XML attachment and name/value pairs.
Display Message formatted Using a Google Document
frevvo Live Forms supports direct connectivity with Google Documents. This wizard allows you to format a display message using an online Google Document.
After the user submits the form, the browser will display a standard frevvo page with text formatted using your google document. This wizards steps you through the process of logging into your google account and locating the document you want to use to format the message. See the frevvo Google Documents connector for details.
Here is an expense report form that shows what you can do using the Google Documents Wizard. Click here to try this form.
| frevvo form | formatted display |
|---|---|
 |  |
Doc Action Wizards
The doc action wizards configure what happens to the entered data when a user submits your form. See Doc URI Wizards below for details on using the wizards to config the doc URI settings.
Using these wizards you can:
- Do nothing with the data
- Email the data to an email address
- Post the form data to your web application
- Format and Email the data using a Google Document
The wizards help guide you through the configuration process. Many of the wizards allow you to use form controls as templates to dynamically configuring wizard parameters hard coding this. For example you can dynamically set the email address to send the data to instead of hard coding an email address. See the section on using templates in doc actions for full details.
Do Nothing
This is the default option, which simply stores the data in frevvo's submissons repository if desired. (The other options also store the data in the repository if desired, but provide additional functionality.)
Do nothing is typically selected when you plan to do one or more of the following:
- View the submissions using frevvo submission repository
- Save submissions to a Google spreadsheet
- Save submissions to your own database or other backend system using Manual Doc URIs
- Use the form action wizard to post data then forward to your web page
Note: The form's save property controls whether or not your form submission data is also stored in frevvo's submission repository.
Email Data
When the form is submitted, frevvo will send an email message with the submission data, an XML document(s) for Professional Edition users, and in v3.4 optionally a pdf document attachment containing the submitted data. In v3.3 and prior releases you are limited to one email address or email template. v3.4 supports multiple comma separated email addresses. See Email Integration for further details.
Post Data
When the form is submitted, frevvo POSTs the document set to the specified URI and ignores any returned XHTML or redirect. This option may be used for additional processing of data. Use form action post if you want to both submit data to your URI and forward to a web page or display returned XHTML.
In v3.4 you have the option of also sending the data as a pdf attachment along with the normal XML attachment and name/value pairs.
Format & Email Using a Google Document
frevvo Live Forms supports direct connectivity with Google Documents. This wizard allows you to format an email message using an online Google Document.
After the user submits the form, the data will be formatted using your google document and then emailed to the addresses of your choice. Live Forms v3.3 and earlier allow only a single email address. v3.4 adds support for multiple comma separated addresses. This wizards steps you through the process of logging into your google account and locating the document you want to use to format the message. See the frevvo Google Documents connector for details.
Here is an example of a form submission that was formatted using a Google document.
Doc URI Wizards
The doc URI wizards enables you to manually set a URI to which the data will be sent when your form is submitted. The Google Spreadsheet wizard provides additional assistance in setting up the login to your google account and in selecting the spreadsheet.
Using these wizards you can:
- Unset the document URI - do nothing
- Save Submissons to a Google Spreadsheet
- Manually set document URIs - to connect to database and other backend systems
Unset the Document URI
This is the default option. If one of the other 2 options is set you can clear them by clicking this one.
Save Submission to Google Spreadsheet
frevvo Live Forms supports direct connectivity with Google Spreadsheets. This wizard allows you to save submissions directly into Google Spreadsheets
After the user submits the form, the data will be written into a new row in the Google spreadsheet. This wizards steps you through the process of logging into your google account and locating the spreadsheet you where you want to save the submissions. See the frevvo Google Spreadsheets connector for details.
Here is an example Google spreadsheet that is updated with a new row each time the frevvo form is submitted.
Manually set Document URIs
For an example of using Document URIs, see the chapter Connecting to your database and also the chapter Integrating with REST applications.
Editing Form Properties
At the top of the Forms Work Area click the toolbar (where you see the Finish and Cancel buttons) to access the form’s properties,which are shown in the lower-left portion for the Forms Designer. In the Standard Edition forms have Settings and Style properties; these are displayed on separate tabs. In the Professional Edition, there also is an Advanced properties tab.
Form Settings Properties
Each form setting property is described below. If you are using v3.3 or later the settings tab looks like this. What the users will see and what happens to your data when the form is submitted is now configured using the Form & Doc Action Wizards. The form info tab to the far right of the settings tab contains summary information on the actions set via the wizards.
If you are using v3.2 or earlier the settings tab looks like this.
Form Name
This is the name you see on the Forms home page where your forms are listed. We recommend changing the name to make it more meaningful than the arbitrary name assigned when you create it, but keep in mind it is a working name only, so users will not see it.
Description
By default all form descriptions say, “Edit the form to change this description,” but you can change this if you wish. The description appears as a tooltip when you mouse over the area just to the right of the form’s share 
icon on Forms home page. You also see this description when you view individual submission documents.
Error Page
If you supply a Url in this property field, frevvo will display this page whenever it fails to load a default document from one of the form's Document URI Read methods. If this field is not set a default error page will be displayed.
If one of the form's Document URI Write methods fails (they are executed when the form is submitted), in v3 no error page is displayed. The error is only viewable to the form designer by looking at the form submissions in the Submissions Repository. In an up coming version the Error Page property will also be enable for Write failures. So the form designer is able to choose whether or not their users see an error message or not.
Printable
If you check a form's printable checkbox a print icon will be displayed at the top of your form. If you don’t want users to print your form, uncheck the checkbox so users will not see the print icon. You can control which form fields are visible in html print view via the printable property on each field in your form.
Save
This property is checked by default. When check all submissions for this form will be stored in frevvo's submission repository. If you uncheck the checkbox, the form submission will still be logged in the submission repository and you will be able to view the metadata about the submission (time/date submitted, success/failure conditions, etc...) but NO form field data is saved.
Save PDF
This property can only be check if you have the save property checked. When checked a PDF image of the file is also saved in frevvo's submission repository. See the documentation for the submissions repository for details on viewing the PDFs saved there.
Show Logo
This property is checked by default and causes the “powered by frevvo” logo to appear on your form. Uncheck the checkbox to remove the logo from your form.
Captcha
Captcha is available in v3.3 and later versions.
This feature helps to protect your forms against spamming by automatic submitters. By selecting captcha, an image is displayed when a user submits your form, containing a string and also an audio recording. The user must enter the string into the specified input box. If the string is correctly reproduced, the form submission will be processed as usual. If it is not a new string is displayed and the user may try again.
Save/Load
If you check this checkbox a save 
icon and a load 
icon will be displayed at the top of your form. If you don’t want users to be able to save/load your form, uncheck the checkbox so users will not see these icons.
This feature is useful for lengthy forms where your users may not have all the information required to complete the form in a single session. By clicking on save a copy of the form with all the current values is saved on the frevvo Form Server. Later the user can re-open the form and click the load icon and the form will populate the fields from the saved values.
Users can repeat the save/load steps as many times as they wish. Finally when they are done and submit the form, the saved intermediate form is removed from the Form Server.
See the Save/Load feature, for full details.
NOTE: The following form properties exist only in Live Forms v3.2 and earlier release. See Form and Doc Action Wizards if you are running v3.3 or later.
Form Action
Prior to v3.3, this property configures what users will see when they submit your form. See Form & Doc Action Wizards if you are using v3.3 or later.
- Display Message – If you choose this option, the browser will display a standard frevvo page with text after the user submits the form. For example, the message might say, “Thank you for completing our form.” You supply the specific text in the form’s Message property field. This option works best for relatively brief messages. It can be tricky to enter or edit large amounts of text in the Message property field, so for verbose messages consider creating a simple HTML page for your message and choosing the Go to URL option.
- Go to URL – After the user submits the form the browser will be redirected to another URL, which you supply in the form’s URL property field. You must include the http:// prefix. For Professional Edition users the application can have a Form Action Base URL and Doc Action Base URL, which you set in the application properties. For example, you can have http://www.frevvo.com/frevvo/web/static/ in the base URL and simply “hosted” in the form’s Form Action. This is helpful when the various forms in your application will go to many different pages on the same web site.
- Post document – After the user submits the form the browser will POST the user’s data to the URL you specify in the form’s URL property field and display whatever is returned—the next page to display, for example.
- Close Window - After the user submits the form, if the form was shared via "Full Page/Popup" or "Link (Email/Web page)", the windows containing the form will be closed.
Next to the three form action options is an unlabeled dropdown box with three choices: Frame, Parent and Top. This tells the browser where to show the text (if you chose Display Message) or the new Web page (if you chose Go to URL or Post Document option).
- Frame means inside the iframe
- Parent means inside the iframe’s immediate parent
- Top means at the top of the page, regardless of how many parents are outside the iframe.
For URLs, choose the Parent or Top option instead of trying to display the new Web page in the iframe, unless you have created a special page with a display message that you know will fit correctly within the form’s iframe, as in the example described above in which you need to display a verbose display message.
Base Urls
If any Urls used in the form action are not fully specified then frevvo will prepend the application's doc action base Url prior to posting or going to the Url.
Using Templates in Form Actions
The values set in the Form Action Go To URL and Display Message can be customized with data entered into the form by the user. For instance it might be nice to have the display message the user sees after submitting your form to have a customized thank you message containing their name. To do this use the Name property for one of the form fields as a template in the display message. If the name property for the field "Customer Name" was set to customerName then use {customerName} to insert their name into the display message:
The 2nd example uses a control with its Name property set to C2 as a template in the Go To URL so that the web page displayed with the user submits your form can be customized with this user's information.
Here is the form control that is being used in the template. It is a hidden field on the form with the customer's ID.
And here is the template {C2} in the Form Action Go To URL.
Doc Action (Pro Edition Only)
Prior to v3.3, this property configures what happens to the data when a user submits your form. See Form & Doc Action Wizards if you are using v3.3 or later.
The document action property lets you POST the submitted data to an additional URI. For example, you may wish to POST data to an email service (which sends an email) but display a different page to the user. There are three options:
- No Action. This is the default option, which simply stores the data in frevvo's document repository. (The two options below also store the data in the repository, but provide additional functionality.)
- Email document. Select this option and specify an email address in the input field below. When the form is submitted, frevvo will send an email message with the XML documents containing the submitted data. You are limited to one email address or email template. See Email Integration for further details.
- POST document. Select this option and type in any URI in the input field below. When the form is submitted, frevvo POSTs the document set to the specified URI and ingores any returned XHTML or redirect. This option may be used for additional processing of data.
The document action can be synchronous (default) or asynchronous. If it is synchronous, the document action is first completed and then the form action is executed. For example, the document may be POSTed to a URI and a Thank You message displayed to the user. This POST will complete before the message is displayed. However, you may make the action asynchronous by unchecking the Synchronous checkbox in the Form Properties area.
Base Urls
If any Urls used in the form action are not fully specified then frevvo will prepend the application's form action base Url prior to posting to the Url.
Synchronous (Pro Edition Only)
This checkbox is used in conjunction with the EMail Document and POST Document options for the Doc Action property. See above.
Message
See Form & Doc Action Wizards if you are using v3.3 or later.
In v3.2.1 and earlier versions, this works in conjunction with the Form Action property’s Display Message option and is how you specify the text users see after they submit your form. If you have selected the Go to URL or Post Document option for your form action property, you won’t see the Message property.
URL
See Form & Doc Action Wizards if you are using v3.3 or later.
In v3.2.1 and earlier versions, this works in conjunction with the Form Action property’s Go to URL and Post Document options and is how you specify the URL. This is a relative URL, so you must include the http:// prefix.
Professional Edition users do not need the prefix if it is included in the application property's Base URLs.
EMail Results
See Form & Doc Action Wizards if you are using v3.3 or later.
In v3.2.1 and earlier versions, if you supply an email address in this property field, frevvo will send an email message to the addressee each time the form is submitted. You are limited to one email address or email template. See Email Integration for further details.
Form Style Properties
Each setting property is described below.
Width
This specifies how wide your form will be. The default “regular” width is 600px, but the dropdown also includes thin (400px) and wide (800px). You also may pick the custom option; this will enable the unlabeled dropdown box to the right of the Width dropdown and let you specify your own width.
Height
This property specifies an initial height for your form as it is loading into the browser. It does not dictate the actual height. You typically do not have to edit your form’s height property since the form can resize dynamically. However if your form is very small it can improve the appearance as your form loads if you set height to the actual height of your form.
See Embedding and Using Forms for details on configuring the actual form height.
Controls
This property applies whether the options you define for checkbox and radio controls will be displayed vertically or horizontally. In the current version the property is always to set to vertical and cannot be changed.
Theme
You can choose either of two themes for your form: clear or professional blue. The clear theme gives your form a clear (white) background and the professional blue gives your form a soft blue background. Professional Edition users may customize a theme instead of using the clear or professional blue theme. After you have added the customized them it will appear in the dropdown list along with the clear and professional blue options.
Font Name, Font Size and Font Color
Your form’s font name, size and color properties will be applied to all labels and text on your form. You can override these properties for a particular control by editing the control’s properties.
When you create a form from scratch these properties are blank; the specific font, size and color of the labels and text in your form will depend on the theme you have chosen or the template you used when you created the form. Simply supply values in any of the three font property fields to change the form defaults.
Form Info Properties
The form info tab summarizes the settings selected and configured via the form and doc action wizards.
- What users will see? depends on the form action wizard configuration
- What happens to my data? depends on the doc action wizard configurations
- Doc URI settings depends on the doc URI wizard configurations
Form Advanced Properties
This tab is available in v3.2 or earlier. See Form & Doc Action Wizards if you are using v3.3 or later.
For an example of using Document URIs, see the chapter Connecting to your database and also the chapter Integrating with REST applications.
Templalized Strings
Templates are like variables in your form that will be replaced with the actual values users enter into the form during use. Templates make your form feel more interactive and are useful in summarizing information in collapsed section controls. Templates can be used in several places in the form designer:
- Control Labels
- Control Hints
- Control Help
Templates can also be used in:
- Business Rules
- Form Actions
- Doc Actions
- Display Messages
- Email Action
- Form Url Parameters _data
See the sections on integration, Testing & Using forms and Url Template Variables for more details on these other uses.
Templates have the syntax: {<control name>}. For example, this form contains three controls labeled "Apples", "Oranges" and "Pears". The controls are named "Q1", "Q2" and "Q3" respectively and would be referenced in a template as {Q1}, {Q2} and {Q3}.
Templates can have default values. The syntax is {<control name>=<default>} For example, this form also contains a controls labeled "Total Items in Cart" which is named "T". A template {T=0} would resolved to the value "0" when the field named T is empty otherwise it would resolve to the entered value.
The Shopping Cart section control contains templates its Label, Hint and Help.
The Help property contains this text:
You have {T} items in your cart.<br/>
{Q1=0} Apples<br/>
{Q2=0} Oranges<br/>
{Q3=0} Pears
Before the user starts entering values into this form they will see:
As a user begins entering values into the form fields, the templates will immediately begin appearing, and the user will see:
Repeat Item Labels
It is very useful to use templates with repeat controls. Imagine a long list of medications that appear on the form in a collapsed state. It is helpful if the section labels are not simply a static text such as "Medication" but rather dynamic and indicative of the values entered into the form.
Backspace Key
Unless you are editing text in a property field or inside an input control, clicking the backspace key will cause you to jump to the frevvo home page. Just click your browser’s Forward button to return to where you were. You will not lose any changes if you were in the middle of editing a form.
Finish / Cancel
If you leave the form designer via the browser back button you will have neither committed nor canceled your changes. If you return to the form designer in the same browser session your latest updates will be in the form for you to finish or cancel.
Previewing Forms
frevvo’s form designer contains a preview tab. This tab display exactly how your form will look to an end user. By default, the header of the form is not visible in Use mode, panels are not visible, and edit mode icons (for drag and drop, remove and edit control) are not visible when the mouse hovers over the control. The preview tab gives you a quick look at the final appearance of the Use mode form. Your form is not clickable in preview mode. To interact with the form use the Test feature.
Click the 
button to preview your form.
