diff --git a/static/scripts/frontpage3d.js b/static/scripts/frontpage3d.js
index 7491e3e8..1a625682 100644
--- a/static/scripts/frontpage3d.js
+++ b/static/scripts/frontpage3d.js
@@ -807,3 +807,24 @@ function toggle3DPO(){
     }
 }
 
+function onFooterSubmit(){
+  var form = $("#settingsForm")
+  // JQuery returns list of forms so must select first [0].
+  isValid = form[0].checkValidity();
+  if (isValid) {
+    var url = $("#pageID").val()
+    $.ajax({
+      url : '/'+url,
+      type: "POST",
+      data: form.serialize(),
+      success: function (data) {
+        console.log("success");
+        $('#contentModal').modal('toggle')
+      },
+      error: function (jXHR, textStatus, errorThrown) {
+        alert(errorThrown);
+      }
+    });
+  }
+}
+
diff --git a/static/scripts/frontpage3dcontrols.js b/static/scripts/frontpage3dcontrols.js
index d55cf71b..fb2560f8 100644
--- a/static/scripts/frontpage3dcontrols.js
+++ b/static/scripts/frontpage3dcontrols.js
@@ -152,3 +152,11 @@ function processStatusMessage(data){
     else
         $("#currentPositioningMode").text("Incremental (G91)");
 }
