Customer feedback quickly and easily -
Traffic Light Feedback

Archive for the ‘Forms’ Category

Ketchup is an easy-to-customize (in means of appearance & functionality) jQuery plugin for validating user inputs on the client-side.

The plugin works by inserting the validation rules inside the markup, just like:

<input type="password" id="new_pass" class="validate(required)" />

Ketchup jQuery Plugin

It comes with a bunch of ready-to-use rules, including: required, min/max length, number, URL, e-mail & much more where new ones can be created as well.

Using Ketchup, it is possible to combine validations (a field can be both required & e-mail).

Although the default setup of the plugin is very satisfactory, like mentioned, it is possible to create a new look & feel (which is easy with the documentation provided).

Formwizard is a jQuery plugin which can instantly convert your standard forms into wizard-like interfaces.

Once it is applied, users will be able to fill the form step-by-step (which is nice for big forms) & it becomes possible to show different steps according to the input values.

jQuery Formwizard

It only requires a few markup updates like wrapping every step with elements that has id tags: "firstStep, "secondStep", etc & adding class tags: "step".

Formwizard also plays nice with the popular validation & form plugins that will help enabling client-side form validation & Ajaxed submissions.

Plupload is a very flexible, feature-rich & open source file uploader that enables you to upload files using:

  • HTML5 Gears
  • Silverlight
  • Flash
  • BrowserPlus
  • normal forms

It can be used via the JavaScript API or the ready-to-go jQuery plugin.

Plupload has great features like image resizing, displaying upload progress, drag'n drop, multiple file uploads, unique filename generation, max-file-size limit & more.

Plupload

As expected, it has a server-side file to handle the uploads (PHP file is included with the download).

It is possible to define multiple runtimes (Flash, HTML5 Gears, etc) in the code. The uploader will check their availability in the configured order & select the most appropriate method.

The library is very well-documented & comes with various examples.

It is mostly challenging to build table-less, semantic forms that look good & work cross-browser.

RMSforms is a CSS framework for making this process easier.

RMSforms CSS Framework

Considering forms are a list of elements, the framework uses unordered lists for grouping items & style them accordingly.

The layout of the forms & how labels are displayed can be set to be horizontal or vertical by simply updating CSS classes used.

The demo shows outputs of multiple combinations to better see what can be accomplished with RMSforms CSS framework.

PassShark is a MooTools class for masking password fields similar to iPhone: showing the last typed character for a while & masking it later.

It is an install-then-forget solution as after inserting the passshark.js file into your website, the class will be finding the password fields automatically & applying the masking.

MooTools iPhone-Like Passwords

PassShark has few option like defining the "interval it checks for the newly enteres characters" or "the character inputs are replaced with".

It is an unobtrusive class & works in all major browsers.

AJAX Upload is a free script for easily impelementing Ajaxed upload interfaces.

It comes with ready-to-use server-side code for PHP, ASP.NET & Coldfusion.

Ajax Upload Script

The script doesn't require any JS library to run & compatible with any of them (the example code uses jQuery).

As the upload function is fired with JavaScript, it is possible to use any object/image as the upload button which makes stying much easier.

AJAX Upload provides access to every level of the upload process (before, after, onComplete) for a better customization.

Simply-Buttons v2 is a technique to create good-looking & cross-browser buttons that is inspired from:

CSS Buttons

The buttons are created with pure CSS and, optionally, improved with JavaScript (code is provided).

They fit to any text & come with 3 states: inactive, active and hover.

P.S. Their compatibility is tested on IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC).

Chroma-Hash is a jQuery plugin that aims to offer a better password input experience.

The Problem:

A standard password field replaces the entered characters with "●" characters. The problem is "we never know if we made a typo or not until the form is submitted & a reply is received from the server".

Chroma-Hash

The Solution:

Chroma-Hash, "converts the values entered" into a colored visualization.

A user filling the password field can easily recognize that if the colors are the usual equivalents of the password or not. And, anyone who sees the colors won't have any idea what the actual password is.

The script can also be used to visualize password confirmations (password & confirm password fields).

P.S. A detailed info on the method & security concerns can be found at the developer's related post.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • 4 Comments
  • Validatious is an unobtrusive & easy to use JavaScript form validation library that does not depend on any JS frameworks.

    It has built-in validators like numeric, e-mail, URL, max/min char, etc. & custom ones can be created.

    JavaScript Form Validation

    Using the library, it is possible to create chained validation rules like: validate( "email".is("required").andIsAn("email") );.

    How and when Validatious does validation, how it displays errors & more can be controlled.

    The library supports multilingual error messages with the help of a language file or overriding pre-built ones.

  • Tags:
  • Filed under: Forms, Goodies
  • 2 Comments
  • GBCF-v3 is a free PHP form script that offers a nice level of accessibility & security.

    The script has a valid semantic markup & does not use JavaScript. It is screen-reader optimized & keyboard friendly.

    PHP Form Script

    In means of security, the form asks a question to the user & expects the right answer to complete the submission. Also, an anti-flood control option can be activated to prevent multiple submissions from an IP & the number of blocked attempts can be seen.

    The script is smart in many ways like "changing a form legend of a form also changes the e-mail sent" or no need of using the "back button" to fix the errors.

    It is multilingual, has 20+ ready-to-use language files & can be customized easily via CSS.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • 2 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    • PSD to HTML
    • PSD to HTML
    • PSD to HTML
      MailChimp
      activeCollab | Project Management

    Vivvo CMS - Web Publishing at your Fingertips