Previous Section | Next Section

Example - Client Information

Let's begin by creating a simple form that the customer will use to first fill out some basic information. We'll assume that you've uploaded the starter Forms Tutorial application above.

Create the Client Information Form

Click the edit icon for the Forms Tutorial application. You'll be on the Forms home page.
Click the New icon to create a new form. In the wizard that shows up, click Finish since we have no templates installed. The Form Designer launches.
If the Properties panel is contracted, click the header to expand it. Change the form name to Client Info.
Add a Section:
1. Drag a Section control from the Palette and drop it into the canvas on the right. Notice as you drag, an icon at the top right will indicate where the item will drop.
2. The Section will have a default label e.g. Section 32. Click the label; it becomes editable. Change it to Client Information.
Add Controls to the Section
1. Drag a Text control from the palette and drop it inside the Section. Click the label and change it to First Name. Notice that the Properties panel at left now shows the properties of this control. Check the Required property at the bottom. See that the control background changes color to indicate that it is required. In the Properties panel, click on the Style Tab and set the width to 6 grid columns using the selector at the top.
2. Drag another Text control from the palette and drop it to the right of First Name. Make sure the icon indicator at top-right shows a right arrow before you drop. See that the control drops to the right and is automatically 6 grid columns wide so it fits to the right of First Name. Change the label to Last Name (you can click on the label or change it in the Properties panel) and check the Required property once again.
3. Similarly, drag and drop an Email and Phone Control to the right. Change their labels to Email Address and Phone Number respectively. Experiment with drag/drop. You can drop to the right, left, above or below most controls.
Add a Date: Now, drag and drop a Date control above the Section (the icon while dragging should show an upward pointing arrow). Change the label to Today's Date. Notice that you can change the Control Type to Date, Time or Date/Time for different functionality. A variety of Date Formats are available but we suggest leaving this setting at Automatic. Click the Style Tab in the Properties panel and change the width to 3 grid columns.
Now, select the Email Address control. In the Properties panel, change the Error Message to "You must enter a valid email address". Set the Hint to "Enter a valid email address" and Help to "Email address <u>must be</u> entered in a valid format.". See that the Hint message shows up on hover and the Help content causes a help icon to appear. Clicking the icon displays your help text. This text can contain any valid, well-formatted HTML.
Click on the what does the user see icon in the tool bar to customize the message displayed when the form is completed:
1. Click on the Display Message wizard. Copy the message below into the Message box then click Finish. {FirstName} and {LastName} are examples of templates. Templates are specified by surrounding the name of a control in your form with curly braces. will use the values entered into the First Name and Last Name fields at runtime.
```
Thank you {FirstName} {LastName} for your submission.
```
At this point, your form should look like this:
Click the save and exit icon to save your work.

Test this Example:

Click the Test icon for your form.
You can fill out the date using the date picker or type it in using a variety of formats e.g. Feb 12 2015 or 02-12-2015 etc.
Fill in First and Last Names. Empty controls displaying a yellowish background are required. Required controls must contain valid data in order to submit a form. When you click the Submit button, any invalid fields will be highlighted with an orange background color. You must enter or correct the data in these fields in order for the form to be submitted.
For Email Address, if you make a mistake (e.g. type in test@gmail) and you will see that frevvo immediately tells you that there is an error. The error message we configured earlier is displayed. The Hint is visible on hover and clicking the Help icon shows the help we configured.
Similarly, the Phone Number must follow one of the patterns allowed for it or an error will be displayed.
When all fields are valid, click the Submit button to submit the form. The display message we configured will be displayed.
If you want to see how the form will look on an iPad or an iPhone, close the window, click the Test icon again then click the Tablet or Smart phone buttons at the top of the test screen.

Previous Section | Next Section

Browser not supported