diff --git a/lib/importer/govuk-prototype-kit.config.json b/lib/importer/govuk-prototype-kit.config.json
index 2e85f535..616a929d 100644
--- a/lib/importer/govuk-prototype-kit.config.json
+++ b/lib/importer/govuk-prototype-kit.config.json
@@ -30,6 +30,11 @@
       "path": "/templates/mapping.html",
       "type": "nunjucks"
     },
+    {
+      "name": "Choose field formats",
+      "path": "/templates/format.html",
+      "type": "nunjucks"
+    },
     {
       "name": "Review your data",
       "path": "/templates/review.html",
diff --git a/lib/importer/nunjucks/importer/macros/field_mapper.njk b/lib/importer/nunjucks/importer/macros/field_mapper.njk
index c6737e10..86824c19 100644
--- a/lib/importer/nunjucks/importer/macros/field_mapper.njk
+++ b/lib/importer/nunjucks/importer/macros/field_mapper.njk
@@ -46,6 +46,7 @@
       </div>
     {% endif %}
 
+<input type="hidden" name="mappings-present" value="yes">
 <table class="govuk-table">
   {% if params.caption %}
   <caption class="govuk-table__caption govuk-table__caption--m">{{params.caption}}</caption>
@@ -67,7 +68,7 @@
       <th scope="row" class="govuk-table__header">{{ h.name }}</th>
       <td class="govuk-table__cell">{{ h.examples }}</td>
       <td class="govuk-table__cell govuk-table__cell--numeric">
-         <select class="govuk-select" style="float: right;" name="{{h.index}}">
+         <select class="govuk-select" style="float: right;" name="field-{{h.index}}">
                 <option name=""></option>
                 {% for field in fields %}
                     <option value="{{field.name}}" {% if field.name == currentValue or (mappingsLen == 0 and field.name == h.name) %}selected{% endif %}>
diff --git a/lib/importer/nunjucks/importer/macros/format_picker.njk b/lib/importer/nunjucks/importer/macros/format_picker.njk
new file mode 100644
index 00000000..c9170f10
--- /dev/null
+++ b/lib/importer/nunjucks/importer/macros/format_picker.njk
@@ -0,0 +1,106 @@
+{#
+    dudkFormatPicker shows each column heading mapped to a field whose type has
+    format options from the current spreadsheet, alongside a drop-down containing
+    available formats.  This allows the user to choose a format for
+    each column that needs one, to select how the value mapping should be applied.
+
+    The resulting data to be submitted to the 'importerMapDataPath'
+    will be a map of column indices to format names.
+
+    It accepts a data object which is taken from the prototype kit's
+    session data which is made available on every page, and contains the
+    data submitted from forms to the backend, and also the current
+    data import session.
+#}
+
+{% macro dudkFormatPicker(params) %}
+    {% set fields = params.data['importer.session']['fields'] %}
+    {% set mapping = params.data['importer.session']['mapping'] %}
+    {% set headings = importerGetHeaders(params.data) %}
+    {% set headingError = headings.error %}
+    {% set error = importerError(params.data) %}
+
+    {% if headingError %}
+    <p id="mapping-error" class="govuk-error-message">
+      <span class="govuk-visually-hidden">Error:</span> {{ headingError.text }}
+    </p>
+    {% endif %}
+
+    {% if error %}
+      <div class="govuk-error-summary" data-module="govuk-error-summary">
+        <div role="alert">
+          <h2 class="govuk-error-summary__title">
+            {{ error.text }}
+          </h2>
+          <div class="govuk-error-summary__body">
+            <ul class="govuk-list govuk-error-summary__list">
+              {% for e in error.extra %}
+              <li>
+                <a href="#field-{{ e | slugify }}">{{ e }}</a>
+              </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+<input type="hidden" name="formats-present" value="yes">
+<table class="govuk-table">
+  {% if params.caption %}
+  <caption class="govuk-table__caption govuk-table__caption--m">{{params.caption}}</caption>
+  {% endif %}
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+      <th scope="col" class="govuk-table__header">{{params.columnTitle}}</th>
+      <th scope="col" class="govuk-table__header">{{params.examplesTitle}}</th>
+      <th scope="col" class="govuk-table__header">{{params.fieldAndTypeTitle}}</th>
+      <th scope="col" class="govuk-table__header" style="padding-left: 1.5em">{{params.fieldsTitle}}</th>
+    </tr>
+  </thead>
+  <tbody class="govuk-table__body">
+    {% set mappingsLen = mapping | length %}
+    {% set possibleFormatsByColumn = importerPossibleColumnFormats(params.data) %}
+    {% set mappedColumnDetails = importerMappedColumnDetails(params.data) %}
+    {% for h in headings.data %}
+      {% set hIndex = loop.index0 %}
+      {% set currentValue = importerErrorMappingData(error, hIndex) %}
+      {% set possibleFormats = possibleFormatsByColumn[hIndex] %}
+      {% set mapping = mappedColumnDetails[hIndex] %}
+
+    <tr class="govuk-table__row" id="field-{{ h.name | slugify }}">
+      <th scope="row" class="govuk-table__header">{{ h.name }}</th>
+      <td class="govuk-table__cell">{{ h.examples }}</td>
+      <td class="govuk-table__cell">
+          {% if mapping %}
+              {{ mapping.fieldName }} ({{ mapping.typeName }})
+          {% endif %}
+      </td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">
+         {% if possibleFormats %}
+         <select class="govuk-select" style="float: right;" name="format-{{h.index}}">
+            <optgroup label="Matches every row">
+                {% for format in possibleFormats[0] %}
+                    <option value="{{format.name}}"
+                      {% if format.name == currentValue %}selected{% endif %}>
+                      {{format.displayName}}
+                    </option>
+                {% endfor %}
+            </optgroup>
+            <optgroup label="Matches some rows">
+                {% for format in possibleFormats[1] %}
+                    <option value="{{format.name}}"
+                      {% if format.name == currentValue %}selected{% endif %}>
+                      {{format.displayName}}
+                    </option>
+                {% endfor %}
+            </optgroup>
+         </select>
+         {% endif %}
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% endmacro %}
+
diff --git a/lib/importer/src/dudk/backend.js b/lib/importer/src/dudk/backend.js
index fa6b85de..59ae47c6 100644
--- a/lib/importer/src/dudk/backend.js
+++ b/lib/importer/src/dudk/backend.js
@@ -6,7 +6,8 @@ const guesser = require('./types/guesser');
 const store = require("./session_store")
 const errorTypes = require('./util/errors');
 
-// An implementation of the interface described in https://struct.register-dynamics.co.uk/trac/wiki/DataImporter/API
+// An implementation of the interface described in
+// https://struct.register-dynamics.co.uk/trac/wiki/DataImporter/API
 
 let sessionStore = function () {
   if (process.env.NODE_ENV == "development") {
@@ -53,27 +54,24 @@ exports.SessionSetFile = (sid, filename) => {
     filename: filename,
     wb: wb,
     sheetNames: Array.from(Object.keys(wb.Sheets)),
+    jobs: new Map(),
+    // State we store for the frontend (we don't do anything with it, just store it and spit it back on demand)
+    attributeDefs: [], // A list of objects with {name:string, required:boolean, type:string} defining the attributes we output
     headerRanges: {}, // A map from sheetname to the header range
     footerRanges: {}, // A map from sheetname to the footer range
-    mappingRules: {},
-    jobs: new Map(),
+    mappingRules: {}, // A map from column index to attribute name
+    formatChoices: {}, // A map from column index to format
   }
   sessionStore.set(sid, session);
 };
 
-exports.SessionGetMappingRules = (sid) => {
-  let session = sessionStore.get(sid);
-  return session.mappingRules;
-};
-
-exports.SessionSetMappingRules = (sid, rules) => {
-  sessionStore.apply(sid, (s) => { s.mappingRules = rules })
-};
+///
+/// Storage of UI state for the frontend
+///
 
-exports.SessionGetSheets = (sid) => {
-  let session = sessionStore.get(sid);
-  return session.sheetNames
-};
+exports.SessionSetAttributes = (sid, attrDefs) => {
+  sessionStore.apply(sid, (s) => { s.attributeDefs = attrDefs })
+}
 
 exports.SessionSetHeaderRange = (sid, range) => {
   assert(range != null, "Null range passed to SessionSetHeaderRange");
@@ -98,6 +96,101 @@ exports.SessionGetFooterRange = (sid, sheetName) => {
   return session.footerRanges[sheetName]
 };
 
+exports.SessionGetMappingRules = (sid) => {
+  let session = sessionStore.get(sid);
+  return session.mappingRules;
+};
+
+exports.SessionSetMappingRules = (sid, rules) => {
+  sessionStore.apply(sid, (s) => { s.mappingRules = rules })
+};
+
+exports.SessionGetFormatChoices = (sid) => {
+  let session = sessionStore.get(sid);
+  return session.formatChoices;
+};
+
+exports.SessionSetFormatChoices = (sid, choices) => {
+  sessionStore.apply(sid, (s) => { s.formatChoices = choices })
+};
+
+///
+/// Frontend helpers
+///
+
+
+// Returns an array of column indexes that need a format to be chosen - requires
+// that SessionSetAttributes and SessionSetMappingRules have both happened so we
+// have the required information.
+exports.SessionGetColumnsNeedingFormats = (sid) => {
+  const session = sessionStore.get(sid);
+  const attributes = session.attributeDefs;
+  const mappings = session.mappingRules;
+  const supportedTypes = attributeTypes.supportedTypes;
+
+  let columnsNeedingFormats = new Array();
+
+  for (const [colIdx, columnAttribute] of Object.entries(mappings)) {
+    if(columnAttribute != "") {
+      const columnDef = attributes.find((attr) => attr.name == columnAttribute);
+      const columnTypeName = columnDef.type;
+      const columnType = supportedTypes.get(columnTypeName);
+      if (columnType.formats) {
+        columnsNeedingFormats.push(colIdx);
+      }
+    }
+  }
+
+  return columnsNeedingFormats;
+};
+
+// Given guesses as returned by SessionGuessTypes and a list of domain-model
+// fields (with name and type fields), returns the type guesses with each column
+// augmented with a `fields` field - a Map mapping likely field names for this
+// column to an array of safe formats for that field - and a `maybeFields` field
+// - the same but for "maybe" fields that might be a partial match for the data.
+
+exports.SessionSuggestFields = (sid, typeGuesses, domainModelFields) => {
+  let result = [];
+
+  typeGuesses.forEach((colTypeGuess) => {
+    let safeFieldFormats = new Map(); // Map from field names to safe formats
+    let maybeFieldFormats = new Map(); // Map from field names to possible formats
+    // Examine every field, and check if they have a type that this column might
+    // contain
+    domainModelFields.forEach((field) => {
+      if(colTypeGuess.safeTypes.has(field.type)) {
+        // Add this field to the safe possibilities for the column, using the guessed
+        // formats
+        safeFieldFormats.set(field.name, colTypeGuess.safeTypes.get(field.type));
+      }
+      if(colTypeGuess.maybeTypes.has(field.type)) {
+        // Add this field to the maybe possibilities for the column, using the guessed
+        // formats
+        maybeFieldFormats.set(field.name, colTypeGuess.maybeTypes.get(field.type));
+      }
+    });
+
+    // Extend the column type guess with the "fields" field
+    let typeGuessesAndFields = Object.assign({}, colTypeGuess);
+    typeGuessesAndFields.safeFields = safeFieldFormats;
+    typeGuessesAndFields.maybeFields = maybeFieldFormats;
+    result.push(typeGuessesAndFields);
+  });
+
+  return result;
+};
+
+
+///
+/// Information about the loaded input file
+///
+
+exports.SessionGetSheets = (sid) => {
+  let session = sessionStore.get(sid);
+  return session.sheetNames
+};
+
 function getDimensions(sid) {
   let session = sessionStore.get(sid);
   let sheetDimensions = new Map();
@@ -447,10 +540,12 @@ exports.SessionGetInputSampleRows = (sid, range, startCount, middleCount, endCou
 // interpreted as extra text values.
 
 // The return value is an array, indexed on the relative column number within
-// the range; each element is an object with elements "types" listing a range of
-// possible types in a map whose values are either 'false' for types without
-// formats, or an Array of possible formats for that type; and a field "full"
-// indicating if the column has no missing values.
+// the range; each element is an object with elements "safeTypes" listing a
+// range of types that all cells in the column match, in a map whose values are
+// either 'false' for types without formats, or an Array of possible formats for
+// that type; "maybeTypes" in the same format, but listing type/format pairs
+// which *some* but not all cells match; and a field "full" indicating if the
+// column has no missing values.
 exports.SessionGuessTypes = (sid, range) => {
   assert(sessionStore.has(sid), `No such session ${sid} when guessing types`);
   assert(sessionStore.get(sid).wb.Sheets[range.sheet], `No such sheet ${range.sheet} in session ${sid} when guessing types`);
@@ -460,7 +555,7 @@ exports.SessionGuessTypes = (sid, range) => {
   }
 
   // How many columns do we have?
-  const columns = range.end.column-range.start.column;
+  const columns = (range.end.column-range.start.column)+1;
 
   let guesses = new Array(columns);
   if (range.end.row < range.start.row) {
@@ -471,7 +566,8 @@ exports.SessionGuessTypes = (sid, range) => {
 
   // Initialise state, that we will refine as we go
   for (let col=0;col<columns;col++) {
-    guesses[col] = {types: undefined,
+    guesses[col] = {safeTpes: undefined,
+                    maybeTypes: undefined,
                     full:true}; // This is unset if we find a blank/missing
                                 // value
   }
@@ -481,7 +577,7 @@ exports.SessionGuessTypes = (sid, range) => {
   const merges = sheet["!merges"];
 
   // Examine each row in turn, looking at the columns in parallel
-  for (let row = range.start.row; row < range.end.row; row++) {
+  for (let row = range.start.row; row <= range.end.row; row++) {
     let rowData = extractColsFromRow(getMergedRow(data, merges, row),
                                      range.start.column, range.end.column + 1);
     for(let col = 0; col < columns; col++) {
@@ -492,32 +588,87 @@ exports.SessionGuessTypes = (sid, range) => {
         // Blank cell, so mark the column as not full but don't reduce the list of guessed types
         guesses[col].full = false;
       } else if(possibleCellTypes) {
-        if(guesses[col].types) {
-          // Remove any types in the current guess that aren't possibly valid for
+        // Check if this is the first time we've seen this column. safeTypes and
+        // maybeTypes are both set at the same time, so we can use safeTypes
+        // being set as a proxy for both.
+        if(guesses[col].safeTypes) {
+          // Remove any safeTypes in the current guess that aren't possibly valid for
           // this cell
-          let newGuesses = new Map();
-          guesses[col].types.forEach((formats, typeName) => {
+          let newSafeGuesses = new Map();
+          guesses[col].safeTypes.forEach((formats, typeName) => {
             if(possibleCellTypes.has(typeName)) {
               if(formats) {
                 // Type with formats, so find the intersection of the current possible formats and this cell's possible formats
                 let possibleCellFormats = possibleCellTypes.get(typeName);
                 let newPossibleFormats = formats.filter(value => possibleCellFormats.includes(value));
-                newGuesses.set(typeName, newPossibleFormats);
+                newSafeGuesses.set(typeName, newPossibleFormats);
               } else {
                 // Type without formats
-                newGuesses.set(typeName, formats);
+                newSafeGuesses.set(typeName, formats);
               }
             }
+            // Add any types in the current guess to maybeTypes
+            possibleCellTypes.forEach((formats, typeName) => {
+              const maybe = guesses[col].maybeTypes;
+              if(formats) {
+                // Type with formats, so make sure we've added all the formats to the list
+                if(!maybe.has(typeName)) {
+                  maybe.set(typeName, []);
+                }
+                formats.forEach((format) => {
+                  if(!maybe.get(typeName).includes(format)) {
+                    maybe.get(typeName).push(format);
+                  }
+                });
+              } else {
+                // Type without formats, just set it to false
+                maybe.set(typeName, false);
+              }
+              guesses[col].maybeTypes = maybe;
+            });
           });
-          guesses[col].types = newGuesses;
+          guesses[col].safeTypes = newSafeGuesses;
         } else {
           // First cell examined, so start off with its possible types
-          guesses[col].types = possibleCellTypes;
+          guesses[col].safeTypes = possibleCellTypes;
+          guesses[col].maybeTypes = possibleCellTypes;
         }
       }
     }
   }
 
+  // Now we must go back through the guesses and remove any safe types/formats
+  // from the maybe types/formats, so "maybe" ONLY contains options that are
+  // valid for some *but not all* values; every safe type/format will be listed
+  // as a maybe type/format due to the process used above.
+
+  guesses.forEach((colGuesses) => {
+    let maybeTypes = colGuesses.maybeTypes;
+    colGuesses.safeTypes.forEach((safeFormats, typeName) => {
+      if(safeFormats) {
+        // It's a type with formats
+
+        // typeName will always be present in maybeTypes at this point
+        let formats = maybeTypes.get(typeName);
+        safeFormats.forEach((format) => {
+          const index = formats.indexOf(format);
+          // index will never be -1
+          formats.splice(index, 1);
+        });
+        // If this is the last format for this type in maybeTypes, remove it. We
+        // won't get any other safeTypes for this maybeType so there's no chance
+        // of the above code being invoked again, and failing because typeName is
+        // no longe rin maybeTypes.
+        if(formats.length == 0) {
+          maybeTypes.delete(typeName);
+        }
+      } else {
+        // It's a type without formats
+        maybeTypes.delete(typeName);
+      }
+    });
+  });
+
   return guesses;
 };
 
@@ -533,37 +684,9 @@ exports.SessionGuessTypes = (sid, range) => {
 // field "formats" that maps from format names (as returned by SessionGetTypes)
 // to objects with strings field "displayName" and "description".
 exports.SessionGetSupportedTypes = (sid) => {
-  return types.supportedTypes;
+  return attributeTypes.supportedTypes;
 };
 
-// Given guesses as returned by SessionGuessTypes and a list of domain-model
-// fields (with name and type fields), returns the type guesses with each column
-// augmented with a `fields` field - a Map mapping likely field names for this
-// column to an array of possible formats for that field.
-
-exports.SessionSuggestFields = (sid, typeGuesses, domainModelFields) => {
-  let result = [];
-
-  typeGuesses.forEach((colTypeGuess) => {
-    let fieldFormats = new Map(); // Map from field names to likely formats
-    // Examine every field, and check if they have a type that this column might
-    // contain
-    domainModelFields.forEach((field) => {
-      if(colTypeGuess.types.has(field.type)) {
-        // Add this field to the possibilities for the column, using the guessed
-        // formats
-        fieldFormats.set(field.name, colTypeGuess.types.get(field.type));
-      }
-    });
-
-    // Extend the column type guess with the "fields" field
-    let typeGuessesAndFields = Object.assign({}, colTypeGuess);
-    typeGuessesAndFields.fields = fieldFormats;
-    result.push(typeGuessesAndFields);
-  });
-
-  return result;
-};
 
 // Return the unique values in each column in the range. Return no more than
 // maxValues values for any given column. Return format is an array, one entry
diff --git a/lib/importer/src/dudk/backend.test.js b/lib/importer/src/dudk/backend.test.js
index 6d471fc3..06f40a69 100644
--- a/lib/importer/src/dudk/backend.test.js
+++ b/lib/importer/src/dudk/backend.test.js
@@ -603,21 +603,39 @@ test('guessing types', () => {
   const dataRange = {
     sheet: 'Sheet1',
     start: { row: 1, column: 0 },
-    end: { row: 6, column: 9 }
+    end: { row: 6, column: 8 }
   };
 
   const guesses = backend.SessionGuessTypes(sid, dataRange);
   expect(guesses).toMatchObject([
     // Order is actually irrelevant for all formats lists, so this test over-specifies a bit
-    {full:true, types:new Map([["number", false],["text", false]])},
-    {full:true, types:new Map([["date", ["ymd"]],["text", false]])},
-    {full:true, types:new Map([["date", ["ydm"]],["text", false]])},
-    {full:true, types:new Map([["date", ["dmy"]],["text", false]])},
-    {full:true, types:new Map([["date", ["mdy"]],["text", false]])},
-    {full:true, types:new Map([["date", ["ymd","ydm"]],["text", false]])},
-    {full:false, types:new Map([["number", false],["text", false]])},
-    {full:true, types:new Map([["text", false]])},
-    {full:false, types:new Map([["text", false]])}
+    {full:true,
+     safeTypes:new Map([["number", false],["text", false]]),
+     maybeTypes:new Map([])},
+    {full:true,
+     safeTypes:new Map([["date", ["ymd"]],["text", false]]),
+     maybeTypes: new Map([["date", ["ydm","dmy","mdy"]]])},
+    {full:true,
+     safeTypes:new Map([["date", ["ydm"]],["text", false]]),
+     maybeTypes: new Map([["date", ["ymd","dmy","mdy"]]])},
+    {full:true,
+     safeTypes:new Map([["date", ["dmy"]],["text", false]]),
+     maybeTypes: new Map([["date", ["mdy", "ymd"]]])},
+    {full:true,
+     safeTypes:new Map([["date", ["mdy"]],["text", false]]),
+     maybeTypes: new Map([["date", ["dmy"]]])},
+    {full:true,
+     safeTypes:new Map([["date", ["ymd","ydm"]],["text", false]]),
+     maybeTypes: new Map([])},
+    {full:false,
+     safeTypes:new Map([["number", false],["text", false]]),
+     maybeTypes: new Map([])},
+    {full:true,
+     safeTypes:new Map([["text", false]]),
+     maybeTypes: new Map([])},
+    {full:false,
+     safeTypes:new Map([["text", false]]),
+     maybeTypes: new Map([])}
   ]);
 
   const fieldSuggestions = backend.SessionSuggestFields(sid, guesses, [
@@ -645,48 +663,65 @@ test('guessing types', () => {
 
   expect(fieldSuggestions).toMatchObject([
     // Order is actually irrelevant for all formats lists, so this test over-specifies a bit
-    {full:true, types:new Map([["number", false],["text", false]]),
-     fields: new Map([
-       ["numberField",false],
-       ["textField",false]
+    // ABS FIXME add maybeFields
+    {safeFields: new Map([
+      ["numberField",false],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([])},
+
+    {safeFields: new Map([
+      ["dateField",["ymd"]],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([
+       ["dateField",["ydm","dmy","mdy"]]
      ])},
-    {full:true, types:new Map([["date", ["ymd"]],["text", false]]),
-     fields: new Map([
-       ["dateField",["ymd"]],
-       ["textField",false]
-     ])},
-    {full:true, types:new Map([["date", ["ydm"]],["text", false]]),
-     fields: new Map([
-       ["dateField",["ydm"]],
-       ["textField",false]
-     ])},
-    {full:true, types:new Map([["date", ["dmy"]],["text", false]]),
-     fields: new Map([
-       ["dateField",["dmy"]],
-       ["textField",false]
-     ])},
-    {full:true, types:new Map([["date", ["mdy"]],["text", false]]),
-     fields: new Map([
-       ["dateField",["mdy"]],
-       ["textField",false]
-     ])},
-    {full:true, types:new Map([["date", ["ymd","ydm"]],["text", false]]),
-     fields: new Map([
-       ["dateField",["ymd","ydm"]],
-       ["textField",false]
+
+    {safeFields: new Map([
+      ["dateField",["ydm"]],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([
+       ["dateField",["ymd","dmy","mdy"]]
      ])},
-    {full:false, types:new Map([["number", false],["text", false]]),
-     fields: new Map([
-       ["numberField",false],
-       ["textField",false]
+
+    {safeFields: new Map([
+      ["dateField",["dmy"]],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([
+       ["dateField",["mdy","ymd"]]
      ])},
-    {full:true, types:new Map([["text", false]]),
-     fields: new Map([
-       ["textField",false]
+
+    {safeFields: new Map([
+      ["dateField",["mdy"]],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([
+       ["dateField",["dmy"]]
      ])},
-    {full:false, types:new Map([["text", false]]),
-     fields: new Map([
-       ["textField",false]
-     ])}
+
+    {safeFields: new Map([
+      ["dateField",["ymd","ydm"]],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([])},
+
+    {safeFields: new Map([
+      ["numberField",false],
+      ["textField",false]
+    ]),
+     maybeFields: new Map([])},
+
+    {safeFields: new Map([
+      ["textField",false]
+    ]),
+     maybeFields: new Map([])},
+
+    {safeFields: new Map([
+      ["textField",false]
+    ]),
+     maybeFields: new Map([])}
   ]);
 });
diff --git a/lib/importer/src/dudk/sheets.js b/lib/importer/src/dudk/sheets.js
index f8841a31..4e4ab2e3 100644
--- a/lib/importer/src/dudk/sheets.js
+++ b/lib/importer/src/dudk/sheets.js
@@ -253,10 +253,11 @@ exports.GetColumnValues = (sid, sheet, columnIndex, cellWidth = 30, count = 10)
 };
 
 
-// Convert source mapping (a map from column index -> attribute name) into a mapping for the backend
-// TODO: This should be in the front-end and we should set expectations for what the mapping should
-// look like when sending to the backend.
-const RewriteMapping = (mapping, fields) => {
+// Convert source mapping (a map from column index -> attribute name) and format
+// choices (a map from column index -> format) into a mapping for the backend
+// TODO: This should be in the front-end and we should set expectations for what
+// the mapping should look like when sending to the backend.
+const RewriteMapping = (mapping, formats, fields) => {
   let rewrittenMapping = new Map();
 
   const attrTypes = {}
@@ -268,8 +269,7 @@ const RewriteMapping = (mapping, fields) => {
 
     const f = fields.find((x) => x.name == attributeName)
     if (f) {
-      // FIXME: Actually let the user pick a format, for types that need one. Hardcoding "false" for now.
-      attrTypes[f.name] = attributeTypes.mapperForField(f, false)
+      attrTypes[f.name] = attributeTypes.mapperForField(f, formats[columnIndex])
     }
   }
 
@@ -282,7 +282,7 @@ const RewriteMapping = (mapping, fields) => {
 // Uses the session ID provided, which must contain a sheet name and a
 // mapping to perform the mapping of the data across the remaining
 // rows in the sheet to return an array of objects.
-exports.MapData = (sid, sheet, mapping, fields, previewLimit = DEFAULT_PREVIEW_LIMIT) => {
+exports.MapData = (sid, sheet, mapping, formats, fields, previewLimit = DEFAULT_PREVIEW_LIMIT) => {
   const hRange = backend.SessionGetHeaderRange(sid, sheet)
   const fRange = backend.SessionGetFooterRange(sid, sheet)
 
@@ -290,7 +290,7 @@ exports.MapData = (sid, sheet, mapping, fields, previewLimit = DEFAULT_PREVIEW_L
   const rowRange = backend.SessionSuggestDataRange(sid, hRange, fRange);
 
   // Convert source mapping (a map from column index -> attribute name) into a mapping for the backend
-  let rewrittenMapping = RewriteMapping(mapping, fields)
+  let rewrittenMapping = RewriteMapping(mapping, formats, fields)
 
   // Apply the mapping
   const backendJid = backend.SessionPerformMappingJob(sid, rowRange, rewrittenMapping);
diff --git a/lib/importer/src/dudk/types/attribute-types.js b/lib/importer/src/dudk/types/attribute-types.js
index 08d85182..c509c438 100644
--- a/lib/importer/src/dudk/types/attribute-types.js
+++ b/lib/importer/src/dudk/types/attribute-types.js
@@ -74,19 +74,19 @@ exports.mapperForField = (field,format) => {
     case "native":
       // Date with no format spec relies on pre-parsed date values
       // being provided by spreadsheet formats
-      m = dates.MakeCombinedDateType([]);
+      m = dates.makeCombinedDateType([]);
       break;
     case "ymd":
-      m = dates.MakeCombinedDateType(['year','month','day']);
+      m = dates.makeCombinedDateType(['year','month','day']);
       break;
     case "ydm":
-      m = dates.MakeCombinedDateType(['year','day','month']);
+      m = dates.makeCombinedDateType(['year','day','month']);
       break;
     case "dmy":
-      m = dates.MakeCombinedDateType(['day','month','year']);
+      m = dates.makeCombinedDateType(['day','month','year']);
       break;
     case "mdy":
-      m = dates.MakeCombinedDateType(['month','day','year']);
+      m = dates.makeCombinedDateType(['month','day','year']);
       break;
     default:
       throw new Error("Unknown date format", format);
@@ -111,10 +111,10 @@ exports.supportedTypes = new Map([
   ["boolean", {displayName: "Y/N", description: "A 'Yes' or 'No'"}],
   ["date", {displayName: "Date", description: "A full date (eg Year, Month and Day number)",
             formats: new Map([
-              ["native", {displayName: "Spreadsheet", description: "A date cell in a spreadsheet"}],
-              ["ymd", {displayName: "Y/M/D", description: "A date written in Year, Month, Day order"}],
-              ["ydm", {displayName: "Y/D/M", description: "A date written in Year, Day, Month order"}],
-              ["dmy", {displayName: "D/M/Y", description: "A date written in Day, Month, Year order"}],
-              ["mdy", {displayName: "M/D/Y", description: "A date written in Month, Day, Year order"}]
+              ["native", {displayName: "Spreadsheet Date", description: "A date cell in a spreadsheet"}],
+              ["ymd", {displayName: "Year, Month, Day", description: "A date written in Year, Month, Day order"}],
+              ["ydm", {displayName: "Year, Day, Month", description: "A date written in Year, Day, Month order"}],
+              ["dmy", {displayName: "Day, Month, Year", description: "A date written in Day, Month, Year order"}],
+              ["mdy", {displayName: "Month, Day, Year", description: "A date written in Month, Day, Year order"}]
             ])}]
 ]);
diff --git a/lib/importer/src/dudk/types/guesser.js b/lib/importer/src/dudk/types/guesser.js
index e7c251a5..3d63b962 100644
--- a/lib/importer/src/dudk/types/guesser.js
+++ b/lib/importer/src/dudk/types/guesser.js
@@ -35,6 +35,18 @@ const TYPE_PATTERNS = [
 
 exports.TYPE_PATTERNS = TYPE_PATTERNS;
 
+// Does the format string look like a date?  See "Common Date-Time Formats" at
+// https://docs.sheetjs.com/docs/csf/features/dates for the source of these
+// patterns.
+const formatStringPartRE = new RegExp("[^a-zA-Z]+");
+// Note that m and mm can also represent minutes in time formats
+const formatStringDateParts = ["yy","yyyy","m","mm","mmm","mmmm","mmmmm","d","dd","ddd","dddd"];
+function isDateFormat(fmt) {
+  const parts = fmt.split(formatStringPartRE);
+  // Is every token in the format string valid for a date format?
+  return parts.every((part) => formatStringDateParts.includes(part));
+}
+
 // Given a sheet.js field, return two values. First is a list of possible types
 // for it, as a map from type names to either:
 
@@ -64,6 +76,19 @@ exports.ListPossibleTypes = (field) => {
   case "z": // Empty cell
     // Either way, we can't narrow the set of possible types, but it's a blank cell
     return [false, true];
+  case "d": // Date or time or both
+    if(field.z) {
+      if(isDateFormat(field.z)) {
+        possibleTypes.set("date", ["native"]);
+      }
+      // FIXME: Add cases for time formats, eg "h:mm", when we support them
+      return [possibleTypes, isBlank];
+    } else {
+      // Field format code in field.z should always be present, but let's fail
+      // quietly if not rather than ruining the whole import
+      return [possibleTypes, isBlank];
+    }
+    break;
   case "s":
     // String
     if(isBlank) {
diff --git a/lib/importer/src/functions.js b/lib/importer/src/functions.js
index 827b802a..8cae1103 100644
--- a/lib/importer/src/functions.js
+++ b/lib/importer/src/functions.js
@@ -1,6 +1,7 @@
 
 const sheets_lib = require("./dudk/sheets.js");
 const session_lib = require("./session.js");
+const backend_lib = require("./dudk/backend.js");
 
 const IMPORTER_SESSION_KEY = "importer.session";
 const IMPORTER_ERROR_KEY = "importer.error";
@@ -48,10 +49,101 @@ const importerErrorMappingData = (error, key) => {
         return ""
     }
 
+    // ABS FIXME: Do we need to remove a field- or mapping- prefix from k before parseInt?
     const m = new Map(Object.entries(error.data).map(([k, v]) => [parseInt(k), v]))
     return m.get(key) || ""
 }
 
+//--------------------------------------------------------------------
+// As long as column->field mappings have been set up, this function will return
+// an array indexed on column, with each element being of the form { fieldName:
+// <field name>, typeName: <type name> } if the column is to be mapped to a
+// field, or false if not.
+//--------------------------------------------------------------------
+const importerMappedColumnDetails = (data) => {
+    const session_data = data[IMPORTER_SESSION_KEY];
+    const session = new session_lib.Session(session_data);
+    const supportedTypes = backend_lib.SessionGetSupportedTypes(session.backendSid);
+    const mappings = backend_lib.SessionGetMappingRules(session.backendSid);
+
+    return Object.entries(mappings).map((entry) => {
+        const columnField = entry[1];
+        if (!columnField) return false; // Skip unmapped columns
+        const columnDef = session.fields.find((field) => field.name == columnField);
+        const columnTypeName = columnDef.type;
+        const columnType = supportedTypes.get(columnTypeName);
+        return {
+            fieldName: columnField,
+            typeName: columnType.displayName
+        };
+    });
+};
+
+//--------------------------------------------------------------------
+// As long as column->field mappings have been set up, this function will return
+// an array indexed on column, with each element being list of possible formats
+// for that column. The array element for a column will be false if the column
+// is mapped to a field whose type does not require formats, otherwise it will
+// be TWO lists of objects with 'name' (internal code), 'displayName'
+// (human-facing name) and 'description' (longer description) fields. The first
+// is "safe" formats that will work for all the values in the column, the second
+// are "maybe" formats that will work for some of them. Those that work for none
+// of them are not present at all.
+// --------------------------------------------------------------------
+const importerPossibleColumnFormats = (data) => {
+    // FIXME: This should probably move into the backend, as a SessionSuggestFormats function
+    const session_data = data[IMPORTER_SESSION_KEY];
+    const session = new session_lib.Session(session_data);
+    const supportedTypes = backend_lib.SessionGetSupportedTypes(session.backendSid);
+    const mappings = backend_lib.SessionGetMappingRules(session.backendSid);
+    const hRange = backend_lib.SessionGetHeaderRange(session.backendSid, session.sheet)
+    const fRange = backend_lib.SessionGetFooterRange(session.backendSid, session.sheet)
+    const dataRange = backend_lib.SessionSuggestDataRange(session.backendSid, hRange, fRange);
+    const typeGuesses = backend_lib.SessionGuessTypes(session.backendSid, dataRange);
+
+    return Object.entries(mappings).map((entry) => {
+        const [colIndex, columnField] = entry;
+        if (!columnField) return false; // Skip unmapped columns
+        const columnGuesses = typeGuesses[colIndex];
+        const columnDef = session.fields.find((field) => field.name == columnField);
+        const columnTypeName = columnDef.type;
+        const columnType = supportedTypes.get(columnTypeName);
+
+        let safeFormats = new Set(); // Names of formats this column is likely to have, according to the guesser
+        if (columnGuesses.safeTypes && columnGuesses.safeTypes.has(columnTypeName)) {
+            const guessedFormats = columnGuesses.safeTypes.get(columnTypeName);
+            if(guessedFormats && columnType.formats) {
+                safeFormats = new Set(Array.from(columnType.formats.keys()).filter((fmtName) => guessedFormats.includes(fmtName)));
+            }
+        }
+
+        let maybeFormats = new Set(); // Names of formats this column merely might have, according to the guesser
+        if (columnGuesses.maybeTypes && columnGuesses.maybeTypes.has(columnTypeName)) {
+            const guessedFormats = columnGuesses.maybeTypes.get(columnTypeName);
+            if(guessedFormats && columnType.formats) {
+                maybeFormats = new Set(Array.from(columnType.formats.keys()).filter((fmtName) => guessedFormats.includes(fmtName)));
+            }
+        }
+
+        if (columnType.formats) {
+            const options = Array.from(columnType.formats.entries()).map((fmtEntry) => {
+                return {
+                    name: fmtEntry[0],
+                    displayName: fmtEntry[1].displayName,
+                    description: fmtEntry[1].description,
+                    safe: safeFormats.has(fmtEntry[0]),
+                    maybe: maybeFormats.has(fmtEntry[0])
+                };
+            });
+            const formats = [options.filter((fmtEntry) => fmtEntry.safe),
+                             options.filter((fmtEntry) => fmtEntry.maybe)];
+            return formats;
+        } else {
+            return false;
+        }
+    });
+}
+
 //--------------------------------------------------------------------
 // Allows a template to obtain `count` rows from the start of the data
 // range.
@@ -81,19 +173,19 @@ const importerGetTrailingRows = (data, count) => {
 //     "All {n} rows of {sheet}"
 //--------------------------------------------------------------------
 const importerGetTableCaption =
-    (data, prefix, rowsAskedFor, sheetName = null) => {
-        const session_data = data[IMPORTER_SESSION_KEY];
-        const session = new session_lib.Session(session_data)
+      (data, prefix, rowsAskedFor, sheetName = null) => {
+          const session_data = data[IMPORTER_SESSION_KEY];
+          const session = new session_lib.Session(session_data)
 
-        const sheet = (sheetName ??= session.sheet);
-        const rowCount = sheets_lib.GetTotalRows(session.backendSid, sheet);
+          const sheet = (sheetName ??= session.sheet);
+          const rowCount = sheets_lib.GetTotalRows(session.backendSid, sheet);
 
-        if (rowCount > rowsAskedFor) {
-            return `${prefix} ${rowsAskedFor} rows of '${sheet}'`;
-        }
+          if (rowCount > rowsAskedFor) {
+              return `${prefix} ${rowsAskedFor} rows of '${sheet}'`;
+          }
 
-        return `All rows of '${sheet}'`;
-    }
+          return `All rows of '${sheet}'`;
+      }
 
 //--------------------------------------------------------------------
 // In the absence of a step to choose headers, we will instead provide
@@ -131,8 +223,8 @@ const importerGetHeaders = (data) => {
                 session.backendSid,
                 session.sheet,
                 index,
-          /* cellWidth */ 20,
-          /* count */ 5,
+                /* cellWidth */ 20,
+                /* count */ 5,
             ).inputValues;
 
             let exampleString = examples.join(", ").trim();
@@ -156,7 +248,7 @@ const importerMappedData = (data) => {
     const session_data = data[IMPORTER_SESSION_KEY];
     const session = new session_lib.Session(session_data)
 
-    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.fields);
+    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.formats, session.fields);
     const headers = session.fields;
 
     return {
@@ -200,7 +292,7 @@ const data_sum = (data, column) => {
     const session_data = data[IMPORTER_SESSION_KEY];
     const session = new session_lib.Session(session_data)
 
-    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.fields);
+    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.formats, session.fields);
     const headers = session.fields;
 
     const idx = headers.findIndex((x) => x.name == column)
@@ -220,7 +312,7 @@ const data_avg = (data, column) => {
     const session_data = data[IMPORTER_SESSION_KEY];
     const session = new session_lib.Session(session_data)
 
-    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.fields);
+    const mapResults = sheets_lib.MapData(session.backendSid, session.sheet, session.mapping, session.formats, session.fields);
     const headers = session.fields;
 
     const idx = headers.findIndex((x) => x.name == column)
@@ -229,8 +321,8 @@ const data_avg = (data, column) => {
     }
 
     const numbers = mapResults.resultRecords
-        .filter((x) => x !== undefined && x[idx] !== undefined)
-        .map((x) => parseNumberFromString(x[idx]))
+          .filter((x) => x !== undefined && x[idx] !== undefined)
+          .map((x) => parseNumberFromString(x[idx]))
 
 
     const avg = numbers.reduce((acc, i) => acc + i, 0) / numbers.length
@@ -261,6 +353,8 @@ const parseNumberFromString = (s) => {
 module.exports = {
     importerError,
     importerErrorMappingData,
+    importerPossibleColumnFormats,
+    importerMappedColumnDetails,
     importSheetPreview,
     importerGetRows,
     importerGetHeaders,
@@ -273,3 +367,9 @@ module.exports = {
     data_sum,
     data_avg
 }
+
+/*
+  Local Variables:
+  js-indent-level: 4
+  End:
+*/
diff --git a/lib/importer/src/index.js b/lib/importer/src/index.js
index 74e3a1e2..88328bb7 100644
--- a/lib/importer/src/index.js
+++ b/lib/importer/src/index.js
@@ -2,6 +2,7 @@ const multer = require("multer");
 const conf = require("./config.js");
 const fs = require("node:fs");
 const path = require("node:path");
+const backend = require("./dudk/backend.js");
 const session_lib = require("./session.js");
 const sheets_lib = require("./dudk/sheets.js");
 const tpl_functions = require("./functions.js")
@@ -385,35 +386,66 @@ exports.Initialise = (config, router, prototypeKit) => {
 
       request.session.data['reference_number'] = session.id.match(/\d+/g).join("").substring(0, 8);
 
-      session.mapping = request.body;
+      // This request might set up field mappings, field formats, or both (or
+      // even neither, but that would be weird) so we update those parts of the
+      // session relevant to what we've been sent. Hidden fields called
+      // "formats-present" or "mappings-present" are used to tell us what parts
+      // of the session we should be updating. We can't just use "absence of any
+      // fields" because there's no way to distinguish "clearing the relevant
+      // part of the session out" from "not updating that part of the session",
+      // which might cause us footguns in future.
+
+      if(request.body['formats-present'] == 'yes') {
+        const formats = Object.fromEntries(Object.entries(request.body)
+                                             .filter((f) => f[0].startsWith("format-"))
+                                           .map((f) => [f[0].substring(7),f[1]])); // 7 = length of "format-"
+        session.formats = formats;
+      }
+
+      if(request.body['mappings-present'] == 'yes') {
+        session.mapping = Object.fromEntries(Object.entries(request.body)
+                                  .filter((f) => f[0].startsWith("field-"))
+                                  .map((f) => [f[0].substring(6),f[1]])); // 6 = length of "field-"
 
-      const values = new Array();
+        const values = new Array();
 
-      for (const value of Object.values(session.mapping)) {
-        if (value != '') {
-          values.push(value)
+        for (const value of Object.values(session.mapping)) {
+          if (value != '') {
+            values.push(value)
+          }
         }
-      }
 
-      // For each key in the config that is required, we need to ensure that the field name is present
-      // in the values array. If not then we will
-      const required_fields = plugin_config.fields
-        .filter((f) => f.required)
-        .filter((f) => !values.includes(f.name))
-        .map((f) => f.name)
-
-      // If required_fields has any values left, then they are required fields not present in the
-      // mapping. In which case we should return an error for the user.
-      if (required_fields.length > 0) {
-        request.session.data[IMPORTER_ERROR_KEY] = "The following fields are required"
-        request.session.data[IMPORTER_ERROR_EXTRA_KEY] = required_fields
-        request.session.data[IMPORTER_ERROR_DATA_KEY] = session.mapping
-        response.redirect(request.get('Referrer'));
-        return;
-      } else {
-        delete request.session.data[IMPORTER_ERROR_KEY]
-        delete request.session.data[IMPORTER_ERROR_EXTRA_KEY]
-        delete request.session.data[IMPORTER_ERROR_DATA_KEY]
+        // For each key in the config that is required, we need to ensure that the field name is present
+        // in the values array. If not then we will
+        const required_fields = plugin_config.fields
+              .filter((f) => f.required)
+              .filter((f) => !values.includes(f.name))
+              .map((f) => f.name)
+
+        // If required_fields has any values left, then they are required fields not present in the
+        // mapping. In which case we should return an error for the user.
+        if (required_fields.length > 0) {
+          request.session.data[IMPORTER_ERROR_KEY] = "The following fields are required"
+          request.session.data[IMPORTER_ERROR_EXTRA_KEY] = required_fields
+          request.session.data[IMPORTER_ERROR_DATA_KEY] = session.mapping
+          response.redirect(request.get('Referrer'));
+          return;
+        } else {
+          delete request.session.data[IMPORTER_ERROR_KEY]
+          delete request.session.data[IMPORTER_ERROR_EXTRA_KEY]
+          delete request.session.data[IMPORTER_ERROR_DATA_KEY]
+        }
+
+        // If we are processing mappings, AND we are given two next-page paths
+        // to consider, then we should select the other next page if there are
+        // no format choices to be made
+        if ("other" in request.query) {
+          const columnsNeedingFormats = backend.SessionGetColumnsNeedingFormats(session.backendSid);
+          if(columnsNeedingFormats.length == 0) {
+            const otherPage = decodeURIComponent(request.query.other);
+            if (otherPage) { request.query.next = request.query.other }
+          }
+        }
       }
 
       // Ensure the session is persisted. Currently in session, eventually another way
diff --git a/lib/importer/src/session.js b/lib/importer/src/session.js
index 1f2a8254..4e9482ad 100644
--- a/lib/importer/src/session.js
+++ b/lib/importer/src/session.js
@@ -14,6 +14,7 @@ class Session {
       backend.SessionSetFile(this.backendSid, p.filename);
     }
 
+    backend.SessionSetAttributes(this.backendSid, p.fields);
     this.fields = p.fields;
     this.sheet = p.sheet ?? "";
   }
@@ -57,6 +58,14 @@ class Session {
     backend.SessionSetMappingRules(this.backendSid, rules)
   }
 
+  get formats() {
+    return backend.SessionGetFormatChoices(this.backendSid)
+  }
+
+  set formats(fmt) {
+    backend.SessionSetFormatChoices(this.backendSid, fmt)
+  }
+
 }
 
 class Range {
diff --git a/lib/importer/templates/format.html b/lib/importer/templates/format.html
new file mode 100644
index 00000000..cc0f2bcb
--- /dev/null
+++ b/lib/importer/templates/format.html
@@ -0,0 +1,37 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %} {{ serviceName }} – GOV.UK Prototype Kit {% endblock %}
+
+{% block beforeContent %}
+{{ govukBackLink({ text: "Back", href: "javascript:window.history.back()" }) }}
+{% endblock %}
+
+{% from "importer/macros/format_picker.njk" import dudkFormatPicker %}
+
+{% block content %}
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+        <h1 class="govuk-heading-l">Identify columns</h1>
+        <p class="govuk-body">
+            One or more columns may contain data represented in one of a number
+            of formats, such as dates. Please select the format your file uses
+            in the table below. Formats that appear to match the data found in
+            your file are marked with an asterisk (*).
+        </p>
+
+        <h2 class="govuk-heading-m">{{sheet}}</h2>
+
+        <form action="{{ importerMapDataPath('/review') }}" method="post">
+
+            {{ dudkFormatPicker({data: data}) }}
+
+            <div class="govuk-grid-column-two-thirds">
+                <div class="govuk-button-group">
+                    {{ govukButton({ text: "Submit" }) }}
+                </div>
+            </div>
+
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/lib/importer/templates/mapping.html b/lib/importer/templates/mapping.html
index 68df3985..5665c496 100644
--- a/lib/importer/templates/mapping.html
+++ b/lib/importer/templates/mapping.html
@@ -20,7 +20,7 @@ <h1 class="govuk-heading-l">Identify columns</h1>
 
         <h2 class="govuk-heading-m">{{sheet}}</h2>
 
-        <form action="{{ importerMapDataPath('/review') }}" method="post">
+        <form action="{{ importerMapDataPath('/format','/review') }}" method="post">
 
             {{ dudkFieldMapper({data: data}) }}
 
diff --git a/prototypes/basic/app/config.json b/prototypes/basic/app/config.json
index 35a32895..2b107a74 100644
--- a/prototypes/basic/app/config.json
+++ b/prototypes/basic/app/config.json
@@ -24,7 +24,7 @@
         {
             "name": "Employment start date",
             "required": false,
-            "type": "text"
+            "type": "date"
         },
         {
             "name": "Salary",
diff --git a/prototypes/basic/app/views/format.html b/prototypes/basic/app/views/format.html
new file mode 100644
index 00000000..19613df2
--- /dev/null
+++ b/prototypes/basic/app/views/format.html
@@ -0,0 +1,70 @@
+{% extends "layouts/main.html" %}
+
+{% block pageTitle %} {{ serviceName }} – GOV.UK Prototype Kit {% endblock %}
+
+{% block beforeContent %}
+{{
+    govukBreadcrumbs({
+      items: [
+        {
+          text: "Home",
+          href: "/"
+        },
+        {
+            text: "Upload spreadsheet",
+            href: "/upload"
+        },
+        {
+          text: "Select sheet",
+          href: "/select_sheet"
+        },
+        {
+            text: "Select header row",
+            href: "/select_header_row"
+        },
+        {
+            text: "Select footer row",
+            href: "/select_footer_row"
+        },
+        {
+            text: "Identify columns",
+            href: "/mapping"
+        },
+        {
+	    text: "Choose formats",
+            href: "/format"
+        }
+      ]
+    })
+  }}
+{% endblock %}
+
+{% from "importer/macros/format_picker.njk" import dudkFormatPicker %}
+
+{% block content %}
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+        <h1 class="govuk-heading-l">Choose formats</h1>
+        <p class="govuk-body">
+            One or more columns may contain data represented in one of a number
+            of formats, such as dates. Please select the format your file uses
+            in the table below. Formats that appear to match the data found in
+            your file are marked with an asterisk (*).
+        </p>
+
+        <h2 class="govuk-heading-m">{{sheet}}</h2>
+
+        <form action="{{ importerMapDataPath('/review') }}" method="post">
+
+            {{ dudkFormatPicker({data: data}) }}
+
+            <div class="govuk-grid-column-two-thirds">
+                <div class="govuk-button-group">
+                    {{ govukButton({ text: "Submit" }) }}
+                </div>
+            </div>
+
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/prototypes/basic/app/views/mapping.html b/prototypes/basic/app/views/mapping.html
index 6dac044c..c8cf6044 100644
--- a/prototypes/basic/app/views/mapping.html
+++ b/prototypes/basic/app/views/mapping.html
@@ -49,7 +49,7 @@ <h1 class="govuk-heading-l">Identify columns</h1>
 
         <h2 class="govuk-heading-m">{{sheet}}</h2>
 
-        <form action="{{ importerMapDataPath('/review') }}" method="post">
+        <form action="{{ importerMapDataPath('/format','/review') }}" method="post">
 
             {{ dudkFieldMapper({data: data}) }}
 
diff --git a/prototypes/basic/tests/helpers/mapping_page.js b/prototypes/basic/tests/helpers/mapping_page.js
index 0cd2ca1e..74b870f2 100644
--- a/prototypes/basic/tests/helpers/mapping_page.js
+++ b/prototypes/basic/tests/helpers/mapping_page.js
@@ -39,7 +39,7 @@ export class MappingPage {
     setMapping = async(columnName, fieldName) => {
         let cols = await this.getColumnNames()
         let idx = cols.findIndex((x)=>x == columnName);
-        await this.p.locator(`[name='${idx}']`).selectOption(fieldName)
+        await this.p.locator(`[name='field-${idx}']`).selectOption(fieldName)
     }
 
     submit = async() => {