Demo: Simple jQuery Form Builder Demo
Project Zip File: simple-jquery-form-builder.zip
I have been needing to build a simple, jQuery driven form builder for awhile now. Previously, I was using Botsko’s Forbuilder plugin. It worked GREAT those few years back, but now I’m needing something a little bit different for a new project. Visually, you will see similarities between the two formbuilders since that’s all I’ve ever used outside of WordPress — hello Contact Form 7! So shout out to Michael at botsko.net for some of the inspiration. If you are a more advanced, native Javascript developer and need form field template functionality (via dust.js), then check out Botsko’s 2.0 version of Formbuilder on GitHub.
If you need a simple, library free, jQuery focused formbuilder that makes it easy for a beginner or intermediate Javascript developer to dive in and modify, then here you go! This is open source licensed. The MIT license is included and you are free to use this form builder in your projects.
There are no known bugs or compatibility issues, but I’m NOT an advanced Javascript/jQuery developer. I primarily work server side. So there is sure to be room for improvement in the code. Feel free to make suggestions in the comments. Update: placed Simple jQuery Form Builder on Git Hub.
The demo has some php example save/load pages that the ajax uses for database simulation, but PHP is not required. You can use whatever server side language you want for database interaction.
Simple jQuery Form Builder Features:
- jQuery for just about everything.
- AJAX form load, saving, generating, and submitting
- Drag/drop sortable ordering for all form fields:
- Text
- Textarea
- Select
- Radio
- Checkboxes
- Agree (a single “I agree to x terms” checkbox that must be checked in order to submit the form)
- Drag/drop sortable ordering for individual field choices (select options, radio button, check boxes)
- “Required” field option for text, textarea, select, radio fields.
- “Selected” choice option for select, radio, and checkboxes
- No explicitly declared ordering system. Order of fields/choices is determined by the order of the elements in the DOM (when saving) and json (when loading).
- No separate models to maintain while building the form. json is compiled on save.
- json to HTML function with inline form field templates.
- Super easy to modify. Add new field types (like HTML 5’s “Email” or “Password”) in a few minutes.
- 3kb form builder / 3kb form generator (minified).
To do: add a submit handler example function to the demo zip file.