Create And Handle HTML Forms With jQuery Reform.js Plugin

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.

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
});

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

  • Publication date: 06.07.2018
  • Source