Trellis Development (a parent company of web-based products which I co-founded) has been developing a custom content management system which needed a form creation tool. I adapted a form builder that I created for a previous project as a jQuery 1.3 plugin. It loads in existing form structure data through an XML file (which would be generated on the server) and passes the changes as a serialized array back to the server.
View the Demonstration
Get source from github
I’ve forked the code from the cms to serve as a stand-alone plugin. It’s extremely easy to setup, as all you need to do is to activate it on an un/ordered list item element. Then, write your backend code to handle the incoming array as you need, and output the xml data for when the form loads.
- <ul id="form-builder"></ul>
<ul id="form-builder"></ul>
- $(document).ready(function(){
- $('#form-builder').formbuilder({
- 'save_url': 'save.php',
- 'load_url': 'form-a.xml'
- });
- });
$(document).ready(function(){
$('#form-builder').formbuilder({
'save_url': 'save.php',
'load_url': 'form-a.xml'
});
});
The save_url is the url that the ajax will be sent to when the user saves the form. The form information is serialized so that the backend programming may handle it as an array.
The load_url is the url of an xml file that describes any existing form information, and the system uses it to restore the fields.
This requires jQuery 1.3+ and uses the scrollTo plugin for nice scrolling.
This is the first revision that’s external to our cms so I’ve labeled it 0.1.