Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Forms’ Category

Creating a well-functioning form, how simple or complicated it is, requires a serious effort as it has various ingredients including (cross-browser) design, validation, and usability.

jFormer, a form framework built on top of jQuery brings a complete, easy-to-use and solid solution to handling them.

jFormer - jQuery Form Framework

It enables us to build forms which are validated on client-side and server-side (PHP solution is included) with Ajax requests where users are notified in a very chic way with tooltips and CSS-styling on every level.

The framework has advanced features like cloning forms and/or form fields, dividing a form into pages, creating dependencies and much more.

Default styles for every part of a form is already included and they can be customized/improved further quickly with CSS.

Naked Password is a jQuery plugin which helps encouraging web users to enter stronger passwords, in a fun way.

With a single-line-function, it adds a notification to any password field where a pixelated-lady gets naked according to the password entered.

Naked Password jQuery Plugin

A very good thing about how the plugin functions is that it doesn't require that much of an extra space to notify users. So, it can fit to many live forms without breaking anything.

Also, the images displayed can be changed with any others if you prefer to keep the site not-naked : ).

HTMLform.com is a free web application which enables anyone to design forms online and get the source files (HTML/CSS/JS/PHP).

Without the need of a registration process, you can instantly start setting up a form with:

  • any form field (including file uploads)
  • tooltips for every item
  • validation rules (with regex support)

HTMLform.com

Besides standard form items, captcha (re-captcha) can also be added for minimizing spam.

Every data submitted is kept in a PHP flatfile database engine and with a password login you'll be able to (the script is provided with the download of the designed form):

  • browse the records entered
  • exporting them into a CSV or Excel file

Also, optionally, you can get notified via e-mail every time a new entry is submitted.

HTMLform.com has built-in support for multilanguage forms and there are many features offered for more flexible outputs.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • 2 Comments
  • jQuery.validVal is plugin for the popular JS framework which aims to simplify form validation.

    It can be used for validating any kind of HTML form (including Ajaxed ones) and works by defining the rules within class names.

    jQuery validVal

    There are 3 default validations included ("required", "numeric" and "email-format") and new ones can be included by defining new regular expressions.

    A very nice built-in invalid handler helps calling-to-action on invalid fields and its behaviours can be quickly changed or improved.

    Sometimes, a static form is not enough as we may want to make it possible for user to define a flexible number of addresses, phones, e-mails, etc.

    This is where SheepIt!, a jQuery plugin comes in. It allows cloning form fields dynamically where end-users can easily decide to insert a new field (or remove a manually inserted one).

    Multiple form elements can be added at the same time and there are callbacks provided for each events (before/after the insertion of elements).

    SheepIt! jQuery Plugin

    Signature Pad is a jQuery plugin which transforms an HTML form into a canvas where users can draw their signatures.

    It has 2 modes:

    • TypeIt mode where the user’s signature is automatically generated as HTML text and styled with @font-face from the input field where the name is typed.
    • DrawIt mode where the users can draw their signatures on the canvas element.

    Signature Pad jQuery Plugin

    The signature submitted is stored as a JSON array which makes re-generating it possible.

    And, the plugin doesn't need to be used as its name suggests, you can ask users to draw anything and store it easily.

    We all know that forms look different in every operating system, browser and even some browser versions.

    Formalize is a CSS framework that aims to bring a solution to this issue by providing more consistent styling and functionality for them.

    Formalize

    It doesn't make them look all the same, rather, keeps some characteristic differences but focuses on finding the medium by picking the best parts from each.

    These include a slight inset on items, similar looking buttons (including the button tag), light blue :focus border and more.

    Also, the HTML5 placeholder and autofocus attributes work for browsers that doesn't support them with the help of jQuery.

    Agile Uploader is a free file uploader that works very fast by resizing them on the client-side and uploading afterwards.

    The resizing process is done via a Flash file and it can handle both single and multiple files.

    Agile Uploader

    The uploader's submit button is not inside the Flash file so it can be customized and there are various JS callbacks provided (there is also an optional jQuery plugin).

    Flash part is also flexible as it has settings like styling or resize-quality.

    Agile Uploader also comes with sample PHP files for the upload process.

    HTML5 has a built-in validation that doesn't require any JavaScript. However, currently, it only works in Webkit browsers and can't be used in Firefox, Opera or IE.

    jQuery.Html5form is a jQuery plugin that adds the lacking HTML5 form validation features to non-compatible browsers.

    jQuery HTML5 Form

    It doesn't require any custom functions or coding. Just create your form with the HTML5 syntax and it'll execute them automatically.

    Optionally, the plugin offers features to help customizing how the errors will be handled like the the error messages, where they'll be displayed, their styles, etc.

    And, it works with multiple forms on the same page as well (each of them can be customized differently).

    ColorPicker is an advanced and highly customizable JavaScript color picker that doesn't rely on any JS frameworks.

    It can display the entire color palette (~16.78 mil. colors) in 6 different color modes.

    Advanced JavaScript Color Picker

    The picker 4 different sizes; from simple to the most advanced one and has 9 color memories (just like the ones in image editing apps.).

    The script is totally skinnable with CSS and it is draggable (can be disabled) for an easier use.

    ColorPicker can calculate the web smart/web safe versions of a selected color and much more.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com