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

Archive for the ‘Forms’ Category

Daniel Raftery of ThrivingKings, a talented web developer, has created and sharing various useful jQuery plugins.

One of them is Formly, a plugin for easily adding cross-browser styling and validation to forms.

Another one is Sticky which enables us to create good-looking notification messages on any corner of a web page. They can be set to auto-close and multiple messages can be displayed at the same time.

jQuery Plugins by ThrivingKings

There is Apprise, a simplistic modal box plugin for displaying alert-like dialogs. It has built-in options to show verification, confirmation and text alerts. Also, these alerts can be set to appear with an animation.

And, the last one is Badger which is a pretty original plugin that can insert a chic badge on any part of an HTML element. The badges can contain any text and a nice way of getting the user's attention and providing information.

Mobiscroll is a "wheel scroller user control" optimized for touchscreens to easily enter date and/or time which comes as a jQuery plugin.

It is highly customizable where values can be anything (including images) and can even be used as an alternative to the default select control (dropdown list).

The plugin's look can be changed easily with theming support and has ready-to-use good-looking skins (default, Android, Sense UI and iOS).

And, it integrates well with other JS frameworks including jQuery Mobile.

Mobiscroll jQuery Plugin

Ideal Forms is a lightweight framework, built on the top of jQuery, for creating good looking and user-friendly forms.

It converts standard <input> elements into ones with rounded corners having an attractive focus effect. And, radio + checkbox elements are completely customized.

No images are used, they requires minimal HTML syntax and can be completely styled with CSS (comes with 3 themes).

The framework is unobtrusive and degrades gracefully with JavaScript disabled.

jQuery Ideal Forms

ExColor is a jQuery plugin for enabling users to select colors from a Photoshop-like color picker.

It is attached to <input> fields and can be activated by simply calling a single-line function.

The color picker's design is so flexible as every element used in the picker comes with 10 different design options to select from.

Also, a web-based editor helps choosing each design element, their colors and various other options to create a unique look.

jQuery ExColor Color Picker Plugin

Combogrid is a jQuery plugin for adding advanced auto-complete functionality to input fields.

As the user types, it displays the list of possible results dynamically inside a paginated grid interface.

Requests are sent via Ajax and results are returned in JSON (or JSONP for cross-domain requests) datatype.

jQuery Combogrid Plugin

There are many options provided like the ability to setup alternate row colors, auto-choosing the result that matches the query, minimum length of the text before the grid is activated and more.

Also, it is ThemeRoller-ready and there is keyboard support for navigating through the items.

Flexi is a lightweight (4.3kb) color picker that doesn't use any images (thanks to SVG/VML), CSS or 1px hacks but only JavaScript.

It is a standalone script that doesn't require any JavaScript frameworks and can pass the color selected in hexadecimal, HSV and RGB formats.

The dimensions, position of the picker and slide area can be fully customized in CSS just like any other div element.

Flexi Color Picker

JSColor is a simple and very easy-to-implement JavaScript library that transforms any given input into a color picker.

The picker is a hidden layer, doesn't use any pop-ups and can be positioned on any side of the input field.

JSColor

It has 2 modes; HSV (hue saturation, value) or HVS, can be set to display a default color on initial load and its look can be customized.

There are functions provided for showing/hiding the color picker and it can generate RGB or HSV values from a HEX input.

Building good-looking HTML forms which work well in every browser and applying client+server-side validation usually takes a serious development time.

Zebra_Form, a free PHP library, handles this process very well and enables us to create secure and chic forms with a few lines of PHP code.

The output can be generated either with the ready-to-use styles (with valid HTML) or with any new/custom ones.

Zebra_Form

An integrated cross-site scripting prevention mechanism removes any possible malicious code submitted. It also helps preventing automated spam submissions.

The client-side validation is handled with jQuery, alerts are displayed inside tooltips and many validation types can be used (like "required, e-mail, length, etc.").

Besides standard input types, Zebra_Form supports Ajax-like file uploads, date-time pickers and captchas.

  • Tags:
  • Filed under: Forms, Goodies, LGPL License
  • 1 Comment
  • Ajax Form Pro, a professional PHP script for creating Ajaxed forms easily, is giving away 5 Extended Licenses ($47/each) to WRD readers.

    There is also a special discount offered where all the details can be found at the end of this post.

    What is Ajax Form Pro?

    It is an advanced yet easy-to-use PHP script for quickly building Ajaxed and real-time validated forms of any type (like contact forms, employment forms, etc.).

    Using Ajax Form Pro, it is possible to use every input type within the forms (textboxes, textareas, single/multiple selects, checkboxes, radios) and style them completely with CSS. Also, file upload feature is on the way.

    The script can be used to create multiple forms on the same page or different pages

    Ajax Form Builder

    Every field is validated as-the-user-types where notifications are shown/hidden instantly. Like many other features, this is also optional.

    For a minimized number of spam messages and a secure form, there is a flexible and built-in CAPTCHA.

    Once a form is submitted, e-mails can be sent either with the mail() function or through SMTP. They can also be sent to the appropriate contacts depending on the category selected (or to multiple recipients without disclosing all the addresses to each one) and a copy can be e-mailed to the end-user.

    It has ready-to-go creative uses like Lightbox integration and forms inside sliding interfaces (from top or left-side).

    Ajax Form Pro is unobtrusive, will convert to a standard form if JavaScript is disabled and still function properly.

    It is well-documented, comes with all the source code and has a full list of demos.

    Simply, a handy resource that simplifies a time-consuming process and makes creating an unlimited number of forms for yourself and your customers a breeze.

    The special discount

    Update: The discount code is expired.

    Ajax Form Pro is offering a 30% discount to WRD readers when the discount code "wrd" is used.

    The code is valid by now and will be active only for few weeks.

    How to win the licenses?

    In order to win one of the 5 Extended licenses given away, simply comment to this post and winners will be selected randomly with the query below on 18 April 2011 (1 week later):

    SELECT * FROM wp_comments WHERE comment_post_id=2188 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 5

    Good luck to all.

    jQuery File Upload is a plugin for the popular JavaScript framework that helps handling file uploads.

    The plugin is based on open standards like HTML5-JavaScript and doesn't use Flash. For legacy browsers it falls back to an Ajaxed-like iframe-PHP solution.

    jQuery Drag Drop File Upload

    Multiple files can be selected, they can even be drag 'n' dropped from the desktop and the upload process can start automatically or with an event (like clicking the "upload" button).

    A progress bar can display the status and uploads can be canceled anytime.

    It is possible to use multiple instances of the plugin in the same page and jQuery File Upload is compatible with any server-side application platform.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com