Add automated form submission tracking

[alexanderdean]

For reference:

• https://github.com/CardinalPath/gas
• https://github.com/keenlabs/common-web/blob/master/README.md

Need to define JSON Schemas, JSON Paths, Redshift table defs too.

[fblundun]

We could do this by defining two new events:

• form_changed, for when one of the fields of a form changes. It would capture the new value, id, and maybe classes of the changed element.
• form_submitted, for when the whole form element is submitted. It would capture the id and maybe classes of the submitted form.

[alexanderdean]

Great stuff - thinking semantically, we have:

User changes Form element
User submits Form of N form elements

[fblundun]

The change_form event could also have a formId field tying it to the parent form.

Maybe we should use the element name preferentially over the element id since the name what is used when posting the data: http://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html. And if neither of those exist fall back to the input type, e.g. "radio", or the element type, e.g. "textarea", like this: https://github.com/CardinalPath/gas/blob/b8038ae278880c74f7124fc095fdfe0271f5c5b3/src/plugins/form_tracking.js#L47

The submit_form event could look something like this, where the keys in the "elements" field are the name or id of the inner fields:

{
  "formId": "myForm",
  "formClasses": ["class1", "class2"],
  "elements": {
    "occupation": "systems analyst",
    "age": 30
  }
}

Alternatively we could implement the inner fields as an array, in case of a form with fields without a unique name or id attribute:

{
  "formId": "myForm",
  "formClasses": ["class1", "class2"],
  "elements": [
    {
      "name": "occupation",
      "value": "systems analyst"
    },
    {
      "name": "age",
      "value": 30
    }
  ]
}

[alexanderdean]

Hey Fred! I'd lean towards option 2, but additionally with an enum for the input type?

[fblundun]

Maybe:

{
    "name": {
        "type": "string"
    },
    "value": {
        "type": "string"
    },
    "nodeName": {
        "enum": ["TEXTAREA", "INPUT", "SELECT"]
    },
    "type": {
        "enum": ["text", "radio", "checkbox", ...other input types...]
    }
}

where the "type" field is the type of input in the case where the "nodeName" field is "input". (Textarea and select elements don't have a type.) The "type" field would be optional and the others would be mandatory.

[alexanderdean]

I like!!

[alexanderdean]

Values are inherently stringly typed in HTML forms aren't they...

[fblundun]

Looks like it - even values which are always numbers (e.g. the value of a range input) are stringly typed.

[fblundun]

In the case of a form submission with several radio buttons of which only one can be checked, should we include the unchecked buttons with a value of null or only include the checked button?

[alexanderdean]

Hmm good Q. I don't have a preference - Yali (@yalisassoon) ?