formBuilder v2.1.1


What is formBuilder?

FormBuilder is a library that can be used to create forms online. These forms will be able to accept user input and save the data in varying ways depending on what data-types have been chosen for the input fields.

There are many different input field data-types and each have different filters, validation methods, and options that dictate what kind of data they can or can not accept, and how the input fields will look and behave. These types have been developed to meet the typical needs of what would be desired from an online form, such as a phone number type, an email type, a regular text input type, and many more. If you would like to see a full list of the input types that are available to you with formBuilder please feel free to look ahead to the Data Types section in the User Guide.

It is also possible, if these types do not meet the requirements of what is needed for a form that is being built, to easily design a custom input type by modifying a set of base methods, or developing a regular expression to define what input will be allowed in the new type. A more detailed description of how to do this can be found in the Customization section of the User Guide.

If you would like to see an example of a form that is built using formBuilder, and how the data from that form is saved, feel free to look ahead to our Live Demo.

How is formBuilder used?

FormBuilder is used by creating forms and then initializing them as formBuilder widgets. FormBuilder will construct the form fields automatically. You can then build upon those forms by adding as many different kinds of input as are desired.

If you would like to know how to use formBuilder and see examples of each different input types and how they work, please feel free to look ahead to the User Guide.

For a more in-depth understanding of how to use and manipulate each different available resource in the formBuilder library, please feel free to look ahead to our API Reference

Why should I use formBuilder?

FormBuilder allows you to create complicated input fields on forms by using only one or two lines of code in your html file. By implementing one or two attributes on an input field you will be able to apply large changes to how the field will appear and how it will handle data.

It is also a quick and easy way to be able to eliminate most human error from any online form that you are trying to build. By using input types that have been designed to only accept certain entries you can help to prevent the chance that forms will be submitted to you incorrectly.

FormBuilder is also very easy to understand and implement into your code. The user guide and API reference that have been provided to you are useful tools to be able to understand and see examples of how to build your form using formBuilder. In short, formBuilder is a useful tool that can be used to enhance any online form that you are trying to build.


If you would like to see this project grow, fork the repository on GitHub and make pull requests on the master branch. The guide below will get you going.

If you find a bug or have a suggestion on how to improve formBuilder, please submit an issue and we will take a look at it.

Project Structure


Bower versions are handled using git tags.


To setup the develpment for fomBuilder you will need Git and Node.js with npm.

$ git clone $ cd formBuilder/ $ npm install bower -g $ npm install gulp -g $ npm install $ bower install

To make sure everything is working correctly, try running gulp test. The results should match the latest TravisCI build check.

The recommended editor is Sublime Text 3 with the Markdown Editing, SublimeCodeIntel, SublimeLinter, SublimeLinter-jshint, Jade, and Sass packages.


The build scripts are all run with Gulp and use various node modules. The tests are run using the Karma node module. The commands with :watch will rerun the command when any related file is changed. You must have the Chrome and FireFox installed in order to run tests on them.

Gulp Commands

Gulp Flags

Unit Tests

The unit tests are all written in Jasmine and are located in unitTests/specs/. Each component should have its own test file. All tests files must end in .spec.js.

Use the manual test runner when writing the tests for easy debugging. The tests will use the build/ folder for the formBuilder js and css. You may need to rerun the runner or tweak its test delay settings based on your computer.

The TravisCI build will fail if any test in a given commit fails.


The documentation is written using Jade and Markdown. The About and API Reference pages are generated from markdown, while the Guide page is put together from Jade partials.

The sideNav links must be manually entered into the base jade files. The markdown parser will use the first and second headers for the outer and inner navagation links, respectivly. Anchor names will be in the format outerCategory-innerCategory camel case, matching the header text.




Auto Data Direct, Inc.