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

Archive for the ‘Forms’ Category

jQuery.my is a lightweight jQuery plugin which binds HTML with JS objects (in real-time).

The plugin is form-centric and it is used to validate simple-to-complex forms while making sure every rule and data is in sync.

jQuery.my

jQuery.my catches a moment when a watched control (input) is updated. Once it happens, it applies formatting and checks whether tied controls are to be revalidated and redrawn. Also jQuery.my stores data from the control into JS object and modifies other data if needed.

It is jQuery UI-friendly and requires SugarJS to function (besides jQuery).

Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.

ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

ddSlick jQuery Plugin

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).

There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).

Today, using JavaScript frameworks, it is so easy to accomplish complex stuff with few lines of code, including Ajax.

For forms, if you want to make it much easier, ALAJAX is there for you. It is a jQuery plugin that automagically converts standard forms into Ajaxed ones, no coding required.

jQuery Alajax

Once inserted and the forms are defined, It blocks the default POST functionality, analyzes the input types used and sends them as an Ajax request.

Its code is well commented and leaves space for further customizations (extra actions to be taken before/after submitting).

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

jQuery Knob Control

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minjs

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

jQuery File Upload is an impressive plugin for creating a flexible and user-friendly upload functionality with ease.

The plugin support multiple file selection and drag 'n' drops. It can display a preview of images to be uploaded and progress bars exist to inform users.

jQuery File Upload

jQuery File Upload can handle cross-domain, chunked and resumable file uploads. File types and max-min sizes can be restricted with simple functions and it can work with any server-side language.

There are callbacks on every level and a detailed documentation that covers many different scenarios exists.

Almost every website needs a form. Whether it is for asking visitors to contact you, an online job application or an event registration.

Also, forms need to be secure, user-friendly and the data collected must be reachable for analyzing/responding easily.

Ajax Form Pro, a professional and downloadable PHP application, which was featured before, now has a new version with more features and they are giving away 3 Developer licenses ($67/each) and offering a 20% discount to WRD readers.

Joining the giveaway is so easy, details are mentioned at the bottom of this and here is more information about the app:

Ajax Form Pro Admin Interface

The application has an administration panel for creating a form with:

  • any input types (including file uploads)
  • settings like the text to be displayed (or redirection to any URL) after submission, if the contents of the form will be e-mailed to anyone..
  • custom styling and layout
  • captcha enabled or not

and allows us to integrate it into web pages either with the generated PHP code or via an iframe.

Form can be styled either with the settings provided or using a custom CSS for advanced/complete styling.

Ajax Form Pro - Sample

It is created with usability in mind; the validator is real-time, works as-you-type, forms degrade gracefully for users without JavaScript and an option exists for displaying them inside a lighbox (so you can provide a link to anything which will display the form without leaving the page).

To sum up, Ajax Form Pro is a so useful application not only for creating secure forms but also for keeping/reaching the data collected in a single, organized interface.

A discount for WRD Readers

Ajax Form Pro is offering a 20% discount to WRD readers with the coupon code AFPWRD (which is valid for the next 2 weeks).

Here are the shortcuts to the pages for using the coupon codes:

How to join the giveaway?

In order to get a chance win one of the 3 Developer Licenses, simply comment to this post and winners will be selected randomly with the query below on 8 February 2012 (1 week later):

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

Good luck to everyone.

The winners

Here they are:

  • Kunule (comment #506883)
  • Leon (comment #506936)
  • chromus (comment #506748)

Congratulations and thanks very much for joining.

TextExt is a feature-rich jQuery plugin for improving the functionality of text input fields.

The plugin is modular, can be extended easily and has features like tag inputs, filtering, auto-complete, placeholder text and Ajax (which are all plugins of TextExt).

jQuery TextExt Plugin

It can also display a custom arrow besides select fields, show the items in them as suggestions-while-typing and more.

TextExt is very well-documented, regularly improved and has too many examples to start with.

Validate.js is a very nice JavaScript form validation library that is inspired from the CodeIgniter form validation API.

The library is lightweight (~1kb gzipped), doesn't require any JavaScript frameworks and works in all major browsers (yes, including IE6).

Validation rules that are used frequently like numeric, required, e-mail, less/greater than, etc. are already included and it can be extended with new, custom rules.

Validate.js

It has support for chainable declarations for easily using multiple rules on a single input field.

And, although there are hard-coded warning messages for each rule, they can be overridden with a method provided.

Almost every website uses forms to collect information from users: contact forms, newsletter subscriptions, order forms and many others.

Although creating forms isn't the most difficult task for a web designer/developer, styling them, handling the submissions securely and tracking the submissions can be tricky and time-consuming.

123ContactForm Logo123ContactForm, an impressive web-based form builder application which eases creating and managing forms so much for everyone, is giving away 3 Yearly Platinum licenses ($300 value/each) to WebResourcesDepot readers.

Details on joining the giveaway can be found at the bottom of this post and here is more information about this exciting application:

What is 123ContactForm?

It is a feature-rich web app that makes creating, customizing and consuming any type of forms (simple to advanced) possible.

123ContactForm

Besides standard forms, it has support for creating various special ones like:

  • order forms with payment integration (PayPal, Google Checkout or Authorize.net)
  • surveys for collecting data from a given group
  • event registration with a integrated map

And, there is a templates collection that includes many pre-defined forms like donation form, job application, sales lead, etc. to quickly building them.

123ContactForm has a slick interface with drag 'n' drop support where form fields of any type are easily added or removed.

The look and feel of the output can be selected from a theme gallery or changed/improved by adding custom CSS rules. Also, it is possible to present the same form in multiple languages.

123ContactForm Themes

How forms will behave during the submission can be completely controlled as well with options like:

  • e-mails to be notified, if the page will be redirected to a URL
  • using a captcha or not, blocking any IPs or countries, password protection of forms

Once a form is created, it can be published in many different ways:

  • linking to the form
  • embedding via JavaScript or iframe
  • displaying inside a Lightbox
  • Facebook integration, WordPress plugin and Blogger or Google Sites support

And, you can always track the submissions for each forms, their statistics from a user-friendly dashboard.

The application also integrates well with many other popular apps like Google Docs, MailChimp or SalesForce

To sum up, 123ContactForm is a very good solution for instantly and securely collecting data from web users.

How to join the giveaway?

In order to get a chance to win one of the 3 Yearly Platinum licenses, please mention "what you liked the most about 123ContactForm after trying it" in the comments and winners will be selected randomly using the query below on 25 Oct 2011 (a week later) as an update to this post.

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

Good luck everyone.

Winners (updated on 25 Oct 2011)

Here are the winners of 123ContactForm giveaway:

  • Sam (comment #414089)
  • wites (comment #414574)
  • Jose Adan Ortiz (comment #414002)

Congratulations and thanks very much to everyone for joining.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com