Everything needed to make your form elements useful. (jQuery 1.4.2+)
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



jqForms is a small plugin that has been developed based on the jQuery 1.4.2 library. It is meant to give you a customizable form by modifying a small amount of CSS and calling a simple JavaScript command.


Here are all the different ways to have jqForms customize your HTML forms.

Required Files

jquery.jqForms.1.0.1.js jquery.jqForms.1.0.1.css

Basic HTML

    <title>jqForms Example</title>
    <link rel="stylesheet" type="text/css" media="screen, tv, projection" href="jquery.jqForms.1.0.css" />
<form method="post">
    <!-- Your jqForms HTML here. -->
<script type="text/javascript" src="jquery.jqForms.1.0.js"></script>
<script type="text/javascript">

Extra Radio Options

Have a page with tons of radio buttons? Now you can easily group the radio buttons into an easy-to-use interface.

<div class="jqf-extra-radio">
    <div class="jqf-row">
        <input type="radio" name="option" value="1" /> Option 1
    <div class="jqf-row">
        <input type="radio" name="option" value="2" /> Option 2
    <div class="jqf-row">
        <input type="radio" name="option" value="3" /> Option 3
    <div class="jqf-row">
        <input type="radio" name="option-extra" /> Extra Options
        <div class="jqf-extra-radio-children">
            <input type="radio" name="option" value="4" /> Option 4
            <input type="radio" name="option" value="5" /> Option 5
            <input type="radio" name="option" value="6" /> Option 6

Editable Form

This will allow you to turn a block of text elements into an editable form.

<div class="jqf-editable">
    <p class="jqf-editable-out">
        <span id="firstName-out">First</span> <span id="lastName-out">Last</span><br />
        <span id="email-out">Email</span>
    <div class="jqf-editable-form">
        <input type="text" id="firstName" name="firstName" /> <input type="text" id="lastName" name="lastName" /><br />
        <input type="text" id="email" name="email" />
    <a href="#edit" class="jqf-editable-toggle">Edit Form</a>


1.0.4 (2010/10/13)

  • Minor bug fix with callbacks.

1.0.3 (2010/10/13)

  • Added a callback for jqf-editable after clicking the toggle.

1.0.2 (2010/10/11)

  • Added onComplete() callback.

1.0.1 (2010/10/11)

  • Added $.editableForm();

1.0.0 (2010/10/04)

  • Initial Basic Release
  • Contains $.extraRadioOptions();