+
+function inputDecimalValidate() {
+    var re = new RegExp($(this).attr("pattern"));
+    valid = pattern.test($(this).val());
+    if (!valid) {
+      $(this).setCustomValidity("Decimal input pattern mismatch");
+    }
+}
diff --git a/static/scripts/frontpageControls.js b/static/scripts/frontpageControls.js
index dc0bb784..42aeb37f 100644
--- a/static/scripts/frontpageControls.js
+++ b/static/scripts/frontpageControls.js
@@ -22,6 +22,25 @@ $(document).ready(function(){
     var controllerMessage = document.getElementById('controllerMessage');
     controllerMessage.scrollTop = controllerMessage.scrollHeight;
     $("#stickyButtons").css("top", $(".navbar").outerHeight());
+
+    // Set custom validation on all form inputs of type 'number' with attribute 'pattern'.
+    // Input type 'number' does not support 'pattern' attribute by default using HTML5.
+    // Input type 'number' always returns a value compatible with parseFloat using period as decimal separator.
+    // @todo: This event handler may need to be moved to other JS files for more/less global application.
+    $(':input[type="number"][pattern]').change(function () {
+      var re = new RegExp($(this).attr("pattern"));
+      var isValid = re.test($(this).val());
+      // JQuery selector returns array of possible matches.
+      // Validity checks must be applied to first item [0].
+      if (isValid) {
+        // Set empty value to clear error.
+        $(this)[0].setCustomValidity("");
+      }
+      else {
+        // Set title as error message.
+        $(this)[0].setCustomValidity($(this).attr("title"));
+      }
+    });
 });
 
 function pauseRun(){
@@ -138,13 +157,12 @@ function boardDataUpdate(data){
 }
 
 function moveAction(direction) {
-	distance = $("#distToMove").val();
-	distanceValid = distance.search(/^[0-9]*(\.[0-9]{0,3})?$/);
-	if (distanceValid == 0) {
-		action('move', direction, distance);
-	} else {
-		$("#distToMove").focus();
-	}
+  // JQuery returns list of matching forms so select first [0] for validitity checking.
+  var isValid = $("#distInput")[0].checkValidity();
+  if (isValid) {
+    distance = $("#distToMove").val();
+    action('move', direction, distance);
+  }
 }
 
 function processStatusMessage(data){
diff --git a/static/scripts/settings.js b/static/scripts/settings.js
index ea7a5472..45271612 100644
--- a/static/scripts/settings.js
+++ b/static/scripts/settings.js
@@ -1,9 +1,11 @@
 function onFooterSubmit(){
+  var form = $("#settingsForm")
+  if (form[0].checkValidity()) {
     var url = $("#pageID").val()
     $.ajax({
         url : '/'+url,
         type: "POST",
-        data: $("#settingsForm").serialize(),
+        data: form.serialize(),
         success: function (data) {
           console.log("success");
             $('#contentModal').modal('toggle')
@@ -12,8 +14,10 @@ function onFooterSubmit(){
             alert(errorThrown);
         }
     });
+  }
 }
 
+/*
 $(document).ready(function () {
     $('#settingsForm').on('submit', function(e) {
         e.preventDefault();
@@ -38,6 +42,7 @@ $(document).ready(function () {
      });
 
 });
+*/
 
 function updatePorts(data){
   var selectedPort = $("#comPorts").find(":selected").text();
diff --git a/templates/editBoard.html b/templates/editBoard.html
index d0faf3c2..b0ab1c09 100644
--- a/templates/editBoard.html
+++ b/templates/editBoard.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -32,17 +32,17 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="width">Width</label>
-                          <input id="width"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="width" value="{{width}}">
+                          {{ macros.input_decimal("width", False, width) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="height">Height</label>
-                          <input id="height"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="height" value="{{height}}">
+                          {{ macros.input_decimal("height", True, height) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="Thickness">Thickness</label>
-                          <input id="thickness" type="number" step="any"  class="form-control" name="thickness" value="{{thickness}}">
+                          {{ macros.input_decimal("thickness", True, thickness) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>
@@ -56,12 +56,12 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="centerX">Center X</label>
-                          <input id="centerX" type="number" step="any"  class="form-control" name="centerX" value="{{centerX}}">
+                          {{ macros.input_decimal("centerX", True, centerX) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="centerY">Center Y</label>
-                          <input id="centerY" type="number" step="any"  class="form-control" name="centerY" value="{{centerY}}">
+                          {{ macros.input_decimal("centerY", True, centerY) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>
diff --git a/templates/editBoard_mobile.html b/templates/editBoard_mobile.html
index add13a10..8f562600 100644
--- a/templates/editBoard_mobile.html
+++ b/templates/editBoard_mobile.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -28,17 +28,17 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="width">Width</label>
-                  <input id="width" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="width" value="{{width}}">
+                  {{ macros.input_decimal("width", True, width) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="height">Height</label>
-                  <input id="height" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="height" value="{{height}}">
+                  {{ macros.input_decimal("height", True, height) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="Thickness">Thickness</label>
-                  <input id="thickness" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="thickness" value="{{thickness}}">
+                  {{ macros.input_decimal("thickness", True, thickness) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>
@@ -50,12 +50,12 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="centerX">Center X</label>
-                  <input id="centerX" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerX" value="{{centerX}}">
+                  {{ macros.input_decimal("centerX", True, centerX) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="centerY">Center Y</label>
-                  <input id="centerY" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerY" value="{{centerY}}">
+                  {{ macros.input_decimal("centerY", True, centerY) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>
diff --git a/templates/frontpage3d.html b/templates/frontpage3d.html
index a902f1c6..926cdeb9 100644
--- a/templates/frontpage3d.html
+++ b/templates/frontpage3d.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='11102018j') }}" crossorigin="anonymous">
   <!--<style> #workarea {background-color: #AAA; width: 100%; height: 100%; border: 1px solid black;}</style>-->
@@ -26,7 +26,7 @@ <h3>Controls</h3>
         <div>
         <div class="controls row">
           <div class="col-3 mb-1">
-            <button type="button" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
+            <button type="button" data-wc-major-digits="5" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
           </div>
           <div class="col-3 mb-1">
             <button type="button" class="btn btn-dark btn-block" onclick="moveAction('up')"><i data-feather="arrow-up"></i></button>
@@ -68,7 +68,7 @@ <h3>Controls</h3>
             <label>Distance:</label>
           </div>
           <div class="col-3 mb-1">
-            <form id="distInput" onsubmit="return false;"><input class="form-control" type="text" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+            <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
           </div>
           <div class="col-3 mb-1">
             <button id="units" type="button" class="btn btn-secondary" onclick="unitSwitch();">--</button>
diff --git a/templates/frontpage3d_mobile.html b/templates/frontpage3d_mobile.html
index d4091665..dd818acf 100644
--- a/templates/frontpage3d_mobile.html
+++ b/templates/frontpage3d_mobile.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019a') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -83,7 +83,7 @@ <h3>Controls</h3>
     </div>
     <div class="row">
       <div class="col-4  mb-1">
-        <form onsubmit="return false;"><input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+        <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
       </div>
       <div class="col-4  mb-1">
         <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch()">--</button>
diff --git a/templates/frontpage3d_mobilecontrols.html b/templates/frontpage3d_mobilecontrols.html
index 2aeb7354..cf318c7e 100644
--- a/templates/frontpage3d_mobilecontrols.html
+++ b/templates/frontpage3d_mobilecontrols.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019b') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -86,7 +86,7 @@ <h3>Controls</h3>
       <label>Dist To Move</label>
     </div>
     <div class="col-4  mb-1">
-      <input class="form-control" type="number" id="distToMove" value="0.01">
+      <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
     </div>
     <div class="col-4  mb-1">
       <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch();">--</button>
diff --git a/templates/holeyCalibration.html b/templates/holeyCalibration.html
index 2a011918..c07e38b3 100644
--- a/templates/holeyCalibration.html
+++ b/templates/holeyCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="card-body">
@@ -14,62 +14,62 @@ <h4 class="card-title">Measurements</h4>
       <div class="form-group">
         <div class="form-group">
           <label for="M1">M1</label>
-          <input id="M1" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M1" value="0">
+          {{ macros.input_decimal("M1", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M2">M2</label>
-          <input id="M2" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M2" value="0">
+          {{ macros.input_decimal("M2", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M3">M3</label>
-          <input id="M3" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M3" value="0">
+          {{ macros.input_decimal("M3", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M4">M4</label>
-          <input id="M4" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M4" value="0">
+          {{ macros.input_decimal("M4", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M5">M5</label>
-          <input id="M5" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M5" value="0">
+          {{ macros.input_decimal("M5", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M6">M6</label>
-          <input id="M6" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M6" value="0">
+          {{ macros.input_decimal("M6", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M7">M7</label>
-          <input id="M7" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M7" value="0">
+          {{ macros.input_decimal("M7", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M8">M8</label>
-          <input id="M8" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M8" value="0">
+          {{ macros.input_decimal("M8", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M9">M9</label>
-          <input id="M9" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M9" value="0">
+          {{ macros.input_decimal("M9", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M10">M10</label>
-          <input id="M10" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M10" value="0">
+          {{ macros.input_decimal("M10", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M11">M11</label>
-          <input id="M11" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M11" value="0">
+          {{ macros.input_decimal("M11", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M12">M12</label>
-          <input id="M12" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M12" value="0">
+          {{ macros.input_decimal("M12", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="row">
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 00000000..87a2afce
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,5 @@
+{% macro input_decimal(id, required = False, default_value = "", disabled = False, digits_before = 4, digits_after = 5, error_text = "") %}
+  {% set pattern = "^[0-9]{0," ~ digits_before ~ "}([\.,][0-9]{0," ~ digits_after ~ "})?$" %}
+  {% set title = error_text|default("Decimal number with one separator with max " ~ digits_before ~ " major digits and max " ~ digits_after + " minor digits", True) %}
+  <input id="{{ id }}" type="number" step="any" inputmode="decimal" pattern="{{ pattern }}" class="form-control" name="{{ id }}" value="{{ default_value }}" {{ 'required=required' if required }} {{ 'disabled=disabled' if disabled }} title="{{ title }}">
+{% endmacro %}
\ No newline at end of file
diff --git a/templates/opticalCalibration.html b/templates/opticalCalibration.html
index 5874b48c..6d74b471 100644
--- a/templates/opticalCalibration.html
+++ b/templates/opticalCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
@@ -16,14 +16,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="markerX">Horizontal Size of Marker</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerX" id="markerX" value="{{markerX}}">
+                  {{ macros.input_decimal("markerX", True, markerX) }}
                   <small class="form-text text-muted">Enter value in inches only</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="markerY">Vertical Size of Marker</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerY" id="markerY" value="{{markerY}}">
+                  {{ macros.input_decimal("markerY", True, markerY) }}
                   <small class="form-text text-muted">Enter value in inches only</small>
                 </div>
               </div>
@@ -32,13 +32,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="scaleX">Horizontal Scale Factor</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleX" id="scaleX" value="{{scaleX}}">
+                  {{ macros.input_decimal("scaleX", True, scaleX) }}
                   <small class="form-text text-muted">Enter something like 1.0028</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="scaleY">Vertical Scale Factor</label>
+                  {{ macros.input_decimal("scaleY", True, scaleY) }}
                   <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleY" id="scaleY" value="{{scaleY}}">
                   <small class="form-text text-muted">Enter something like 1.0028</small>
                 </div>
@@ -48,14 +49,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="opticalCenterX">X Coordinate of Center</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterX" id="opticalCenterX" value="{{opticalCenterX}}">
+                  {{ macros.input_decimal("opticalCenterX", True, opticalCenterX) }}
                   <small class="form-text text-muted">Enter something like 300</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="opticalCenterY">Y Coordinate of Center</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterY" id="opticalCenterY" value="{{opticalCenterY}}">
+                  {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                   <small class="form-text text-muted">Enter something like 200</small>
                 </div>
              </div>
@@ -64,7 +65,7 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="positionTolerance">Position Tolerance</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="positionTolerance" id="positionTolerance" value="{{positionTolerance}}">
+                  {{ macros.input_decimal("positionTolerance", True, positionTolerance) }}
                   <small class="form-text text-muted">Enter something like 0.125 (mm)</small>
                 </div>
               </div>
@@ -91,17 +92,18 @@ <h4 class="card-title">Calibration Extents</h4>
               <option value="Custom" {{'selected' if calibrationExtents=='Custom' else ''}}>Custom</option>
             </select>
             <div class="row">
+            {% set disabled_custom = (calibrationExtents!='Custom') %}
             <div class="col">
               <div class="form-group">
                 <label for="tlX">X Coordinate of Top Left</label>
-                <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="tlX" id="tlX" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{tlX}}">
+                {{ macros.input_decimal("tlX", True, tlX, disabled_custom) }}
                 <small class="form-text text-muted">Range from +15 to -15 (+ is right, - is left)</small>
               </div>
             </div>
             <div class="col">
               <div class="form-group">
                 <label for="tlY">Y Coordinate of Top Left</label>
-                <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="tlY" id="tlY" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{tlY}}">
+                {{ macros.input_decimal("tlY", True, tlY, disabled_custom) }}
                 <small class="form-text text-muted">Range from +7 to -7 (+ is up, - is down)</small>
               </div>
             </div>
@@ -110,14 +112,14 @@ <h4 class="card-title">Calibration Extents</h4>
               <div class="col">
                 <div class="form-group">
                   <label for="brX">X Coordinate of Bottom Right</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="brX" id="brX" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{brX}}">
+                  {{ macros.input_decimal("brX", True, brX, disabled_custom) }}
                   <small class="form-text text-muted">Range from +15 to -15 (+ is right, - is left)</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="brY">Y Coordinate of Bottom Right</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="brY" id="brY" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{brY}}">
+                  {{ macros.input_decimal("brY", True, brY, disabled_custom) }}
                   <small class="form-text text-muted">Range from +7 to -7 (+ is up, - is down)</small>
                 </div>
               </div>
@@ -156,14 +158,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="markerX">Horizontal Size of Marker</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerX" id="markerX" value="{{markerX}}">
+                      {{ macros.input_decimal("markerX", True, markerX) }}
                       <small class="form-text text-muted">Enter value in inches only</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="markerY">Vertical Size of Marker</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerY" id="markerY" value="{{markerY}}">
+                      {{ macros.input_decimal("markerY", True, markerY) }}
                       <small class="form-text text-muted">Enter value in inches only</small>
                     </div>
                   </div>
@@ -172,14 +174,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="scaleX">Horizontal Scale Factor</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleX" id="scaleX" value="{{scaleX}}">
+                      {{ macros.input_decimal("scaleX", True, scaleX) }}
                       <small class="form-text text-muted">Enter something like 1.0028</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="scaleY">Vertical Scale Factor</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleY" id="scaleY" value="{{scaleY}}">
+                      {{ macros.input_decimal("scaleY", True, scaleY) }}
                       <small class="form-text text-muted">Enter something like 1.0028</small>
                     </div>
                   </div>
@@ -188,14 +190,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="opticalCenterX">X Coordinate of Center</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterX" id="opticalCenterX" value="{{opticalCenterX}}">
+                      {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                       <small class="form-text text-muted">Enter something like 300</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="opticalCenterY">Y Coordinate of Center</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterY" id="opticalCenterY" value="{{opticalCenterY}}">
+                      {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                       <small class="form-text text-muted">Enter something like 200</small>
                     </div>
                    </div>
@@ -204,7 +206,7 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col-6">
                     <div class="form-group">
                       <label for="positionTolerance">Position Tolerance</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="positionTolerance" id="positionTolerance" value="{{positionTolerance}}">
+                      {{ macros.input_decimal("positionTolerance", True, positionTolerance) }}
                       <small class="form-text text-muted">Enter something like 0.125 (mm)</small>
                     </div>
                   </div>
diff --git a/templates/pidTuning.html b/templates/pidTuning.html
index 3b50622c..500c5555 100644
--- a/templates/pidTuning.html
+++ b/templates/pidTuning.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="card" id="motorAdjustmentAccordion">
@@ -290,14 +290,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="vStart">Start</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vStart" id="vStart" value="{{vStart}}">
+                 {{ macros.input_decimal("vStart", False, vStart) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="vStop">Stop</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vStop" id="vStop" value="{{vStop}}">
+                 {{ macros.input_decimal("vStop", False, vStop) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -306,14 +306,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="vSteps">Steps</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vSteps" id="vSteps" value="{{vSteps}}">
+                 {{ macros.input_decimal("vSteps", False, vSteps) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="vVersion">Version</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vVersion" id="vVersion" value="{{vVersion}}">
+                 {{ macros.input_decimal("vVersion", False, vVersion) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -322,21 +322,21 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="KpV">KpV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KpV" id="KpV" value="{{KpV}}">
+                 {{ macros.input_decimal("KpV", False, KpV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KiV">KiV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KiV" id="KiV" value="{{KiV}}">
+                 {{ macros.input_decimal("KiV", False, KiV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KdV">KdV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KdV" id="KdV" value="{{KdV}}">
+                 {{ macros.input_decimal("KdV", False, KdV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -393,14 +393,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="pStart">Start</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pStart" id="pStart" value="{{pStart}}">
+                 {{ macros.input_decimal("pStart", False, pStart) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="pStop">Stop</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pStop" id="pStop" value="{{pStop}}">
+                 {{ macros.input_decimal("pStop", False, pStop) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -409,14 +409,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="pSteps">Steps</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pSteps" id="pSteps" value="{{pSteps}}">
+                 {{ macros.input_decimal("pSteps", False, pSteps) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="pVersion">Version</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pVersion" id="pVersion" value="{{pVersion}}">
+                 {{ macros.input_decimal("pVersion", False, pVersion) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -425,7 +425,7 @@ <h4 class="card-title">Settings</h4>
              <div class="col-6">
                <div class="form-group">
                  <label for="pTime">Time</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pTime" id="pTime" value="{{pTime}}">
+                 {{ macros.input_decimal("pTime", False, pTime) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -434,21 +434,21 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="KpP">KpP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KpP" id="KpP" value="{{KpP}}">
+                 {{ macros.input_decimal("KpP", False, KpP) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KiP">KiP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KiP" id="KiP" value="{{KiP}}">
+                 {{ macros.input_decimal("KiP", False, KiP) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KdV">KdP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KdP" id="KdP" value="{{KdP}}">
+                 {{ macros.input_decimal("KdV", False, KdV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
diff --git a/templates/quickConfigure.html b/templates/quickConfigure.html
index 278a4e72..8c953578 100644
--- a/templates/quickConfigure.html
+++ b/templates/quickConfigure.html
@@ -1,3 +1,4 @@
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <input id="pageID" type="hidden" value="{{pageID}}">
@@ -48,7 +49,7 @@ <h5>Metal Maslow Linkage</h5>
         </select>
         <p></p>
         <label for="rotationRadius">Rotational Radius</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="rotationRadius" id="rotationRadius" value="{{rotationRadius}}">
+        {{ macros.input_decimal("rotationRadius", False, rotationRadius) }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
     </div>
@@ -80,7 +81,7 @@ <h4 class="card-title">Distance Between Motors</h4>
         <img src="{{ url_for('static',filename='images/quickConfig/measureEdgeMotor.png') }}" height="300" width="300">
         <p></p>
         <label for="motorSpacingX">Distance Between Motors</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="motorSpacingX" id="motorSpacingX" value="{{motorSpacingX}}">
+        {{ macros.input_decimal("motorSpacingX", False, motorSpacingX) }}
         <small class="form-text text-muted">Enter value in mm only</small>
         <button type="button" onclick="subtract40p4();">Subtract 40.4 mm</button>
       </div>
@@ -95,7 +96,7 @@ <h4 class="card-title">Height of Motors Above Workspace</h4>
         <img src="{{ url_for('static',filename='images/quickConfig/motorOffsetY.png') }}" height="300" width="300">
         <p></p>
         <label for="motorOffsetY">Height of Motors Above Workspace</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="motorOffsetY" id="motorOffSetY" value="{{motorOffsetY}}">
+        {{ macros.input_decimal("motorOffsetY", False, motorOffsetY) }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
     </div>
diff --git a/templates/settings.html b/templates/settings.html
index 94cd7639..ea2654f5 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -46,7 +46,7 @@ <h4 {{'' if enableCustom or setting.custom != 1 else 'style=color:#ccc'}}>{{sett
                 <label for="switch-{{setting.key}}"></label>
               </span>
             {% else %}
-              <input name="{{setting.key}}" {{'type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
+              <input name="{{setting.key}}" {{'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
             {% endif %}
           </div>
         </div>
diff --git a/templates/settings_mobile.html b/templates/settings_mobile.html
index a10e22a2..9635f5ff 100644
--- a/templates/settings_mobile.html
+++ b/templates/settings_mobile.html
@@ -46,7 +46,7 @@ <h4 {{'' if enableCustom or setting.custom != 1 else 'style=color:#ccc'}}>{{sett
                 <label for="switch-{{setting.key}}"></label>
               </span>
             {% else %}
-              <input name="{{setting.key}}" {{'type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
+              <input name="{{setting.key}}" {{'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
               <!--<input name="{{setting.key}}" data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>-->
             {% endif %}
           </div>
diff --git a/templates/triangularCalibration.html b/templates/triangularCalibration.html
index 1a3a0f49..64fe4650 100644
--- a/templates/triangularCalibration.html
+++ b/templates/triangularCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <h5>Cut Test Pattern</h5>
@@ -11,22 +11,22 @@ <h5>Measurements</h5>
     <div class="form-group">
       <div class="form-group">
         <label for="cut12">Distance Between Cuts 1 and 2</label>
-        <input id="cut12" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut12" value="1930">
+        {{ macros.input_decimal("cut12", True, "1930") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="cut34">Distance Between Cuts 3 and 4</label>
-        <input id="cut34" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut34" value="1930">
+        {{ macros.input_decimal("cut34", True, "1930") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="cut5">Distance Between Top of Work Area and Cut 5</label>
-        <input id="cut5" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut5" value="300">
+        {{ macros.input_decimal("cut5", True, "300") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="bitDiameter">Router Bit Diameter</label>
-        <input id="bitDiameter" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="bitDiameter" value="6.35">
+        {{ macros.input_decimal("bitDiameter", True, "6.35") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="row">
diff --git a/templates/trimBoard.html b/templates/trimBoard.html
index ac8257ad..a20fe9a5 100644
--- a/templates/trimBoard.html
+++ b/templates/trimBoard.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="trimBoardForm">
@@ -7,26 +7,26 @@
       <div class="row justify-content-center">
           <div class="form-group col-6">
             <label for="trimTop">Trim Top</label>
-            <input id="trimTop" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimTop" value="0">
+            {{ macros.input_decimal("trimTop", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
           </div>
       </div>
       <div class="row">
         <div class="form-group col-6">
             <label for="trimLeft">Trim Left</label>
-            <input id="trimLeft" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimLeft" value="0">
+            {{ macros.input_decimal("trimLeft", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
         </div>
         <div class="form-group col-6">
             <label for="trimRight">Trim Right</label>
-            <input id="trimRight" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimRight" value="0">
+            {{ macros.input_decimal("trimRight", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
         </div>
       </div>
       <div class="row justify-content-center">
           <div class="form-group col-6">
             <label for="trimBottom">Trim Bottom</label>
-            <input id="trimBottom" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimBottom" value="0">
+            {{ macros.input_decimal("trimBottom", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
           </div>
       </div>
diff --git a/templates/zaxis.html b/templates/zaxis.html
index 024e8c45..1e087d6c 100644
--- a/templates/zaxis.html
+++ b/templates/zaxis.html
@@ -1,11 +1,11 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
     <div class = "col-9">
       <div class="row">
         <div class="col-4 mb-1">
-          <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" id="distToMoveZ" value="{{distToMoveZ}}">
+          {{ macros.input_decimal("distToMoveZ", True, distToMoveZ) }}
         </div>
         <div class="col-4 mb-1">
           <button id="unitsZ" type="button" class="btn  btn-lg btn-block btn-secondary" onclick="unitSwitchZ();">{{unitsZ}}</button>
diff --git a/templates/zaxis_mobile.html b/templates/zaxis_mobile.html
index a22c2179..84dfef7d 100644
--- a/templates/zaxis_mobile.html
+++ b/templates/zaxis_mobile.html
@@ -1,11 +1,11 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
     <div class = "col">
       <div class="row">
         <div class="col-6 mb-1">
-          <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  id="distToMoveZ" value="{{distToMoveZ}}">
+          {{ macros.input_decimal("distToMoveZ", True, distToMoveZ) }}
         </div>
         <div class="col-6 mb-1">
           <button id="unitsZ" type="button" class="btn  btn-lg btn-block btn-secondary" onclick="unitSwitchZ();">{{unitsZ}}</button>