stickypages/formbuilder

The very best jQuery form builder

formbuilder

jQuery and HTML5 Form Builder. Crafted with love by 1Byte Beta.

Demo: http://www.1bytebeta.com/projects/formbuilder/

About

I always admired Wufoo's form builder. It's much simpler than other services such as Google Forms.

In both of our recent projects at 1Byte Beta, we needed to integrate a form builder. I found a couple of great solutions on GitHub but they didn't work the way I wanted them to work so I decided to start a new project.

This form builder allow users to create simple web forms by dragging and dropping form elements. When users save the form, the plugin serialise the active state of the form to a JSON string so it can be saved and later rendered. Also included is a formLoader PHP class that convert the JSON string back into a usable web form. If you're not sure, take the demo for a test drive.

Requirements

I tried to keep it as light as possible.

• jquery - The jam.
• dustjs - Template engine for Javascript.
• tabs - Minimal tabs plugin I wrote specifically for this plugin.

How to use

It's really easy to get started. First you need to include the required libraries at the bottom of your HTML page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="src/libraries/dust-js/dust-core-0.3.0.min.js"></script>
<script src="src/libraries/dust-js/dust-helpers.js"></script>
<script src="src/libraries/tabs.jquery.js"></script>
<script src="src/formBuilder.jquery.js"></script>

Then, you can initialise the plugin using an empty div container.

<script>
      $('#form-builder').formBuilder({
        load_url: '/src/json/example.json',
        save_url: '/demo/save.php'
      });
</script>

Options

load_url - This URL is called on form init. It needs to return a JSON string containing the existing form structure that was previously generated by the form builder.

save_url - This URL is called through AJAX when a user saves the form. It passes a parameter [formData] using POST request.

Callbacks

onSaveForm - Called when a user saves the form.

$('#formBuilder').formBuilder({
      onSaveForm: function() {
        // The form has been saved! Create an alert and notify the user here...
      }
});

License

The MIT License

Copyright (c) 2008-2014 1Byte Beta [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.