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 project above.

Create the Client Information Form

1. Click the name of the Forms Tutorial project (or click the  Action Menu and select  Open). You'll be on the Forms and Workflows home page.
2. Click  Add and select Create a New Form. The Form Designer launches.
3. Notice the form name in the top left corner. Click the pencil icon to change the form name to Client Info.
4. 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 1. Click the label; it becomes editable. Change it to Client Information.
5. Add Controls to the Section
   1. Drag a Text control from the palette and drop it inside the Section.
      1. Click the label and change it to First Name.
      2. 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.
      3. 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.
      1. See that the control drops to the right and is automatically 6 grid columns wide so it fits to the right of First Name.
      2. Change the label to Last Name (you can click on the label or change it in the Properties panel).
      3. Check the Required property once again.
   3. Similarly, drag and drop an Email and Phone Control to the right. Experiment with drag/drop. You can drop to the right, left, above or below most controls.
      1. Change their labels to Email Address and Phone Number respectively. 
6. Add a Date: Now, drag and drop a Date control above the Section (the icon while dragging should show an upward pointing arrow).
   1. Change the label to Today's Date.
   2. 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.
   3. Click the Style Tab in the Properties panel and change the width to 3 grid columns.
7. Now, select the Email Address control.
   1. In the Properties panel, customize the Error Msg property by typing in "You must enter a valid email address."
   2. Set the Hint to "Enter a valid email address."
   3. Set the Help property to "Email address <u>must be</u> entered in a valid format."
   4. 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.
8. At this point, your form should look like this:

   

9. Next, customize the message displayed when the form is completed. 

   1. Click Settings in the Guided Designer Navigation bar at the top of the form. The Form Properties Wizard displays.

   2. Select the Form Actions tab.

   3. The Action: Display Message when user submits form is pre-selected - keep that selection.

   4. 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. frevvo will use the values entered into the First Name and Last Name fields at runtime.  

      Thank you {FirstName} {LastName} for your submission.

10. Click Save at the top right corner of your screen to save and continue working, or  Save and Close to exit the designer and return to the Forms and Workflows Homepage.

Test this Example: