Friday, May 21, 2010
JOT FORM Easiest Form Builder
How It Works:
- Drag & drop fields to form
- Save your form
- Copy HTML to your web site
- Get responses by email
No crippleware. No ads.
Unlike similar services JotForm does NOT cripple features, show ads or show a logo on your form. All features are available to Free users. You only need to upgrade to Premium version if you receive a lot of submissions on your forms.
Why JotForm?
Powerful Online Survey Creator, Simple and Free
Questionform is a web application for creating, publishing and analysing online surveys and forms.
1. It is easy and fun, with drag and drop and a few clicks, you can build powerful online surveys in no time.
2. Easily integrate the survey with your web page, blog or send by email and track who has responded.
3. Track your survey responses in real time, analyse the results, create reports and export the data to your favorite spreadsheet
Monday, May 17, 2010
Qtip Improving Your Website Look and Feel
qTip.
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all... it's completely free under the MIT license!
Jquery Combobox
A combobox is technically a 'Select' HTML element. A combobox is also be known as a drop down list.
This control was written due to the fact that the standard Select element cannot be styled, or is limited in what can be styled.
For instance, in Internet Explorer 6, the individual items in the list (HTML Options) are very restricted in styling, allowing only the background-color and color and a few other CSS properties.
The other reason for creating this control is the need for a simple way of setting up a control. Other custom comboboxes are not so easily setup, requiring technical knowledge before-hand.
The custom combobox relies on the jquery library, without which, this control would not have been created. The jquery library allows a developer to focus on the problems of your specific requirements rather than focus on technical issues surround cross-browser standards and the like.
note: at the moment the jquery.combobox behaves as a dropdown list and not a full combbox. it does not currently accept text input.
This control was written due to the fact that the standard Select element cannot be styled, or is limited in what can be styled.
For instance, in Internet Explorer 6, the individual items in the list (HTML Options) are very restricted in styling, allowing only the background-color and color and a few other CSS properties.
The other reason for creating this control is the need for a simple way of setting up a control. Other custom comboboxes are not so easily setup, requiring technical knowledge before-hand.
The custom combobox relies on the jquery library, without which, this control would not have been created. The jquery library allows a developer to focus on the problems of your specific requirements rather than focus on technical issues surround cross-browser standards and the like.
note: at the moment the jquery.combobox behaves as a dropdown list and not a full combbox. it does not currently accept text input.
features
- easy to set up
- control over style of combobox using CSS
- supports keyboard navigation
- cross-browser support with firefox 2, internet explorer 6 and opera 9*
- different style of animation for dropdown
- original Select html control is still available for access and control and reflects the user's selection
- works the same with forms and server-side form processing, retaining the original control's ID and updated values
requirements
Make image buttons a part of input fields
If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have "embedded" image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.
Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.
If you want to add some functionality to some input field (like adding a calendar icon that will popup some calendar), you would probably do it like on the image below.
The code could look like this:
<fieldset id="sampleForm">
<label for="txtName">Full name</label>
<input id="txtName" type="text" />
<label for ="txtDOB">Date of birth</label>
<input id="txtDOB" type="text" class="inputWithImge" />
<img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
<label for="txtCity">City</label>
<input id="txtCity" type="text" />
<label for="txtPostCode">Post code</label>
<input id="txtPostCode" type="text" />
<label for="txtCountry">Country</label>
<input id="txtCountry" type="text" />
<label for="txtBank">Bank</label>
<input id="txtBank" type="text" class="inputWithImge" />
<img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button> And we could have CSS classes like these: body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type="text"] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; } However, your clients want it to be like on the image below. Image button has to be a part of an input field and everything has to be aligned. 
So what could you do? You can wrap input field and image button in some div and set black border to that wrapper div. You will also have to remove border form input field, and make it a little bit shorter, so that image can fit inside the wrapper div.
But if you work on applications that have tens of forms, there is a probability you will have to do this tens or even hundreds of times. Insane, really.
But, remember jQuery?
You can add just one line of the code to make it work on all of your pages. Ok, here is the explanation so pay attention because this might sounds tricky.We want to find a set of two elements (input field and image) that repeats in the fieldset and wrap it inside the div. How to find these sets? This is what jQuery will do. We'll assign a class to each input field that we want to wrap. That class will also remove border form input field. So, here is the HTML code:
<fieldset id="sampleForm">
<label for="txtName">Full name</label>
<input id="txtName" type="text" />
<label for ="txtDOB">Date of birth</label>
<input id="txtDOB" type="text" class="inputWithImge" />
<img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
<label for="txtCity">City</label>
<input id="txtCity" type="text" />
<label for="txtPostCode">Post code</label>
<input id="txtPostCode" type="text" />
<label for="txtCountry">Country</label>
<input id="txtCountry" type="text" />
<label for="txtBank">Bank</label>
<input id="txtBank" type="text" class="inputWithImge" />
<img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button> and this is what jQuery has to do: $(document).ready(function() {
$(".inputWithImge").each(function(){
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
}); All that is left to do is to add two more classes that will define styles for our wrapper div and input field that will be wrapped. .imageInputWrapper{ width:200px; border:solid 1px #000; }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}Download Sample Code Here
Pretty Check boxes
How to use
Nothing is easier to use. First include the jQuery library then include the prettyCheckboxes javascript in the head of the page(s) where you want to use prettyCheckboxes.
Pixelmatrix Design For Form Elements
As a UI designer, I have to deal with form controls quite a bit. I hate how I can’t make selects, checkboxes, and radio buttons look consistent in all the browsers, so I wrote a plugin to solve just that. Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.
It works by hiding the original form elements using opacity, and wrapping div and span tags around the elements. Then, as the different events take place, the plugin applies certain classes to the elements. I’ve seen this method used a few places on the web, but never as an accessible, easy-to-use jQuery plugin.
Uniform supports the major browsers other than IE6, which has an issue due to the way they draw their form controls. In the case of IE6, it just ignores the form elements, so you can still use the form the same way. IE7 works perfectly.
There is a demo here that you can use to see what you could do. The demo utilizes Progressive Enhancement to style the form controls, which means that Safari and Firefox show a nicer version of the controls, but you could style them however you like. I suggest using Progressive Enhancement or utilizing CSS sprites of some type.
This plugin is very 1.0, so don’t expect it to be 100% perfect. If you find a bug, please email me and i’ll take a look at it.
The code generated looks like this:
It works by hiding the original form elements using opacity, and wrapping div and span tags around the elements. Then, as the different events take place, the plugin applies certain classes to the elements. I’ve seen this method used a few places on the web, but never as an accessible, easy-to-use jQuery plugin.
Uniform supports the major browsers other than IE6, which has an issue due to the way they draw their form controls. In the case of IE6, it just ignores the form elements, so you can still use the form the same way. IE7 works perfectly.
There is a demo here that you can use to see what you could do. The demo utilizes Progressive Enhancement to style the form controls, which means that Safari and Firefox show a nicer version of the controls, but you could style them however you like. I suggest using Progressive Enhancement or utilizing CSS sprites of some type.
This plugin is very 1.0, so don’t expect it to be 100% perfect. If you find a bug, please email me and i’ll take a look at it.
The code generated looks like this:
Subscribe to:
Posts (Atom)
Posts
