FIX Enhance JS for multiple userform instances (#715)

After testing it seems that having multiple user defined forms on a page
has already been added as a feature. However various load time dynamically
generated javascript segments had not been adapted to suit. Now they
have.

Also fixed a variable that no longer exists in the external requirements
from preventing a webpack build.

client/dist/js/userforms.js

@@ -1 +1 @@
-!function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,r){"use strict";var n=r(3),i=r.n(n),o=r(2),s=r.n(o);i()(document).ready(function(t){function e(e){return this.$el=e instanceof t?e:t(e),this.$el.find("h4").text(s.a._t("UserForms.ERROR_CONTAINER_HEADER","Please correct the following errors and try again:")),this}function r(r){var n=this;return this.$el=r instanceof t?r:t(r),this.$elButton=t(".step-button-wrapper[data-for='"+this.$el.prop("id")+"']"),this.viewed=!1,this.valid=!1,this.id=null,this.hide(),u.DISPLAY_ERROR_MESSAGES_AT_TOP&&(this.errorContainer=new e(this.$el.find(".error-container")),a.$el.on("userform.form.error",function(e,r){n.$el.is(":visible")&&t.each(r.errorList,function(e,r){n.errorContainer.updateErrorMessage(t(r.element),r.message)})}),a.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeErrorMessage(e)})),this.$elButton.on("userform.field.hide userform.field.show",function(){a.$el.trigger("userform.form.conditionalstep")}),this}function n(e){var r=this,n=this;return this.$el=e instanceof t?e:t(e),this.$buttons=this.$el.find(".step-button-jump"),this.$jsAlign=this.$el.find(".js-align"),this.$buttons.each(function(e,i){t(i).on("click",function(e){e.preventDefault(),n.$el.trigger("userform.progress.changestep",[parseInt(t(r).data("step"),10)])})}),a.$el.on("userform.form.changestep",function(t,e){n.update(e)}),a.$el.on("userform.form.conditionalstep",function(){var e=n.$buttons.filter(":visible");e.each(function(e,r){t(r).text(e+1)}),n.$el.find(".progress-bar").attr("aria-valuemax",e.length),n.$el.find(".total-step-number").text(e.length)}),this.$jsAlign.each(function(e,r){var i=t(r),o=100/(n.$jsAlign.length-1)*(e+"%"),s=i.innerWidth()/2*-1;i.css({left:o,marginLeft:s}),e===n.$jsAlign.length-1?i.css({marginLeft:2*s}):0===e&&i.css({marginLeft:0})}),this.update(0),this}function i(e){var r=this;return this.$el=e instanceof t?e:t(e),this.$prevButton=this.$el.find(".step-button-prev"),this.$nextButton=this.$el.find(".step-button-next"),this.$prevButton.parent().attr("aria-hidden",!1).show(),this.$nextButton.parent().attr("aria-hidden",!1).show(),this.$prevButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.prev")}),this.$nextButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.next")}),a.$el.on("userform.form.changestep userform.form.conditionalstep",function(){r.update()}),this.update(),this}function o(r){var n=this,i=this;return this.$el=r instanceof t?r:t(r),this.steps=[],this.errorContainer=new e(this.$el.children(".error-container")),this.$el.on("userform.action.prev",function(){i.prevStep()}),this.$el.on("userform.action.next",function(){i.nextStep()}),t("#userform-progress").on("userform.progress.changestep",function(t,e){i.jumpToStep(e-1)}),this.$el.on("userform.form.valid",function(t,e){i.errorContainer.removeStepLink(e)}),this.$el.validate(this.validationOptions),t(".optionset.requiredField input").each(function(){t(n).rules("add",{required:!0})}),this}var a=null,u={},l={show:function(){this.$el.attr("aria-hidden",!1).show()},hide:function(){this.$el.attr("aria-hidden",!0).hide()}};e.prototype.hasErrors=function(){return this.$el.find(".error-list").children().length>0},e.prototype.removeErrorMessage=function(t){this.$el.find("#"+t+"-top-error").remove(),this.hasErrors()||this.hide()},e.prototype.addStepLink=function(e){var r=e.$el.attr("id")+"-error-link",n=this.$el.find("#"+r),i=e.$el.attr("id"),o=e.$el.data("title");n.length||(n=t('<li id="'+r+'"><a href="#'+i+'">'+o+"</a></li>"),n.on("click",function(t){t.preventDefault(),a.jumpToStep(e.id)}),this.$el.find(".error-list").append(n))},e.prototype.removeStepLink=function(e){var r=t("#"+e).closest(".form-step").attr("id");this.$el.find("#"+r+"-error-link").remove(),this.$el.find(".error-list").is(":empty")&&this.hide()},e.prototype.updateErrorMessage=function(e,r){var n=this,i=e.attr("id"),o="#"+i,s=i+"-top-error",a=t("#"+s),u=e.attr("aria-describedby");if(!r)return void a.addClass("fixed");a.removeClass("fixed"),this.show(),1===a.length?a.show().find("a").html(r):(e.closest(".field[id]").each(function(){o="#"+t(n).attr("id")}),a=t("<li><a></a></li>"),a.attr("id",s).find("a").attr("href",location.pathname+location.search+o).html(r),this.$el.find("ul").append(a),u?u.match(new RegExp("\\b"+s+"\\b"))||(u+=" "+s):u=s,e.attr("aria-describedby",u))},r.prototype.conditionallyHidden=function(){return!this.$elButton.find("button").is(":visible")},n.prototype.update=function(e){var r=t(t(".form-step")[e]),n=0,i=e/(this.$buttons.length-1)*100;this.$buttons.each(function(r,i){return!(r>e||(t(i).is(":visible")&&(n+=1),0))}),this.$el.find(".current-step-number").each(function(e,r){t(r).text(n)}),this.$el.find("[aria-valuenow]").each(function(e,r){t(r).attr("aria-valuenow",n)}),this.$buttons.each(function(e,r){var i=t(r),o=i.parent();if(parseInt(i.data("step"),10)===n&&i.is(":visible"))return o.addClass("current viewed"),void i.removeAttr("disabled");o.removeClass("current")}),this.$el.siblings(".progress-title").text(r.data("title")),i=i?i+"%":"",this.$el.find(".progress-bar").width(i)},i.prototype.update=function(){var t=a.steps.length,e=a.currentStep?a.currentStep.id:0,r=null,n=null;for(this.$el.find(".step-button-prev")[0===e?"hide":"show"](),r=t-1;r>=0;r--)if(n=a.steps[r],!n.conditionallyHidden()){this.$el.find(".step-button-next")[e>=r?"hide":"show"](),this.$el.find(".Actions")[e>=r?"show":"hide"]();break}},o.prototype.validationOptions={ignore:":hidden,ul",errorClass:"error",errorElement:"span",errorPlacement:function(t,e){t.addClass("message"),e.is(":radio")||e.parents(".checkboxset").length>0?t.appendTo(e.closest(".middleColumn")):e.parents(".checkbox").length>0?t.appendTo(e.closest(".field")):t.insertAfter(e)},invalidHandler:function(t,e){setTimeout(function(){e.currentElements.filter(".error").first().focus()},0)},submitHandler:function(e){var r=!0;a.currentStep&&(a.currentStep.valid=t(e).valid()),t.each(a.steps,function(t,e){e.valid||e.conditionallyHidden()||(r=!1,a.errorContainer.addStepLink(e))}),r?(t(e).removeClass("dirty"),e.submit()):a.errorContainer.show()},success:function(e){var r=t(e).attr("id"),n=r.substr(0,r.indexOf("-error")).replace(/[\\[\\]]/,"");e.remove(),a.$el.trigger("userform.form.valid",[n])}},o.prototype.addStep=function(t){!t instanceof r||(t.id=this.steps.length,this.steps.push(t))},o.prototype.setCurrentStep=function(t){t instanceof r&&(this.currentStep=t,this.currentStep.show(),this.currentStep.viewed=!0,this.currentStep.$el.addClass("viewed"))},o.prototype.jumpToStep=function(t,e){var r=this.steps[t],n=!1,i=void 0===e||e;if(void 0!==r){if(r.conditionallyHidden())return void(i?this.jumpToStep(t+1):this.jumpToStep(t-1));n=this.$el.valid(),this.currentStep.valid=n,!1===n&&!1===r.viewed||(this.currentStep.hide(),this.setCurrentStep(r),this.$el.trigger("userform.form.changestep",[r.id]))}},o.prototype.nextStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)+1,!0)},o.prototype.prevStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)-1,!1)},function(){var n=this,i=t(".userform");if(0!==i.length){u.ENABLE_LIVE_VALIDATION=void 0!==i.data("livevalidation"),u.DISPLAY_ERROR_MESSAGES_AT_TOP=void 0!==i.data("toperrors"),!1===u.ENABLE_LIVE_VALIDATION&&t.extend(o.prototype.validationOptions,{onfocusout:!1}),u.DISPLAY_ERROR_MESSAGES_AT_TOP&&t.extend(o.prototype.validationOptions,{invalidHandler:function(t,e){i.trigger("userform.form.error",[e])},onfocusout:!1}),t(".userform-progress, .step-navigation").attr("aria-hidden",!1).show(),t.extend(r.prototype,l),t.extend(e.prototype,l),a=new o(i),u.HIDE_FIELD_LABELS&&i.find("label.left").each(function(){var e=t(n);t('[name="'+e.attr("for")+'"]').attr("placeholder",e.text()),e.remove()}),a.$el.find(".form-step").each(function(t,e){var n=new r(e);a.addStep(n)}),a.setCurrentStep(a.steps[0]),t(document).on("click","input.text[data-showcalendar]",function(){var e=t(n);e.ssDatepicker(),e.data("datepicker")&&e.datepicker("show")}),setInterval(function(){t.ajax({url:"UserDefinedFormController/ping"})},18e4);var d=t("form.userform");void 0!==d.areYouSure&&d.areYouSure({message:s.a._t("UserForms.LEAVE_CONFIRMATION","You have unsaved changes!")})}}()})},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r(0)},function(t,e){t.exports=i18n},function(t,e){t.exports=jQuery}]);
+!function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,r){"use strict";var n=r(3),i=r.n(n),o=r(2),s=r.n(o);i()(document).ready(function(t){function e(e){return this.$el=e instanceof t?e:t(e),this.$el.find("h4").text(s.a._t("UserForms.ERROR_CONTAINER_HEADER","Please correct the following errors and try again:")),this}function r(r){var n=this;return this.$el=r instanceof t?r:t(r),this.$elButton=t(".step-button-wrapper[data-for='"+this.$el.prop("id")+"']"),this.viewed=!1,this.valid=!1,this.id=null,this.hide(),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&(this.errorContainer=new e(this.$el.find(".error-container")),u.$el.on("userform.form.error",function(e,r){n.$el.is(":visible")&&t.each(r.errorList,function(e,r){n.errorContainer.updateErrorMessage(t(r.element),r.message)})}),u.$el.on("userform.form.valid",function(t,e){n.errorContainer.removeErrorMessage(e)})),this.$elButton.on("userform.field.hide userform.field.show",function(){u.$el.trigger("userform.form.conditionalstep")}),this}function n(e){var r=this,n=this;return this.$el=e instanceof t?e:t(e),this.$buttons=this.$el.find(".step-button-jump"),this.$jsAlign=this.$el.find(".js-align"),this.$buttons.each(function(e,i){t(i).on("click",function(e){e.preventDefault(),n.$el.trigger("userform.progress.changestep",[parseInt(t(r).data("step"),10)])})}),u.$el.on("userform.form.changestep",function(t,e){n.update(e)}),u.$el.on("userform.form.conditionalstep",function(){var e=n.$buttons.filter(":visible");e.each(function(e,r){t(r).text(e+1)}),n.$el.find(".progress-bar").attr("aria-valuemax",e.length),n.$el.find(".total-step-number").text(e.length)}),this.$jsAlign.each(function(e,r){var i=t(r),o=100/(n.$jsAlign.length-1)*(e+"%"),s=i.innerWidth()/2*-1;i.css({left:o,marginLeft:s}),e===n.$jsAlign.length-1?i.css({marginLeft:2*s}):0===e&&i.css({marginLeft:0})}),this.update(0),this}function i(e){var r=this;return this.$el=e instanceof t?e:t(e),this.$prevButton=this.$el.find(".step-button-prev"),this.$nextButton=this.$el.find(".step-button-next"),this.$prevButton.parent().attr("aria-hidden",!1).show(),this.$nextButton.parent().attr("aria-hidden",!1).show(),this.$prevButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.prev")}),this.$nextButton.on("click",function(t){t.preventDefault(),r.$el.trigger("userform.action.next")}),u.$el.on("userform.form.changestep userform.form.conditionalstep",function(){r.update()}),this.update(),this}function o(r){var n=this,i=this;return this.$el=r instanceof t?r:t(r),this.steps=[],this.errorContainer=new e(this.$el.children(".error-container")),this.$el.on("userform.action.prev",function(){i.prevStep()}),this.$el.on("userform.action.next",function(){i.nextStep()}),t("#userform-progress").on("userform.progress.changestep",function(t,e){i.jumpToStep(e-1)}),this.$el.on("userform.form.valid",function(t,e){i.errorContainer.removeStepLink(e)}),this.$el.validate(this.validationOptions),t(".optionset.requiredField input").each(function(){t(n).rules("add",{required:!0})}),this}function a(n,i){var a=this,p=t(i);if(0!==p.length){l.ENABLE_LIVE_VALIDATION=void 0!==p.data("livevalidation"),l.DISPLAY_ERROR_MESSAGES_AT_TOP=void 0!==p.data("toperrors"),!1===l.ENABLE_LIVE_VALIDATION&&t.extend(o.prototype.validationOptions,{onfocusout:!1}),l.DISPLAY_ERROR_MESSAGES_AT_TOP&&t.extend(o.prototype.validationOptions,{invalidHandler:function(t,e){p.trigger("userform.form.error",[e])},onfocusout:!1}),t(".userform-progress, .step-navigation").attr("aria-hidden",!1).show(),t.extend(r.prototype,d),t.extend(e.prototype,d),u=new o(p),l.HIDE_FIELD_LABELS&&p.find("label.left").each(function(){var e=t(a);t('[name="'+e.attr("for")+'"]').attr("placeholder",e.text()),e.remove()}),u.$el.find(".form-step").each(function(t,e){var n=new r(e);u.addStep(n)}),u.setCurrentStep(u.steps[0]),t(document).on("click","input.text[data-showcalendar]",function(){var e=t(a);e.ssDatepicker(),e.data("datepicker")&&e.datepicker("show")}),setInterval(function(){t.ajax({url:"UserDefinedFormController/ping"})},18e4);var f=t("form.userform");void 0!==f.areYouSure&&f.areYouSure({message:s.a._t("UserForms.LEAVE_CONFIRMATION","You have unsaved changes!")})}}var u=null,l={},d={show:function(){this.$el.attr("aria-hidden",!1).show()},hide:function(){this.$el.attr("aria-hidden",!0).hide()}};e.prototype.hasErrors=function(){return this.$el.find(".error-list").children().length>0},e.prototype.removeErrorMessage=function(t){this.$el.find("#"+t+"-top-error").remove(),this.hasErrors()||this.hide()},e.prototype.addStepLink=function(e){var r=e.$el.attr("id")+"-error-link",n=this.$el.find("#"+r),i=e.$el.attr("id"),o=e.$el.data("title");n.length||(n=t('<li id="'+r+'"><a href="#'+i+'">'+o+"</a></li>"),n.on("click",function(t){t.preventDefault(),u.jumpToStep(e.id)}),this.$el.find(".error-list").append(n))},e.prototype.removeStepLink=function(e){var r=t("#"+e).closest(".form-step").attr("id");this.$el.find("#"+r+"-error-link").remove(),this.$el.find(".error-list").is(":empty")&&this.hide()},e.prototype.updateErrorMessage=function(e,r){var n=this,i=e.attr("id"),o="#"+i,s=i+"-top-error",a=t("#"+s),u=e.attr("aria-describedby");if(!r)return void a.addClass("fixed");a.removeClass("fixed"),this.show(),1===a.length?a.show().find("a").html(r):(e.closest(".field[id]").each(function(){o="#"+t(n).attr("id")}),a=t("<li><a></a></li>"),a.attr("id",s).find("a").attr("href",location.pathname+location.search+o).html(r),this.$el.find("ul").append(a),u?u.match(new RegExp("\\b"+s+"\\b"))||(u+=" "+s):u=s,e.attr("aria-describedby",u))},r.prototype.conditionallyHidden=function(){return!this.$elButton.find("button").is(":visible")},n.prototype.update=function(e){var r=t(t(".form-step")[e]),n=0,i=e/(this.$buttons.length-1)*100;this.$buttons.each(function(r,i){return!(r>e||(t(i).is(":visible")&&(n+=1),0))}),this.$el.find(".current-step-number").each(function(e,r){t(r).text(n)}),this.$el.find("[aria-valuenow]").each(function(e,r){t(r).attr("aria-valuenow",n)}),this.$buttons.each(function(e,r){var i=t(r),o=i.parent();if(parseInt(i.data("step"),10)===n&&i.is(":visible"))return o.addClass("current viewed"),void i.removeAttr("disabled");o.removeClass("current")}),this.$el.siblings(".progress-title").text(r.data("title")),i=i?i+"%":"",this.$el.find(".progress-bar").width(i)},i.prototype.update=function(){var t=u.steps.length,e=u.currentStep?u.currentStep.id:0,r=null,n=null;for(this.$el.find(".step-button-prev")[0===e?"hide":"show"](),r=t-1;r>=0;r--)if(n=u.steps[r],!n.conditionallyHidden()){this.$el.find(".step-button-next")[e>=r?"hide":"show"](),this.$el.find(".Actions")[e>=r?"show":"hide"]();break}},o.prototype.validationOptions={ignore:":hidden,ul",errorClass:"error",errorElement:"span",errorPlacement:function(t,e){t.addClass("message"),e.is(":radio")||e.parents(".checkboxset").length>0?t.appendTo(e.closest(".middleColumn")):e.parents(".checkbox").length>0?t.appendTo(e.closest(".field")):t.insertAfter(e)},invalidHandler:function(t,e){setTimeout(function(){e.currentElements.filter(".error").first().focus()},0)},submitHandler:function(e){var r=!0;u.currentStep&&(u.currentStep.valid=t(e).valid()),t.each(u.steps,function(t,e){e.valid||e.conditionallyHidden()||(r=!1,u.errorContainer.addStepLink(e))}),r?(t(e).removeClass("dirty"),e.submit()):u.errorContainer.show()},success:function(e){var r=t(e).attr("id"),n=r.substr(0,r.indexOf("-error")).replace(/[\\[\\]]/,"");e.remove(),u.$el.trigger("userform.form.valid",[n])}},o.prototype.addStep=function(t){!t instanceof r||(t.id=this.steps.length,this.steps.push(t))},o.prototype.setCurrentStep=function(t){t instanceof r&&(this.currentStep=t,this.currentStep.show(),this.currentStep.viewed=!0,this.currentStep.$el.addClass("viewed"))},o.prototype.jumpToStep=function(t,e){var r=this.steps[t],n=!1,i=void 0===e||e;if(void 0!==r){if(r.conditionallyHidden())return void(i?this.jumpToStep(t+1):this.jumpToStep(t-1));n=this.$el.valid(),this.currentStep.valid=n,!1===n&&!1===r.viewed||(this.currentStep.hide(),this.setCurrentStep(r),this.$el.trigger("userform.form.changestep",[r.id]))}},o.prototype.nextStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)+1,!0)},o.prototype.prevStep=function(){this.jumpToStep(this.steps.indexOf(this.currentStep)-1,!1)},t(".userform").each(a)})},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),r(0)},function(t,e){t.exports=i18n},function(t,e){t.exports=jQuery}]);

client/dist/styles/userforms-cms.css

@@ -1 +1 @@
-.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#4f5861}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#e7e9ec}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#66727d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #e7e9ec}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#66727d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #e7e9ec}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#4f5861}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #e7e9ec}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:2;background:#f6f7f8;border-bottom:1px solid #e5e8eb;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}
+.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:2;background:#f7f8fa;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}

client/dist/styles/userforms.css

@@ -1 +1 @@
-.userform-progress .progress{position:relative;height:1em;background:#e7e9ec}.userform-progress .progress-bar{position:absolute;height:1em;background:#66727d}.userform-progress .step-buttons{margin-left:0;position:relative}.userform-progress .step-button-wrapper{display:inline-block;list-style-type:none}.userform-progress .step-button-wrapper.viewed .step-button-jump{opacity:1}.userform-progress .step-button-jump{position:absolute;top:0;opacity:.7}.step-navigation .step-buttons{margin-left:0}.step-navigation .step-button-wrapper{display:inline-block;list-style-type:none}.userform{clear:both;width:100%;max-width:100%}.userform .field label.right{color:#383f45}.userformsgroup{border:1px solid #d3d8dc;border-radius:4px;padding:8px;margin-top:12px;margin-bottom:12px}.userformsgroup>legend{padding-left:4px;padding-right:4px;border:0;width:auto}.right-title{clear:both;display:block}.checkbox .right-title{display:inline}.userform .left{margin-bottom:5px;font-weight:700}
+.userform-progress .progress{position:relative;height:1em;background:#ced5e1}.userform-progress .progress-bar{position:absolute;height:1em;background:#566b8d}.userform-progress .step-buttons{margin-left:0;position:relative}.userform-progress .step-button-wrapper{display:inline-block;list-style-type:none}.userform-progress .step-button-wrapper.viewed .step-button-jump{opacity:1}.userform-progress .step-button-jump{position:absolute;top:0;opacity:.7}.step-navigation .step-buttons{margin-left:0}.step-navigation .step-button-wrapper{display:inline-block;list-style-type:none}.userform{clear:both;width:100%;max-width:100%}.userform .hide{display:none}.userform .field label.right{color:#303b4d}.userformsgroup{border:1px solid #aebace;border-radius:4px;padding:8px;margin-top:12px;margin-bottom:12px}.userformsgroup>legend{padding-left:4px;padding-right:4px;border:0;width:auto}.right-title{clear:both;display:block}.checkbox .right-title{display:inline}.userform .left{margin-bottom:5px;font-weight:700}

client/src/bundles/UserForms.js

@@ -649,8 +649,8 @@ jQuery(document).ready(($) => {
    * @func main
    * @desc Bootstraps the front-end.
    */
-  function main() {
-    const $userform = $('.userform');
+  function main(index, userformElement) {
+    const $userform = $(userformElement);
 
     // If there's no userform, do nothing.
     if ($userform.length === 0) {
@@ -737,5 +737,5 @@ jQuery(document).ready(($) => {
     }
   }
 
-  main();
+  $('.userform').each(main);
 });

client/src/styles/userforms-cms.scss

@@ -67,7 +67,7 @@
     .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep"] {
       &,
       &:hover {
-        background: $gray-650;
+        background: $gray-600;
         color: $white;
       }
 
@@ -79,7 +79,7 @@
       }
 
       + .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup"] td {
-         border-top: 3px solid $gray-200;
+        border-top: 3px solid $gray-200;
       }
 
       .grid-field__icon-action {
@@ -89,7 +89,7 @@
 
         &:hover {
           &:before {
-            color: $gray-650;
+            color: $gray-600;
           }
         }
       }
@@ -97,7 +97,7 @@
 
     .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup"] {
       td {
-         border-top: 3px solid $gray-200;
+        border-top: 3px solid $gray-200;
       }
 
       .form__field-label {
@@ -113,7 +113,7 @@
       }
 
       + .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd"] {
-          border-top: 0;
+        border-top: 0;
       }
 
       .col-buttons .action {
@@ -140,4 +140,3 @@
     }
   }
 }
-

client/src/styles/userforms.scss

@@ -10,7 +10,7 @@
   .progress-bar {
     position: absolute;
     height: 1em;
-    background: $gray-650;
+    background: $gray-600;
   }
 
   .step-buttons {
@@ -50,6 +50,10 @@
   width: 100%;
   max-width: 100%;
 
+  .hide {
+    display: none;
+  }
+
   .field label.right {
     color: $gray-800;
   }

code/Control/UserDefinedFormController.php

@@ -165,12 +165,14 @@ class UserDefinedFormController extends PageController
     {
         $default = '';
         $rules = '';
+        $form = $this->data();
+        $formFields = $form->Fields();
 
         $watch = [];
 
-        if ($this->data()->Fields()) {
+        if ($formFields) {
             /** @var EditableFormField $field */
-            foreach ($this->data()->Fields() as $field) {
+            foreach ($formFields as $field) {
                 if ($result = $field->formatDisplayRules()) {
                     $watch[] = $result;
                 }
@@ -189,7 +191,7 @@ class UserDefinedFormController extends PageController
                     });
                 })(jQuery);
 JS
-            , 'UserFormsConditional');
+            , 'UserFormsConditional-' . $form->ID);
         }
     }