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

1. Click the  edit icon for the Forms Tutorial application. You'll be on the Forms home page.
2. 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.
   
3. If the Properties panel is contracted, click the header to expand it. 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. 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.
6. 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.
7. 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.

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

   1. Click on the gray menu bar at the top of the form, then in the Properties tab on the left side click Form Actions. Or, Click on the  icon in the tool bar, then click on the Form Actions tab. 

   2. Select the Action: Display Message when user submits form.

   3. 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.

   4. Click Submit.

9. At this point, your form should look like this:

   

10. Click the  save and exit icon to save your work.

Test this Example: