Webforms

Learn more about ‘Webforms’

Create and edit

Be able to create a ‘Webforms’

Steps

1. Navigate to the ‘Workbar’ and select ‘Apps’  and then ‘Webforms‘
2. You will be redirected to the ‘Webforms‘ Create screen
3. ‘New Page‘
   • • Button (+ icon) ‘NEW PAGE’ 
     • If selected:
       • • TITLE Textfield Required field] Formatted as a Heading 2
         • Description Textarea [optional field]
         • When Title & Description Element is Active/highlighted – Right-hand drawer Configuration will display:
           • Description [on/off Slide Button]
         • on/off Slide Button
           • Click on = visible
           • Click off = hidden
       • Copy – Creates a copy of the page break after the last question
       • Delete – Removes the Page Tab from the webform
       • Includes a ‘New Page’ break in the webform
       • In PREVIEW, you will have to Tab NEXT to see New Page
       • Title & Description Element will automatically appear in the BUILD area
       • Page Tab will be added to the top left of the Title & Description Element
       • Page Tab will include a Copy and Delete button (Icon)

Build Tab

Header Bar

Forms Home Button – Currently deactivated

• • Tabs – Navigate between different aspects of the Webforms application
    • Build – Create web forms (Add and configure  questions)
    • Revisions – View current and previous versions of the current webform
    • Results – View submissions for the current webform – (Due as phase 2)
    • Settings – Additional settings specific to the submissions and notifications for the current webform
  • Preview Button – Opens a preview of the current webform that a user can test adding data to
  • Save Dropdown – Allows the user to select there desired save option
    • Save – If not set to Autosave, this will save the current configuration for the webform 
    • Save as draft 
    • Archive  
    • Publish  

Left-Hand Draw

• • Questions tab – Provides options for question types that can be added to the webform
  • Select Question/s to drag and drop into the Central Build area from the Left-hand drawer
    • Drag QUESTION to position in Central Build area
      • Display Drop preview of where Question will sit in BUILD area.
      • Drop preview is dotted colour outline of Question box
      • Drop QUESTION
    • When QUESTION is selected in Left-hand drawer:
  • Logic tab – Currently deactivated

Available Question Types for MVP

• • Text
    • Short Text – 255 character limit
    • Long text – No Limit
  • Choice
    • Multiple Choice
      • Checkbox
      • Radio
    • Dropdown
  • Rating & Ranking
    • Linear Scale
    • Rating
    • Matrix
  • Upload File
    • Upload File

Adding/Editing Questions

• • QUESTION box with Question Input options will sit in Central Build area
    • Active/Selected QUESTION in Central Build area
  • Universal Settings – Apply to all Questions
    • CURSOR – 
      • Should display as an arrow when moving around the screen
      • Text line cursor when hovering over a textfield/area or text input box
      • Hand cursor when hovering over a function/Select option (like delete)
      • Move cursor when dragging and dropping
    • QUESTION ICON
      • Small Icon box located centre left of Question box.
      • Different Icon displays for each Question
      • Icon should represent Question
    • QUESTION
      • Texfeild – Text Question displays in text area
    • DESCRIPTION
      • Textarea – TEXT “Description” displays in Textarea
    • COPY
      • Icon link – Duplicate 
        • If Selected, Question is duplicated.
      • DELETE
        • If selected, Question is removed.
    • REQUIRED
      • The ‘Required’ setting is located at the bottom left of each question box
      • Default when adding a question – Off
      • Required setting ON
        • Select – Circle slides towards ‘Required’ to turn on
        • When ON question has to be answered
        • When ON – highlighted colour
      • Required setting OFF
        • Select – Circle slides away from ‘Required’ to turn off
        • When OFF the question can be left unanswered
        • When OFF – grey (no colour)
        • When OFF – function can still be selected/turned on.
    • DRAG & DROP
      • Drag and drop icon (centre, right hand side of question)
        • Hover over 6 dots icon (right side). The Move cursor will display
        • A Help message will display:
      • “Drag and drop or use arrow keys to re-order the content”
      • Click, hold and drag icon to move position of Question
      • Display Drop preview of where Question will sit in BUILD area.
      • Drop preview is dotted colour outline of Question box
      • Drop QUESTION

Right- Hand Draw

• • Right-hand drawer [ALWAYS VISIBLE when BUILD Tab is selected]
    • When a webform Element is not Active in the BUILD area the Configurations right-hand drawer will display nothing.
    • When a Question in the Central Build area is selected and Active, the Configurations for this Question can be seen AND edited in the Right-hand drawer.

View full video demo