Create And Handle HTML Forms With jQuery Reform.js Plugin

The Reform.js jQuery plugin provides an easy way to create and handle forms with a modern approach in mind.

Features custom styles, AJAX form submit, form validation and more.

How to use it:

1. Create the form fields using the following CSS classes:

<!-- Normal Input -->
<input type="text" name="name">
<input type="submit" value="Submit">

<!-- Grouped Checkboxes -->
<form>
  <div class="rf-group rf-group-single">
    <label class="rf-checkbox rf-req">
      <input type="checkbox" value="sample-1" name="checkbox">
      <p>Sample 1</p>
    </label>
    <label class="rf-checkbox rf-req">
      <input type="checkbox" value="sample-2" name="checkbox">
      <p>Sample 2</p>
    </label>
    <label class="rf-checkbox rf-req">
      <input type="checkbox" value="sample-3" name="checkbox">
      <p>Sample 3</p>
    </label>
  </div>
  <input type="submit" value="Submit">
</form>

<!-- Select Box -->
<form>
  <label class="rf-select">
    <p>Sample</p>
    <select placeholder="Please select ..." name="select">
      <option value="option-1">Option 1</optionv>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select>
  </label>
  <input type="submit" value="Submit">
</form>

<!-- Form Validation -->
<form>
  <label>
    <p>Normal</p>
    <input type="text" name="name">
  </label>
  <label class="rf-req">
    <p>Required*</p>
    <input type="text" name="required">
  </label>
  <label class="rf-req rf-val">
    <p>E-Mail*</p>
    <input type="email" name="email">
  </label>
  <label class="rf-req rf-val">
    <p>Website*</p>
    <input type="url" name="ulr">
  </label>
  <label class="rf-req rf-val" rf-val="phone">
    <p>Phone*</p>
    <input type="text" name="phone">
  </label>
  <input type="submit" value="Submit">
</form>

2. Include jQuery library and the jQuery Reform.js script at the bottom of the page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="/dist/reform.js"></script>

3. Attach the Reform.js to your HTML forms.

var reform = $('form').reform();

4. The example CSS to beautify the form controls.

label+label, button { margin-top: 1em }

label, button {
  display: block;
  width: 400px
}

button {
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 5px 10px;
  line-height: 24px;
  border-radius: 3px;
  background: white;
  border: 1px solid #ccc;
  border: none;
  color: white;
  font-weight: 500;
  background: black;
  text-transform: uppercase
}

label { position: relative }

label p { padding-bottom: .5em }

label input, label textarea, label select {
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 5px 10px;
  line-height: 24px;
  border-radius: 3px;
  background: white;
  border: 1px solid #ccc
}

label input:focus, label textarea:focus, label select:focus {
  outline: none;
  padding: 4px 9px;
  border: 2px solid black
}

label.rf-select::after {
  width: 10px;
  right: 12px;
  content: '';
  height: 10px;
  bottom: 14px;
  display: block;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 4px solid black;
  border-bottom: 4px solid black
}

label.rf-error p { color: #ff5252 }

label.rf-error input {
  padding: 4px 9px;
  border: 2px solid #ff5252
}

label.rf-error .rf-error-info {
  right: 7px;
  bottom: 5px;
  font-size: 12px;
  padding: 5px 0 0;
  position: absolute
}

label.rf-checkbox input { display: none }

label.rf-checkbox p {
  cursor: pointer;
  margin-left: 35px;
  position: relative
}

label.rf-checkbox p::before {
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  background: #ccc;
  border-radius: 5px;
  left: -35px;
  top: -3px
}

label.rf-checkbox p::after {
  top: -8px;
  opacity: 0;
  left: -26px;
  width: 10px;
  content: '';
  height: 20px;
  display: block;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 4px solid black;
  border-bottom: 4px solid black
}

label.rf-checkbox input:checked+p::after { opacity: 1 }

label.rf-checkbox.rf-error p::before { background: #ff5252 }

5. All default options to handle the HTML forms.

var reform = $('form').reform({

    // jQuery AJAX options
    ajax: {},

    // where to send the form data
    url: null, 

    // or 'json'
    convert: 'serialize',

    // enable/disable debug mode
    debugMode: false,

    // or 'de'
    lang: 'en',

    // localization strings
    localization: {
      en: {
        errorMinLength: 'Please enter at lease 2 characters.',
        errorValidationUrl: 'Web url not valid.',
        errorValidationEmail: 'Email address not valid.',
        errorValidationPhone: 'Phone number not valid.'
      },
      de: {
        errorMinLength: 'Bitte geben Sie mindestens 2 Zeichen an.',
        errorValidationUrl: 'Web-URL nicht gültig.',
        errorValidationEmail: 'E-Mail Adresse nicht gültig.',
        errorValidationPhone: 'Telefonnummer nicht gültig.'
      }
    },

    // for ajax
    type: 'post',  

    // validation options
    validation: { 
      minLength: 2,
      displayRequireErrorInfo: false,
      displayValidationErrorInfo: true,
      submitOnRequireError: false,
      submitOnValidationError: false
    }
    
});

6. Event handlers available.

reform.on('rf-send-before', function(e, parent) {
  // before sending data
});

reform.on('rf-send-after', function(e, parent, result) {
  // after sending data
});

reform.on('rf-validation-before', function(e) {
  // before validating form
});

reform.on('rf-validation-after', function(e, errorFound) {
  // after validating form
});

reform.on('rf-validate-custom', function(e, validationType, element) {
  // when a custom value is placed in the rf-val attribute
});

reform.on('rf-initialize', function(e) {
  // on initi
});

Changelog:

2018-08-20

• v1.0.10

2018-07-21

• Added missing ':'

---

This awesome jQuery plugin is developed by danielneubert. For more Advanced Usages, please check the demo page or visit the official website.