diff --git a/demos/custom-fields/index.html b/demos/custom-fields/index.html
index 467b7cd7a..9e681a8b6 100644
--- a/demos/custom-fields/index.html
+++ b/demos/custom-fields/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Blockly Demos</title>
+  <title>Blockly Demo: Custom Fields</title>
   <style>
     body {
       margin: 0 10%;
diff --git a/demos/custom-fields/pitch/field_pitch.js b/demos/custom-fields/pitch/field_pitch.js
index 3a50237ac..4382a46b3 100644
--- a/demos/custom-fields/pitch/field_pitch.js
+++ b/demos/custom-fields/pitch/field_pitch.js
@@ -137,25 +137,23 @@ Blockly.FieldPitch.prototype.onMouseMove = function(e) {
 };
 
 /**
- * Convert the machine-readable value (0-12) to human-readable
- *   text (C3-A4).
+ * Convert the machine-readable value (0-12) to human-readable text (C3-A4).
  * @param {number|string} value The provided value.
- * @return {string} The respective note.
+ * @return {string|undefined} The respective note, or undefined if invalid.
  */
 Blockly.FieldPitch.prototype.valueToNote = function(value) {
-  var note = Blockly.FieldPitch.NOTES[Number(value)];
-  return note;
+  return Blockly.FieldPitch.NOTES[Number(value)];
 };
 
 /**
- * Convert the human-readable text (C3-A4) to machine-readable
- *   value (0-12).
+ * Convert the human-readable text (C3-A4) to machine-readable value (0-12).
  * @param {string} text The provided note.
- * @return {number} The respective value.
+ * @return {number|undefined} The respective value, or undefined if invalid.
  */
 Blockly.FieldPitch.prototype.noteToValue = function(text) {
-  var i = Blockly.FieldPitch.NOTES.indexOf(text);
-  return i;
+  var normalizedText = text.trim().toUpperCase();
+  var i = Blockly.FieldPitch.NOTES.indexOf(normalizedText);
+  return i > -1 ? i : undefined;
 };
 
 /**
@@ -182,7 +180,7 @@ Blockly.FieldPitch.prototype.getEditorText_ = function(value) {
 
 /**
  * Transform the text received from the HTML input (note) into a value
- *    to store in this field.
+ * to store in this field.
  * @param {string} text Text received from the HTML input.
  * @returns {*} The value to store.
  */
diff --git a/demos/custom-fields/pitch/index.html b/demos/custom-fields/pitch/index.html
index 4dd557747..642482cd6 100644
--- a/demos/custom-fields/pitch/index.html
+++ b/demos/custom-fields/pitch/index.html
@@ -7,6 +7,23 @@
     <script src="blocks.js"></script>
     <script src="field_pitch.js"></script>
     <script src="../../../msg/js/en.js"></script>
+    <style>
+      body {
+        margin: 0 10%;
+        background-color: #fff;
+        font-family: sans-serif;
+      }
+      h1 {
+        font-weight: normal;
+        font-size: 140%;
+      }
+      td {
+        padding: 1ex;
+      }
+      img {
+        border: none;
+      }
+    </style>
     <link rel="stylesheet" type="text/css" href="pitch.css">
   </head>
   <body onload="start()">
diff --git a/demos/custom-fields/turtle/index.html b/demos/custom-fields/turtle/index.html
index bcfc8a18f..f5b4cdfeb 100644
--- a/demos/custom-fields/turtle/index.html
+++ b/demos/custom-fields/turtle/index.html
@@ -7,6 +7,23 @@
     <script src="blocks.js"></script>
     <script src="field_turtle.js"></script>
     <script src="../../../msg/js/en.js"></script>
+    <style>
+      body {
+        margin: 0 10%;
+        background-color: #fff;
+        font-family: sans-serif;
+      }
+      h1 {
+        font-weight: normal;
+        font-size: 140%;
+      }
+      td {
+        padding: 1ex;
+      }
+      img {
+        border: none;
+      }
+    </style>
     <link rel="stylesheet" type="text/css" href="turtle.css">
   </head>
   <body onload="start()">
