formify

Formify creates a vitual form model based on the formify class to make nodes "contenteditable". Do single updates or whole page content updates via form submission though traditional or ajax methods. Build the content view without having to do all the extra work of editable content.

Click here to Demo

• Will support json schema generation
• third party tools like formvalidation.io
• is very light weight with no dependancies only at 5k !

Simply add the class .formify, data-formify="", and title:

• submit
• reset
• button
• radio
• checkbox
• range
• select
• number
• url
• date
• email
• tel
• text
• textarea
• contenteditable

Methods:

Formify.init() - initalizes formify
Formify.showForm() - shows all form inputs
Formify.hideForm() - hides all form inputs
Formify.showContent() - Shows all contenteditable content
Formify.hideContent() - hides all contenteditable content

Formify.submitForm( method, action, callback ) - submits the virtual form
Method: Defines which HTTP method to use when submitting the form. Can be GET (default) or POST. Use callback for Ajax or custom submission.
Action: The URI of a program that processes the information submitted via the form.
Callback: Optional Callback method for custom submission.

Formify will take any node and make a form element of it to create a vitual form and submit. This makes it so you only need to create the view and the contenteditable sections can then just be declaired.

All you have to do is add the class "formify" to whatever you want to turn into a form item. Set data-formify to an input type (ex: text, texarea, date, select, etc.). Also, formify uses the "title" attribute to set the input's name for submission.

Text Input

  
    <span class="formify" data-formify="text" title="Name">Michael Guild</span>
  

Select

  
    <span class="formify" data-formify="select" title="department">Development</span>
    <datalist id="department">
    <option value="Development">Development</option>
    <option value="HR">HR</option>
    <option value="Special Ops">Special Ops</option>
    </datalist>
  

Radio

  
    <span class="formify" data-formify="radio" title="relationshipstatus">Single</span>
    <datalist id="relationshipstatus">
    <option value="Single">Single</option>
    <option value="Taken">Taken</option>
    <option value="Dragon">Dragon</option>
    </datalist>