Super Useful Tools to Simplify Forms Development

DZone 's Guide to

Super Useful Tools to Simplify Forms Development

In this article, I’ve compiled my favorite tools for speeding up web form creation and development.

· Web Dev Zone ·
Free Resource

Forms are probably the most important part of any website, as they are the main way for your visitors to interact with you. Unfortunately, forms are often complex and take a lot of time to create. In this article, I’ve compiled my favorite tools for speeding up web form creation and development.

jQuery UI

When it comes to forms, the easiest way to enhance them is to use to a well-known jQuery UI plugin. It adds a lot of functionalities to basic HTML5 forms, such as date pickers, autocomplete fields, tabs, and more. A must-use for every form that your visitors are going to love!



Styling forms is often a long task. Pure CSS is a lightweight CSS framework which allows you to create good looking forms in a matter of minutes, with an outstanding support of latest HTML5 specs.


Bootstrap is widely known among front-end developers, and well, there’s really nothing surprising considering how amazing this free tool is. Bootstrap is a complete front-end framework that allows you to save a lot of time when creating forms, as well as any other parts of a website. Tons of nowadays’ websites has been made with the help of Bootstrap. If you haven’t tried it yet, well, you must do it asap!

jQuery Bootstrap Validator

Talking about Bootstrap… what about enhancing its possibilities by coupling it with some jQuery? As its name says, this handy plugin provides a lot of front-end validation options and is specifically designed to work on projects made with Bootstrap.

jQuery Form Plugin

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allow you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!

Pork Form Validation

Creating forms is one thing, validating the sent data is another. Forms are a sensitive part of a website and, as a developer, you must always think about security first. This is why all data sent by forms should be carefully validated.

Pork Form Validation is a PHP class that handles, as you probably guessed, validation of data sent by forms. If you’re using a PHP framework such as CodeIgniter or Cake PHP you won’t need this as those powerful tools already have plenty of tools to validate data, but in the case of a smaller development, I definitely love to save time and hassle by using Pork Form Validation.

Here’s a quick example of how it works:

$validations = array(
 'name' => 'anything',
 'email' => 'email',
 'alias' => 'anything',
 'gsm' => 'phone',
 'birthdate' => 'date');
$required = array('name', 'email', 'alias', 'pwd');
$sanatize = array('alias');

$validator = new FormValidator($validations, $required, $sanatize);

if($validator->validate($_POST)) {
 $_POST = $validator->sanatize($_POST);
 // now do your saving, $_POST has been sanatized.
 die($validator->getScript()."<script type='text/javascript'>alert('saved changes');</script>");
} else {

To validate just one element:

$validated = new FormValidator()->validate('blah@bla.', 'email');

To sanitize just one element:

$sanatized = new FormValidator()->sanatize('<b>blah</b>', 'string');


form builder, web developement

Published at DZone with permission of Jean-Baptiste Jung , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}