Skip to main content

Step 8: Finish the first form (tutorial)

In this step, we'll finish adding items to our first form.

  1. Drag and drop a Static Text item beneath the three input text items. Set its properties as follows: - margin trbl: _2 - styles: font-weight:bold; - text: Job Assignment
  2. Next, drag and drop two Dropdown items on consecutive rows.
  3. Set the properties of the first dropdown as follows: - label mode: float - values: Accounting,Human Resources,IT,Maintenance,Development,Sales - variable name: new_Department - label text: Department - margin trbl: _3 - required: yes - validation message: Department is required
  4. Set the properties of the second dropdown as follows: - label mode: float - values: Clerk,Director,Developer,Manager,Sales Rep - variable name: new_JobTitle - label text: Job Title - margin trbl: _3 - required: yes - validation message: Job Title is required
  5. Drag and drop an Input Text element beneath the dropdowns and set its properties as follows: - label mode: float - variable name: new_PhoneNumber - label text: Phone Number - margin trbl: _3 - pattern: ^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$ - required: yes - validation message: Invalid phone number (e.g. 206-555-1234)
  6. Drag and drop a Button element beneath the input text and set its properties as follows: - alignment: right - button text: Next - margin trbl: _3 - disable if form invalid: yes
  7. We'll click Save to save our progress so far.

Next: Step 9: Multiple forms