QuickStart

Get started in 3 minutes

Here’s a simple guide to quickstart with CFE. It covers basic input replacement in 3 easy steps.

  1. Download CFE

    Download and unpack

    Pick the right package according to the framework you want to use on the download page.

  2. Include the CSS and Javascript files

    Include required files

    Include the css in the <head>-section:

    To support the fabulous IE7 insert:

    Add the javascript files right before the (closing) </body>-tag, so your visitor will see the layout fast. I recommended to use the library file provided in the CFE download package (cfe.js: uncompressed for debugging – cfe-minified/cfe.js: yui compressed for production):

    Feel free to create your own compressed version of cfe with the modules you like or add the javascript files uncompressed one by one to your site. If you do so, please mind the dependencies.

  3. Setup CFE

    Configure and run CFE

    To initialize cfe and let the magic happen, you might just use this simple code:

    window.addEvent('domready', function(){
  new cfe.Replace().engage();
});

    For more options, refer to the cfe.autostart.sample.js and/or read the docs.

Tip: If you want to further decrease the bandwith usage of cfe,GZip the compressed file before serving

Custo’s tip for advanced customization of form elements:read ‘Documentation’ for developer docs & API

  • tnt tony

    Bravo! Very nice script!!
    I was just wondering how to launch a function each time an option is selected in a selectbox as the onchange event is not fired when using cfe.

    • mediavrog

      this will be handled by an custom event not yet implemented. please feel free to leave a feature request at sourceforge

  • Anonymous

    could not get this to work whatsoever…
    i keep getting syntax error on mootools file…
    tried it on a totally blank file using the exact settings as your demo page and the one given within the zip file…nothing works…!

    • mediavrog

      maybe you should redownload the mootools file again…

  • Anonymous

    is it possible to only apply the magic to a specific form on a page? i have got 2 different forms on one page, but CFE should only change the apperence of one of the 2 forms…

    • mediavrog

      it its definately possible. have a look at “inside cfe” > “cfe.base”. you may pass an element (e.g. form) to the init-method to limit the “magic” to a specific form; e.g. myCFE.init( {“scope”:$(myCoolForm)} );

  • Anonymous

    Hey love the checkboxes!

    Got a question though – How do make a default selection on a select box?

    • mediavrog

      glad you like it. default selection of select box will get implemented soon – i just have to throw in a few lines of code ^^ regards, maik

      • Anonymous

        Great news Maik! and thanks for the reply. :) Ben

        • mediavrog

          hi, again. i fixed it and will upload it tomorrow..

          • Anonymous

            Far out that is pretty damn awesome and quick too – I had actually 1/2 gone with ryan faits JS forms but was having “select all” checks issues with his.
            Ben Bowes

          • mediavrog

            just released – enjoy and please keep updating me with the bugs you find.. regards, maik

        • Mehedi Hasan

          WOW!! Great Job.

          Thanks
          Mehedi
          http://www.mehedibd.com

  • Steve

    Hey, I downloaded your package, put all the folders on my server as directed in your struction diagram on the right (created a “js” folder to hold the “cfe” folder.

    Added the CSS link in the header, and added the javascript links just before the </body> tag. I noticed that the source on your sample page has the javascript just before the </head> tags so I tried putting it there, but have had no luck.

    I think I might be missing something. Is there something else I need to do beside those 2 steps? Should it automatically change the form elements in the page to the new style.

    Any help would be very appreciated =)

    • mediavrog

      Hi there,

      have a look into cfe.replace.autostart.js. There is an init-call (like cfe.init({scope: $(‘form’)}); <<< you will have to set the scope to your form element.

      $(‘form’) selects the form element with id=”form”

      Hope it helps, if not, please reply again :)
      I would gladly help you.

      Kind regards,
      Maik

  • Guest

    Maik, I followed the steps as Steve did. Also your reply to him doesn’ t seem to be clear. What else do we need to make it work? I have IE 6.0.29, would it be okay? I also tried on Latest MOZILLA FireFox. But doesn’t work…I am sure there is some gap between what the instructions say how to install/how to use AND what actually is needed to make it work…

  • Steve R.

    Hi there,

    having a problem with the latest version of cfe.
    The cfe for a select gets inserted into the dom right after the select. Due to relative positioning of some preceding elements, the options of this select are displayed in the bottom right corner of the page (IE7+).
    Any suggestions?

    It might help to insert the optionlist at the top-level of the dom, are there any options to do that?

    best regards

  • Anonymous

    the selection option does not work in firefox?