p To get a feel of how formBuilder is used, try out this example. h2 a.anchor(name="demo-form" href="#demo-form") | Form .section form#example(action="#" style="display: none" data-ignore-hidden) p * Represents Required Fields h4 Applicant Information input(type="text" name="personal.name" data-label="Full Legal Name*" data-required) input(type="text" name="personal.birthday" data-label="Birthdate*" data-type="date" data-required) input(type="text" name="personal.phoneNumber" data-type="tmsPhone" data-label="Phone Number") input(type="text" name="personal.email" data-type="email" data-label="Email") .tooltip(title='Why Do We Need This?' name="tool") h1 Not for spam! p. This email will be used to let you know when we have mailed your driver's licence and will send you updates on its delivery status .input-field-group input(type="text" name="personal.location.address" data-label="Street Address*" data-required style="width:300px") input(type="text" name="personal.location.apartment" data-type="number" data-label="Apt" style="width:50px") input(type="text" name="personal.location.city" data-label="City*" data-required) input(type="text" name="personal.location.state" data-type="state" data-label="State*" data-required style="width:50px") input(type="text" name="personal.location.zip" data-type="zip" data-label="Zip Code*" data-required style="width:75px") p Gender input(type="radio" name="personal.physical.gender" data-label="Male" value="male") input(type="radio" name="personal.physical.gender" data-label="Female" value="female") p Physical Characteristics input(type="text" name="personal.physical.eyecolor" data-type="select" data-label="Eye Color" data-default="#0000FF" data-options='[\ {"value":"blue", "label":"Blue"},\ {"value":"green", "label":"Green"},\ {"value":"hazel", "label":"Hazel"},\ {"value":"brown", "label":"Brown"}\ ]') input(type="text" name="personal.physical.haircolor" data-type="select" data-label="Hair Color" data-default="#0000FF" data-options='[\ {"value":"blonde", "label":"Blonde"},\ {"value":"Red", "label":"Red"},\ {"value":"black", "label":"Black"},\ {"value":"brown", "label":"Brown"}\ ]') input(type="text" name="personal.physical.weight" data-type="integer" data-label="Weight" data-postinput="lbs" style="width:30px" data-max='3') .input-field-group input(type="text" name="personal.physical.feet" data-type="integer" data-label="Height" data-postinput="ft" style="width:30px" data-max='1') input(type="text" name="personal.physical.inches" data-type="integer" data-postinput="in" style="width:30px" data-max='2') p Check all that apply to you input(type="checkbox" name="personal.issue.vision" data-label="Do you wear glasses or contact lenses?") input(type="checkbox" name="personal.issue.medicine" data-label="Do you have a physical or mental condition which requires that you take medication?") input(type="checkbox" name="personal.issue.seizure" data-label="Have you ever had a seizure, blackout, or loss of consciousness?") input(type="checkbox" name="personal.issue.special" data-label="Do you have a physical condition which requires you to use special equipment in order to drive?") input(type="checkbox" name="personal.issue.suspended" data-label="Has your license or privilege to drive ever been suspended?") p If you checked any of the above please provide an explanation here (max 250 characters) textarea(rows='5' name="personal.issue.text" style="width:500px" data-max="250") br div(name='personal.family' data-load-widget-as-field='arrayField' data-label="Please provide names of all family members to be listed as next of kin") input(type='text' name="personal.family" data-placeholder='Family Member') br input(type='text' name="personal.appType" data-label='Application Type' data-type='select' data-options='[\ {"value":"license", "label":"Driver\'s License", "showClass":"License"},\ {"value":"permit", "label":"Learner\'s Permit", "showClass":"Permit"},\ {"value":"motorcycle", "label":"Motorcycle License", "showClass":"Motorcycle"}\ ]') br .License input(type="checkbox" name="license.first" data-label="Is this not your first license?") p If you selected the above box please fill out the information below input(type="text" name="license.stateOld1" data-type="state" data-label="In what state was your last license issued?") p Why are you obtaining a replacement license? input(type="radio" name="license.replacement" data-label="Expired License" value="expired") input(type="radio" name="license.replacement" data-label="Lost License" value="lost") input(type="radio" name="license.replacement" data-label="Stolen License" value="stolen") input(type="radio" name="license.replacement" data-label="Damaged License" value="damaged") br .Permit input(type="checkbox" name="learner.minor" data-label="Are you under the age of 18?") p If you selected the above box please provide parental information below input(type="text" name="learner.parents.name" data-label="Guardian Name") input(type="text" name="learner.parents.phone" data-type="tmsPhone" data-label="Guardian Phone Number") .input-field-group input(type="text" name="learner.parents.location.address" data-label="Street Address" style="width:300px") input(type="text" name="learner.parents.location.apartment" data-type="number" data-label="Apt" style="width:50px") input(type="text" name="learner.parents.location.city" data-label="City") input(type="text" name="learner.parents.location.state" data-type="state" data-label="State" style="width:50px") input(type="text" name="learner.parents.location.zip" data-type="zip" data-label="Zip Code" style="width:75px") br input(type="checkbox" name="learner.certify" data-label="Has this guardian given you permission to apply for a permit?") .Motorcycle input(type="checkbox" name="motorcycle.donor" data-label="Do you wish to be listed as an organ donor?") h4 If this is your first motorcycle license please fill out the following information input(type="checkbox" name="motorcycle.test" data-label="Have you taken a motorcycle-driver certification course and passed?") br input(type="text" name="motorcycle.company" data-label="What company did you take your motorcycle-driver certification course with?") br input(type="checkbox" name="motorcycle.twentyone" data-label="Are you over the age of 21?") br h4 If this is NOT your first motorcycle license please fill out the following information input(type="text" name="motorcycle.stateOld" data-type="state" data-label="In what state was your last license issued?") p Why are you obtaining a replacement motorcycle license? input(type="radio" name="motorcycle.replacement" data-label="Expired Motorcycle License" value="expired") input(type="radio" name="motorcycle.replacement" data-label="Lost Motorcycle License" value="lost") input(type="radio" name="motorcycle.replacement" data-label="Stolen Motorcycle License" value="stolen") input(type="radio" name="motorcycle.replacement" data-label="Damaged Motorcycle License" value="damaged") br input(type="checkbox" name="accept" data-label="Agree to terms *" data-required) button(type="submit") Submit Form h2 a.anchor(name="demo-results" href="#demo-results") | Results .section i Events textarea#example-events.resultDisplay(readonly) i Data textarea#example-data.resultDisplay(readonly) h2 a.anchor(name="demo-source" href="#demo-source") | Source .section code(data-mode="html"). //- code(data-title="JAVASCRIPT (without result logging)" data-mode='javascript'). var formExample = $('form#example:first').formBuilder({ beforeset: function(ev) { }, afterset: function(ev) { } }); var saveForm = function(data, done) { // Save data to server $.ajax({ url: 'someserver.com', type: 'POST', data: data, success: function(result) { //handle your server result done(); }, error: function() { //connection error done(); } }); }; formExample.find('button[type="submit"]').submitButton({ color: '#FF0000', beforesubmit: function(ev) { // Runs any presubmission stuff }, submit: function(ev, done) { // Run validation if(!formExample.formBuilder('validate')) { // The form is invalid somewhere done(); return; } saveForm(formExample.formBuilder('get'), done); }, aftersubmit: function(ev) { // Run any post-submission stuff } }); //- code(data-title="JAVASCRIPT (with result logging)" data-mode='javascript'). var events = $('#example-events'); var data = $('#example-data'); var eventNum = 1; var logEvent = function(str) { events.val(events.val()+'\n['+(eventNum++)+'] '+str); events.scrollTop(events[0].scrollHeight); }; events.val('[0] Start'); var formExample = $('form#example:first').formBuilder({ beforeset: function(ev) { logEvent('beforeset called on formBuilder'); }, afterset: function(ev) { logEvent('afterset called on formBuilder'); } }); logEvent('Initialized'); var saveForm = function(data, done) { // Save data to server (setTimeout is just used in the example to simulate the lag time, use $.ajax instead) setTimeout(function(){ // If the server-side save was good, set it back to clean logEvent('server save complete'); done() }, 2000); /* Example server call $.ajax({ url: 'someserver.com', type: 'POST', data: data, success: function(result) { //handle your server result done(); }, error: function() { //connection error done(); } }); */ }; formExample.find('button[type="submit"]').submitButton({ color: '#FF0000', beforesubmit: function(ev) { // Runs any presubmission stuff logEvent('beforesubmit called'); data.val(''); }, submit: function(ev, done) { logEvent('submit called'); // Run validation if(!formExample.formBuilder('validate')) { // The form is invalid somewhere logEvent('has invalid'); done(); return; } logEvent('all valid'); var currData = formExample.formBuilder('get'); data.val(JSON.stringify(currData,null,2)); saveForm(currData, done); }, aftersubmit: function(ev) { // Run any post-submission stuff logEvent('aftersubmit called'); } }); //-