Super useful tools to simplify forms development

Super useful tools to simplify forms development

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!

Info/Download

PureCSS.io


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.
Info/Download

Bootstrap


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 a.s.a.p.!
Info/Download

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 especially designed to work on projects made with Bootstrap.
Info/Download

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 allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!
Info/Download

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 handle, 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 case of a smaller development I definitely love to save time and hassle by using Pork Form Validation.

Here’s a quick example about how it works:

$validations = array(
    'name' => 'anything',
    'email' => 'email',
    'alias' => 'anything',
    'pwd'=>'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 {
    die($validator->getScript());
}

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');

Info/Download

Enjoyed this article? Please consider donating: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK