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

Archive for the ‘Forms’ Category

Twitter has open sourced a very nice project named Typeahead.js for building smart auto-complete form fields.

It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling.

Typeahead.js

The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

Typeahead.js simply converts any textfield into an auto-complete field, accepts JSON as the data source and has various settings for optimizing remote requests (rate limiting, maxConcurrentRequests, etc.).

Dropzone.js is a JavaScript library that simplifies creating a drag ‘n’ drop file upload functionality.

It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Multiple files can be uploaded at the same time where previews of images can be displayed as well.

Dropzone.js

There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.

And many events exist for interacting with the drag-drop and upload status.

Parsley is a JavaScript library, that can work with both jQuery or Zepto, for validating forms so easily.

It is built with UX concerns in mind and tries to simplify details for the user.

There are most of the frequently-used validation rules built-in like e-mail, required, min/max or “equals”.

Parsley.js

Also, there is support for “remote validations” which can send Ajax requests and validate the data according to the response returned (like checking usernames/e-mails from the database when registering users).

Parsley works with HTML5 data attributes so you actually never write JavaScript with it, everything is inline.

The messages to be displayed, styles and functionality can be almost fully customized.

And, it is lightweight in size + well-documented with demos.

  • Tags:
  • Filed under: Forms, Goodies, Other License
  • 0 Comments
  • Range sliders are very useful UI elements when it comes to selecting min-max values.

    jQRangeSlider is a jQuery and jQuery UI-powered slider plugin that has support for both numerical values and date/time.

    jQuery Range Slider - jQRangeSlider

    It works within a given range of values and can be set to use custom steps (like 10-by-10 or week-by-week).

    The plugin works well on touch devices (accept mouse wheels too), can be themed with CSS (there are 2 built-in themes) and provides callbacks for each change in values for interacting easily.

    Everyone has a method for handling forms but it usually gets complicated when there are file uploads in that form.

    Fine Uploader is a plug 'n' play script that ease file uploads and improve usability with the Ajaxed interface.

    The script was known as valums-file-uploader (was featured at WRD) and deserves a 2nd shot with the improvements it had.

    Fine Uploader

    It only requires us to insert a CSS + JavaScript file and the rest is taken care of on the server-side with your favorite scripting language. No worries, ASP.NET, ColdFusion, Java, Node.js, Perl, PHP, Python implementations are offered in the download package.

    Uploader can be the standard "file input" or it has support for drag 'n' drop uploads as well.

    Also, there are options to limit the file size, file types, number of files and more.

    There are various form validation plugins for jQuery and very good ones exist between them.

    Many of them have lots of features and, if you are looking for a simplistic one, Happy.js can be a good alternative.

    Happy.js - jQuery Form Validation Plugin

    The plugin is lightweight and supports few input validations by default (required, date, number, e-mail, min/max and phone number). But it can be extended so easily by adding few lines and the regex for the rule you want.

    Its styling in case of an error is smartly thought. Any non-validated elements get a custom class. Also, a <span> element is added for each non-validated item so that an error text can be displayed.

    And, Happy.js works with Zepto.js as well.

    FileDrop is a JavaScript class for quickly creating drag 'n' drop file upload interfaces.

    The class doesn't require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

    FileDrop

    It has support for multiple file uploads, there are callbacks on many events and any number of FileDrop uploaders can be used in the same page.

    Also, the size of the class is lightweight (3.5 gzipped) and its API is well-documented.

    For the last few months, with Devrim,  we were very busy working on a new project which focuses on easing the web development tasks of any web person (so, the title is a little self-promotion but not an exaggeration -: )-).

    It is called ioDeck and launched, built with PHP and it is installed into (runs from) a single website and serves its features to any number of websites.

    Like said, it focuses on easing web development tasks and we started simplifying the biggest headache for many: forms (the most simple looking yet complicated web elements).

    PHP Form Builder - ioDeck

    Creating a simple form is not a big deal but integrating validations (on the client-side and server-side), sending the contents via e-mail, recording it to a database and having an interface for viewing them later requires serious effort. And, if this form has many fields (like a HR form), this gets worse.

    ioDeck is an intuitive form builder where a form of any type can be created within seconds. It simply allows you to insert form elements (textfields, radio buttons, select boxes, buttons, etc.), set the validations, re-order the items with drag 'n' drops and build any simple-to-complicated form so quickly.

    There are many built-in validation rules (required, e-mail, URL, min, max..), they are validated both with JavaScript + PHP and there is support for reCaptcha for spam protection.

    ioDeck Form Builder

    You can also define the default values of a field and set a CSS class for it to customize it.

    ioDeck is so good in notifying users when a form is submitted. It can send the notifications via e-mail (with PHP mail() or SMTP authentication), Twitter and Facebook. Btw, you can create and customize the templates of these notifications so they look exactly as you want and reflect your brand.

    Also, forms can display a custom message and redirect to a given URL after submissions.

    Once the form creation is complete (it really takes seconds, give it a try in the demo), we can go to the embed menu and select its look from a list of styles (the forms HTML structure uses Twitter Bootstrap's form structure which is so flexible to customize). Or select a bare-bones version to customize it yourself completely.

    After that, simply choose the embed method that fits to you the best:

    • a shortened URL to the form (in case you want to share the form via Twitter, e-mail, etc.)
    • embedding via JS or iFrame
    • getting the HTML code of the form (for max customization)

    And, voila! A fully-functioning, customizable and secure form is ready for collecting submissions.

    ioDeck Dashboard

    When a submission occurs, you (+ your customers, friends..) will be notified, these submissions will also be stored and can be viewed from ioDeck anytime.

    As mentioned in the beginning, ioDeck will ease multiple tasks. Forms was the 1st app, 2nd app will be Newsletter for sending unlimited newsletters to your lists (and e-mail fields of forms). Let's keep the 3rd app as a surprise. ioDeck is priced $69 one time fee (no monthly payments), a "use it forever" license and comes with 6 months of free upgrades + support. And, any future apps will have their own prices.

    P.S. By clicking the "Demo" in ioDeck, you get a full-featured custom installation that will be available for 48 hours so that you can play with it.

    Early Birds Special For WebResourcesDepot readers

    First of all, thanks very much for being an awesome reader of WRD.

    And, here is an "Early Birds Discount Link" for WRD readers that will bring down the price to $59 for the next 1 week.

    Looking to hear your feedback and have a great day!

    Proto.io, a mobile prototyping service, has created a handy generator for quickly creating on/off flipswitches.

    The switches are built with pure CSS3 and it is possible to customize the look completely.

    CSS3 On/Off Switch

    It also comes with pre-defined styles for iOS4, iOS5 and Android as well.

    P.S. In order to add functionality to such a control, it would be a good idea to listen to the "state" of the switch and add our custom events accordingly.

  • Tags:
  • Filed under: Forms, Goodies, No License
  • 0 Comments
  • Usually in web apps, when we want to collect color values from users, color pickers help a lot. And, there are various high-quality color pickers out there.

    colorjoe is a new one which differentiates itself by being completely scaleable which is great for responsive layouts.

    colorjoe - JavaScript color picker

    It doesn't use any images, can be customized with CSS and works with all major formats (RGB, HSL, HSV or CMYK).

    The color picker is standalone and has 2 callbacks: change (which is triggered continuously to detect value changes) and done (which is fired when a color is selected).

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com