Nowadays many web developers use server side frameworks that allow to create very secure forms with background logic and then render them easily on the view. Normally, these forms don't allow dynamic forms (with new non-registered fields) unless you specify such behaviour in the logic. This can be very tricky though, so if you are willing to create dynamic forms in your project you may want instead to store the structure generated by a client side form builder and then render the forms according to it instead of a server side structure like a database.
In this article, we want to share you 5 of the most useful client side form builders that work either standalone or with jQuery.
5. Bootstrap 2 and 3 Form Builder
This Form Builder allows you to create an HTML structure from Bootstrap 2 and 3 components that can be easily dragged and dropped into your form. Created By Adam Moore to help take the stress out of writing all that markup to get bootstrap forms together. The original version of this was a big jQuery spaghetti mess, so as of March 2013 it has been rewritten using backbone.js and takes advantage of underscode.js templates. If you have a problem, or want a specific snippet added please check out the github project. Note, this is only a simple tool so I'm not that keen on adding many features (eg. saving/exporting forms, embedding forms etc).
This Bootstrap Form project shows how to create a component on your project to Drag and Drop Elements and design a form and from its structure retrieve an HTML structure. With this project you can:
- Support single / 2 column layouts.
- Edit html on individual elements.
This project is a very simple and useful implementation of a Form Builder with jQuery (and jQuery UI), Bootstrap that can be easily implemented on your project. Although the general structure of the project isn't thought as a plugin, you can make of it a plugin by extracting the necessary files and retrieving the generated structure in the codemirror instance.
- Extensible builder with plethora of options
- Simple drag & drop interface
- Column layouts
- Custom fields
- Preview mode
- i18n support
- Customizable - enable only the fields you need, use your own notifications append or prepend content and more.
- Bootstrap ready but not dependent
- Export the structure of the form in JSON or XML
formBuilder usage grows so it needs to be available in multiple languages. Additions and updates to existing languages are always welcome in the project, so don't forget to take a look to the Contributing Languages for details. formBuilder and formRender are available directly from GitHub and through yarn/npm.
Formbuilder is a graphical interface for letting users build their own webforms. Formbuilder.js only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users' responses is all up to you. If you're using Rails, there is also Formbuilder.rb, a Rails engine that's designed to provide this server-side functionality.
- Renders a JSON schema as a webform and hooks up that form to the Form.io API's
- Complete Form Builder which creates the JSON schema used to render the forms.
- Nested components, layouts, Date/Time, Select, Input Masks, and many more included features
If you know another awesome plugin/framework/project that allows you to design forms in the client side, please share it with the community in the comment box.