AJAX Forms Application


Main Objective

This application aims to allow end users to create custom forms via an easy-to-use drag-and-drop interface and manage/export the submitted data 


The application will allow users to create custom forms via a 3 step wizard. Users will be able to drag-and-drop form elements into place and edit them, the resulted form being generated live.
When a form is filled in, a user will have the option to hide his submission to others/track it/ watch it/ etc


  • Step 1 - Describe your application
    • Application Name - the desired title for the form visible to the users
    • Application Icon - allow users to upload an icon for their forms
    • Application Description
  • Step 2 - Define the structure of your application
    • Have a list on the right portraying all the available form elements structured by type in categories. Users will drag-and-drop these into their respective places.
    • Every element is inserted into its own block which contains a Title and an optional Description/hint/subtitle of what it is supposed to represent
    • Elements will have the ability to be moved/edited once added by having a menu appear once they are clicked (menu containing edition/update/delete options/fields)
    • Once an element is updated, the final form is updated
    • Import/export functionality for the form data/submissions
    • Email notifications(can be disabled): both for the creator of the form to receive a notification once a submission occurs or (optionally) a day/week summary of submissions. As for user, notifications on updated of the state of his submission (accepted/rejected/ etc )
    • Privacy setting on forms
    • Have an API for accessing the data
    • Each submission is stored in its own document
    • Each form is stored in its own space ( 1forms/space only )
  • Step 3 - Customize homepage presentation
    • List entries on the homepage: true/false
    • Entries livetable fields: (have a dynamically created list of the form's fields)
    • Entries livetable options:
      • Enable excel support on livetable: true/false
      • Hide edit buttons on homepage: true/false


Detailed Functionality

  • Element types/categories:
    • Standard
      • Heading
      • Textbox
      • Textarea
      • Number
      • Dropdown ( with option for allowing multiple selections )
      • Check box
      • Radio button
    • Pickers
      • Date
      • Time
      • Image
      • Attachment
      • Single Page
      • Multiple Pages (can't this and the above be included in a "Page" input which will have an option for "allow multiple selections" or not?)
      • Single User
      • Multiple Users ( same question as single/multiple pages )
    • Advanced
      • Single static list
      • Multiple static list
      • Single Database list
      • Multiple Database lis
  • Elements global options:
    • Title:
    • Subtitle/Hint
    • Required: true/false
    • Error message
  • Elements specific options:
    • Text elements:
      • Default:
      • Placeholder (html5):
      • Min length: 0
      • Max length: 0 (infinite)
      • Validation: have a list of predefined validation types like email, numbers only, text, date only and (maybe) also allow a regexp pattern?
    • Multiple list elements:
      • Min selections: 0
      • Max selections: 0(infinite)
    • File upload elements:
      • Size
      • Extension
  • Submitting data
    • Users fill in the required field and hit submit. Error notifications are displayed if required otherwise a success message is outputted
  • Viewing submissions
    • Submissions will be visible/sortable/exportable via the livetable
  • Settings
    • General
      • Form Name
      • Form Owner (allow affiliates to send notifications to multiple adresses?)
      • Form Description
      • Form status: Open/Closed
    • Privacy settings for the form
      • Public
      • Visible for specific users/group of users
    • Notifications
      • New Submission Notification: Instant/Daily/Weekly/None
  • Search
    • It is done via the livetable


(advanced) Conditional layout: Have a different form depending on previous selected options. i.e. You have a Radio list to select gender and have certain field appear/disappear depending on if the user is a male of female

Further Work


Two classes will be used: FormClass and SubmissionClass

  • A Form is a document with an object of FormClass attached. When a form is added a space is also created which will contain the form document and all its submission documents
  • A Submission is a document with an object of SubmissionClass attached. Every time a submission is made/modified the Property specific to that input is also made/modified in the Form document (i.e. you drag a textArea into the form and set its options => a textarea Property is also created in the Form document)

FormClass Properties:

  • name (Name: text): the title of the form
  • description (Description: text): the description of the form
  • privacy (Privacy: static list): set the calendar to be public(visible to everyone) or visible to specific users
  • shareList (Share Form: user list): if privacy is set to visible for specific users, this list will contain the users who can view it
  • owner (Owner: user): the user who owns the calendar

Form class sheets:

  • FormViewSheet: contains the form and all its elements
Created by Stefan Mirea on 2011/06/23 13:25

Get Connected