...
| width | 0px |
|---|
...
This chapter walks you through the steps of creating a simple form. See Creating an Application.
...
On
...
this page:
| Table of Contents | ||
|---|---|---|
|
AddAdd/Edit a Form Form
- Start Start by clicking New
in the applications home page to add your first application. Then click the name of the application or the Edit
- Or, to work on a form you’ve already started, click the name of an existing form or click the Edit
Here is where you design your form by dropping and laying out controls such as input text boxes, phone number, dates, radios, dropdowns, etc.. controls from frevvo 's palette or from your own schema.
First, modify the name and description of your form. 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 of the Forms Designer. Give your form a new name and description.
...
Controls are added from the frevvo control control palette by clicking a control button, like ''text'' or ''number'' or ''phone'' text or number or phone, and dragging them onto the form's canvas area. Drag a few text controls and a money control onto your form canvas now.
[[Image:dragdrop1.png]]
== 
Editing Controls
...
Each control is given a random label indicative of the control’s type. Click once on a control to select it. Click again on it's default label to edit it. Controls have many [[V4_Designing_Forms#Editing_Controls | properties]] in properties in addition to the label property. These The Form Designer's Properties area will display all of the control's properties, so you can edit them.==
Arranging Controls
...
You can organize and rearrange the controls in your form by dragging controls and dropping them in the appropriate place. Click on the control to drag it to another location on the form. As you drag your controls you will see visual indicators helping you place your control where you want it. When you 1st start working with Live Forms with it can be helpful to grab the control towards the upper right corner as that's where the visual drop indicators appear. Read the section on [[V4_Designing_Forms#Adding_Controls_.28Drag_.26_Drop.29 | Drag & Drop]] for Drag and Drop for helpful details.==
Preview your form
...
The Form Designer [[V4_Designing_Forms#Toolbar | toolbar]], at Designer toolbar at the top of the form canvas area, contains several buttons. The preview [[Image:Preview-button.png]] button 
button displays your form as it will look when deployed for use. In Preview, notice that any panel grouping elements you may have added to your form are not displayed visually. This is because panels are for multi-column layout only.==
Saving your Form
...
To save any changes to your form, click on the finish [[Image:Finish-button.png]] toolbar 
toolbar button.==
Using a Form
...
Once your form is created, it’s time to try [[V4_Using_Forms | using ]] it. From the forms page, click on the test [[Image:UseForm.png]] icon 
icon below your form. This brings up your form on frevvo’s on ' web server. Go ahead and enter values into your form. Notice how each time you tab to another field frevvo immediately immediately validates the data in the prior field and immediately displays an error message and color indication when there is a problem. For instance, try to enter a text string in an input that is a numeric control. See the [[V4_Using_Forms#Valid_forms | Validation]] section Validation section for details on validation rules
frevvo prevents prevents submisson of incomplete forms by keeping your form's submit button grey'd until all required fields are filled in. As soon as all required fields contains values and all of those values have valid data (eg: phone fields contain aaa-bbb-cccc format) the submit button will become clickable.===
Submitting your Form
...
Where does the form data go when the user clicks the submit button? This is controlled by your form's [[V4_Designing_Forms#Doc_Action_Wizards | Doc Action ]]. What does the user see when they click the submit button? This is controlled by your form's [[V4_Designing_Forms#Form_Action_Wizards | Form Action ]]. Let’s go back into the frevvo the form designer for one of your forms to use the [[V4_Designing_Forms#Form_.26_Doc_Action_Wizards | Form Action and Doc Action ]] buttons buttons.
Click the [[V4_Designing_Forms#Form_Action_Wizards | Form Action]] button button in the form designer's toolbar and click the ''Forward user to a web page of your choice''. This launches a wizard. Enter the ''URL'' http://www.google.com. Click finish in the wizard panel to return to the form designer canvas. Next click the [[V4_Designing_Forms#Doc_Action_Wizards | Doc Action]] button button in the form designer's toolbar and click the ''Email data to a specified address''. This launches a wizard. Enter your email address in the ''To'' field field. Click finish in the wizard panel to return to the form designer canvas. Click the finish [[Image:Finish-button.png]] button button on the form designer to save your changes and exit the form designer. This returns you to the forms home page. Click the test [[Image:UseForm.png]] button button to use your form. Now when you click the submit button rather than navigating to a page with a default message "Thank You! Your form submission has been submittedreceived", you navigate to www.google.com. And also the The form's data will be emailed to you. This is your first simple usage of setting form and doc actions.===
Making Forms Public
...
By default your forms are private and only accessible when you are logged into frevvo as as the form designer. While developing your form, you can test it in use mode by clicking on the test [[Image:UseForm.png]] icon icon to the right of the form's name. Once you are satisfied with your form you can make it public by clicking the [[Image:NotPublic.png]] icon 
icon on the Form page to the right of your form's name. Forms have three states:* Private
- Private - for use only by the form designer
...
- Public in tenant - accessible to users with
...
- a user account
...
- Public anonymous - accessible to anyone who knows the
...
...
- url.
Click the icon twice so you see the [[Image:Public.png]] icon 
icon which means your form is pubic public anonymous.==
Using Your Own Schemas
...
Frevvo can can quickly and easily create forms from your own XSD schemas. First, [[V4_Using_Forms#Schemas | upload]] your upload your .xsd into your frevvo your applications. From within your application, click on the ''schemas'' tab. Next click on the [[Image:Add.png]] icon icon on the Schemas tab. You can add as many schemas as you want. Each time you will enter an upload dialog window where you can browse to your schemas on disk and give them a meaningful name and description. You can delete schemas you no longer need by clicking the [[Image:Delete.png]] icon
icon next to each schemas name.
See the form designer[[V4_Designing_Forms#From_Schema | Schemas]] section designer Schemas section for details on adding controls from schema types into your form.==
Styling Forms
...
Forms can be custom styled to fit the look & feel of your existing web site. See [[V4_Getting_Started_Guide#Themes | Getting Started with Themes]] Themes.