FancyForm

Overview

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It's accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

At a glance

• Quick Setup: Only two lines of markup needed
• Completely Extendible: Numerous customization options
• Degrades Gracefully: Forms still work on older browsers

How to Use

Easy Install

1. Add the following anywhere in your website:

   <script type="text/javascript" src="js/mootools.js"></script>
   <script type="text/javascript" src="js/moocheck.js"></script>

2. Add CSS styles on your website to specify the appearance of the checkboxes and radio buttons. Add styles for the classes checked and unchecked for checked / unchecked checkboxes respectively, and likewise use the classes selected and unselected for radio buttons that are checked / unchecked.

Expecting more steps? Sorry to disappoint ;)

Advanced Styling

Note: The FancyForm.start() function is called at the bottom of moocheck.js inside a window.addEvent block. If you're using the techniques described in this section, make sure you either replace this call or add the options to it.

More with Mootools

FancyForm uses the ultra-lightweight Mootools JavaScript framework. Mootools 1.2 is included in the download for FancyForm with Element/Element.Style, Utilities/DomReady and their dependencies. You may want to download Mootools for yourself if you plan to use more of it's features in your website.

Limiting fancification

If you don't want to apply styling to every checkbox and radio button on your page, pass in an array containing the elements you want to style as the first argument for FancyForm.start() near the bottom of moocheck.js. For example,

var chkBoxes = new Array();
chkBoxes[0] = document.getElementById('fancy-box');
chkBoxes[1] = document.getElementById('other-fancy-box');
FancyForm.start(chkBoxes);

Since Mootools is being used, you can also use the $$ function and specify CSS selectors, such as:

FancyForm.start( $$('#content .fancy-form input') );

Leave this parameter or pass in 0 if you want the script to target all applicable checkboxes and radio buttons.

Adding checkboxes

You can add additional inputs to be styled using the FancyForm.add function. This can be used, for example, if you dynamically create checkboxes or radio buttons.

FancyForm.start( 0, {
    onClasses: {
        checkbox: 'checked',
           radio: 'selected'
        },
    offClasses: {
        checkbox: 'unchecked',
           radio: 'unselected'
        }
} );

var f_onClasses = {
	checkbox: 'f_checked'
}
var f_offClasses = {
    checkbox: 'f_unchecked'
}
FancyForm.start( 0, {
    onClasses: f_onClasses,
    offClasses: f_offClasses
} );

FancyForm.start( 0, {
    onClasses: ['f_checked'].associate(['checkbox']),
    offClasses: ['f_unchecked'].associate(['checkbox'])
} );

FancyForm.start( 0, {
    extraClasses: {
        all: 'fancy'
    }
});

// setting extraClasses: 1 is the same as using...
FancyForm.start( 0, {
    extraClasses: {
        checkbox: 'f_checkbox',
        radio: 'f_radio',
        on: 'f_on',
        off: 'f_off',
        all: 'fancy'
    }
});

FancyForm.start( 0, {
	onSelect: function(chk){
		alert(chk.inputElement.getProperty('name'));
	}
});

FancyForm.start( 0, {
	onDeselect: animateCheckbox
});

function animateCheckbox(chk) {
      var el = chk.inputElement;
	console.log(el.getProperty('name')+' deselected');
	doSomeOtherThing(el);
	fadeOut(el);
}

Support

I don't see any difference before and after adding the script.

Firstly, make sure you've actually applied some styles for the FancyForm classes (see How to use).

If you have any other JavaScript on your site, check if you're getting any Javascript errors. If there is an error, it may give you an indication about where the conflict is occurring.

Don't forget, the script degrades gracefully on old browsers like Mac IE5.

Why doesn't element.checked = true work?

After changing a checkbox's state, update the display by calling FancyForm.update(element.getParent()) (where element is your checkbox).

Can I use this script with an older version of MooTools?

For compatibility with MooTools 1.11, make the following changes:

Find all:
.combine(

Replace with:
.merge(

---

Find all:
.get('tag')

Replace with:
.getTag()

How much does this script cost?

Nothing. You may use it in any way you wish, as long as proper attribution is provided. A link to my site would be appreciated.