WebAppers

/ best free open source web resources /

Graphic Resources

Card.js – Better Credit Card Form in One Line of Code

Posted · Category: eCommerce, Forms, MIT License

Card.js is a better credit card form in one line of code. It will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.

ard ships with pure-CSS cards for Mastercard, Visa, Discover, and American Express. Feel free to use, modify, and distribute this library as much as you’d like under the MIT license.

card-js

Requirements: JavaScript Framework
Demo: http://jessepollak.github.io/card/
License: MIT License

Fort.js – Modern Progress Bar for Form Completion

Posted · Category: Forms, MIT License

Fort.js is a modern progress bar for form completion. All you do is add the form and Fort.js algorithm will take care of the rest. Best of all, it super small.

Using Fort.js is so simple, it’s simple. All you do is insert fort.min.js and fort.min.css into the <head> then pop in an <input> into <div>. Anything outside of the <div> won’t count. Yep, that’s all there is to it. Fort.js does the rest.

fort-js

Requirements: JavaScript Framework
Demo: http://colourity.github.io/sections/
License: MIT License

How to Create Adaptive Placeholders with CSS

Posted · Category: Forms, License Free

Danny King has designed an interactive placeholder thing for his forms and wrote it entirely in CSS. He has shared how he designed that placeholder and how it manages to adapt to user input.

Before he came up with the Adaptive Placeholder, it was just using a normal one. he liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared. The person who enters a value first isn’t always the same person who sees it later. To solve this problem he tried making the placeholder persist through the typing.

palceholder

Requirements: CSS
Demo: http://blog.circleci.com/adaptive-placeholders/
License: License Free

Multiple Selection ComboBox for Bootstrap Themes

Posted · Category: Forms, MIT License

MagicSuggest is multiple selection combobox built for bootstrap themes. it allows room for free entries but also have fixed suggestions loaded dynamically. It supports customized presentation, data fetched through ajax but auto filtered by the component. It is licensed under MIT License.

magic-suggest

Requirements: JavaScript Framework
Demo: http://nicolasbize.com/magicsuggest/
License: MIT License

Quill: Open Source Rich Text Editor with API

Posted · Category: Forms, License Free

Quill was built to address the problem that existing WYSIWYG editors are themselves WYSIWYG. If the editor was not exactly the way you want it, it was difficult or impossible to customize it to fit your needs.

Quill aims to solve this by organizing itself into modules and offering a powerful API to build additional modules. It also imposes no styles to allow you to skin the editor however you wish. Quill also provides all of what you’ve come to expect from a rich text editor, including a lightweight package, numerous formatting options, and wide cross platform support.

quill

Requirements: JavaScript Framework
Demo: http://quilljs.com/
License: License Free

Friendlier HTML Form Controls with CSS Magic

Posted · Category: Forms, MIT License

WTF, forms? provides friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

The file input is the most gnarly of the bunch. They wrap the <input> in a <label> so the custom control properly triggers the file browser. They use :after to generate a custom background and directive. It’s an entirely custom element, all generated via CSS.

custom-forms-inputs

Requirements: CSS
Demo: http://wtfforms.com/
License: MIT License

Highly Customizable Tagging System jQuery Plugin

Posted · Category: Forms, MIT License

TaggingJS is a jQuery plugin to create an highly customizable front-end tag system. It is less than 3 kb and support major browsers in the world. It is licensed under MIT License.

There are several ways to customize the default behavior of taggingJS: 1. Use a JavaScript custom_options object to customize the global taggingJS behavior. 2. Use data attributes in the tagBox HTML Markup. 3. Use a combination of the first two way.

tagging-js

Requirements: jQuery Framework
Demo: http://sniperwolf.github.io/taggingJS/
License: MIT License

Creditly.js – A Sleek Intuitive Credit Card Form

Posted · Category: Forms, MIT License

Creditly.js gives you everything you need in order to create a sleek, intuitive credit card form. Just copy the html, css, and javascript to get an intuitive credit card form in seconds. You get credit card validation using the Luhn algorithm for free.

Whenever an error occurs after you call the validate method on a Creditly object, an event will be triggered on the HTML body element. This event, named creditly_client_validation_error, will contain a data object with the selectors of the inputs that failed validation and also the messages of the failed validation.

credit-cards

Requirements: jQuery Framework
Demo: http://wangjohn.github.io/creditly/
License: MIT License

The Float Labels jQuery Plugin

Posted · Category: Forms, License Free

The Float Label Pattern found his success after Brad Frost wrote a blog post about Float Label Patterns. The idea is based on a Dribbble Shot by Matt D Smith. The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. Float Labels jQuery Plugin offers you the possibility to upgrade your forms with this famous pattern.

float-labels

Requirements: jQuery Framework
Demo: http://clubdesign.github.io/floatlabels.js/
License: License Free

Label Your Form Inputs with jQuery Label Better

Posted · Category: Forms, License Free

jQuery Label Better helps you label your form input like a boss with beautiful animation and without taking up space. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it.

To add this to your website, simply include the latest jQuery library together with jquery.label_better.js into your document’s <head>, and simply call the function. Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested.

jquery-label-better

Requirements: jQuery Framework
Demo: http://www.thepetedesign.com/demos/label_better_demo.html
License: License Free

Page 3 of 16«123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons