diff --git a/karma.conf.js b/karma.conf.js
index b147a3fcd..cd85f5837 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -16,10 +16,14 @@ module.exports = function(config) {
     frameworks: ['mocha'],
     files: [
       'test/index.js',
-      { pattern: 'public/fonts/icomoon.ttf', included: false, served: true }
+      { pattern: 'public/fonts/icomoon.ttf', served: true, included: false },
+      { pattern: 'public/blank.html', served: true, included: false },
+      { pattern: 'test/files/*', served: true, included: false }
     ],
     proxies: {
-      '/fonts/': '/base/public/fonts/'
+      '/fonts/': '/base/public/fonts/',
+      '/blank.html': '/base/public/blank.html',
+      '/test/files/': '/base/test/files/'
     },
     preprocessors: {
       'test/index.js': ['webpack', 'sourcemap']
diff --git a/public/blank.html b/public/blank.html
new file mode 100644
index 000000000..f588dd3aa
--- /dev/null
+++ b/public/blank.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!--
+Copyright 2019 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/opendatakit/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>ODK Central</title>
+  </head>
+  <body></body>
+</html>
diff --git a/src/components/form/show.vue b/src/components/form/show.vue
index 8333076d1..769a58328 100644
--- a/src/components/form/show.vue
+++ b/src/components/form/show.vue
@@ -48,10 +48,10 @@ except according to the terms contained in the LICENSE file.
       <loading
         :state="$store.getters.initiallyLoading(['project', 'form', 'attachments'])"/>
       <div v-show="project != null && form != null && attachments != null">
-        <!-- We only include FormSubmissionList, because it is the only
-        component whose state we want to preserve when the user navigates to a
-        different tab. -->
-        <keep-alive include="FormSubmissionList">
+        <!-- We only include SubmissionList, because it is the only component
+        whose state we want to preserve when the user navigates to a different
+        tab. -->
+        <keep-alive include="SubmissionList">
           <!-- <router-view> is immediately created and can send its own
           requests even before the server has responded to the requests from
           ProjectHome and FormShow. -->
@@ -65,7 +65,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
-import FormSubmissionList from './submission/list.vue';
+import SubmissionList from '../submission/list.vue';
 import tab from '../../mixins/tab';
 import { requestData } from '../../store/modules/request';
 
@@ -84,10 +84,10 @@ export default {
   },
   data() {
     return {
-      // Passing these to FormSubmissionList in order to facilitate
-      // FormSubmissionList testing.
-      submissionChunkSizes: FormSubmissionList.props.chunkSizes.default(),
-      scrolledToBottom: FormSubmissionList.props.scrolledToBottom.default
+      // Passing these to SubmissionList in order to facilitate SubmissionList
+      // testing.
+      submissionChunkSizes: SubmissionList.props.chunkSizes.default(),
+      scrolledToBottom: SubmissionList.props.scrolledToBottom.default
     };
   },
   computed: {
diff --git a/src/components/form/submission/list.vue b/src/components/form/submission/list.vue
deleted file mode 100644
index d540b339a..000000000
--- a/src/components/form/submission/list.vue
+++ /dev/null
@@ -1,553 +0,0 @@
-<!--
-Copyright 2017 ODK Central Developers
-See the NOTICE file at the top-level directory of this distribution and at
-https://github.com/opendatakit/central-frontend/blob/master/NOTICE.
-
-This file is part of ODK Central. It is subject to the license terms in
-the LICENSE file found in the top-level directory of this distribution and at
-https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
-including this file, may be copied, modified, propagated, or distributed
-except according to the terms contained in the LICENSE file.
--->
-<template>
-  <div v-if="form != null">
-    <float-row class="table-actions">
-      <template slot="left">
-        <refresh-button :configs="configsForRefresh"/>
-      </template>
-      <template v-if="submissions != null && submissions.length !== 0"
-        slot="right">
-        <a id="form-submission-list-download-button" :href="downloadHref"
-          class="btn btn-primary" target="_blank">
-          <span class="icon-arrow-circle-down"></span>Download all
-          {{ $pluralize('record', form.submissions, true) }}
-        </a>
-        <button id="form-submission-list-analyze-button" type="button"
-          class="btn btn-primary" @click="showModal('analyze')">
-          <span class="icon-plug"></span>Analyze via OData
-        </button>
-      </template>
-    </float-row>
-    <p v-if="submissions != null && submissions.length === 0">
-      There are no submissions yet for <strong>{{ form.nameOrId() }}</strong>.
-    </p>
-    <template v-else-if="schema != null && submissions != null">
-      <!-- This table element contains the frozen columns of the submissions
-      table, which contain metadata about each submission. -->
-      <table id="form-submission-list-table1" class="table table-condensed">
-        <thead>
-          <tr>
-            <th><!-- Row number --></th>
-            <th>Submitted by</th>
-            <th>Submitted at</th>
-          </tr>
-        </thead>
-        <tbody>
-          <form-submission-row v-for="(submission, index) in submissions"
-            :key="submission.__id" :project-id="projectId"
-            :submission="submission" :row-number="originalCount - index"/>
-        </tbody>
-      </table>
-      <!-- The next table element contains the form-field data and instance ID
-      of each submission. -->
-      <div id="form-submission-list-table2-container">
-        <table id="form-submission-list-table2" :class="table2Class">
-          <thead>
-            <tr>
-              <!-- Adding a title attribute in case the column header is so long
-              that it is truncated. -->
-              <th v-for="column of fieldColumns" :key="column.key"
-                :class="column.htmlClass" :title="column.header">
-                {{ column.header }}
-              </th>
-              <th>Instance ID</th>
-            </tr>
-          </thead>
-          <tbody>
-            <form-submission-row v-for="submission of submissions"
-              :key="submission.__id" :project-id="projectId" :form="form"
-              :submission="submission" :field-columns="fieldColumns"/>
-          </tbody>
-        </table>
-      </div>
-    </template>
-    <div v-if="message != null" id="form-submission-list-message">
-      <div id="form-submission-list-spinner-container">
-        <spinner :state="message.spinner"/>
-      </div>
-      <div id="form-submission-list-message-text">{{ message.text }}</div>
-    </div>
-    <form-submission-analyze :project-id="projectId" :state="analyze.state"
-      @hide="hideModal('analyze')"/>
-  </div>
-</template>
-
-<script>
-import FormSubmissionAnalyze from './analyze.vue';
-import FormSubmissionRow from './row.vue';
-import modal from '../../../mixins/modal';
-import { requestData } from '../../../store/modules/request';
-
-const MAX_SMALL_CHUNKS = 4;
-
-export default {
-  name: 'FormSubmissionList',
-  components: { FormSubmissionAnalyze, FormSubmissionRow },
-  mixins: [modal()],
-  props: {
-    projectId: {
-      type: String,
-      required: true
-    },
-    xmlFormId: {
-      type: String,
-      required: true
-    },
-    chunkSizes: {
-      type: Object,
-      default: () => ({ small: 250, large: 1000 })
-    },
-    // Function that returns true if the user has scrolled to the bottom of the
-    // page (or close to it) and false if not. Implementing this as a prop in
-    // order to facilitate testing.
-    scrolledToBottom: {
-      type: Function,
-      default: () =>
-        // Using pageYOffset rather than scrollY in order to support IE.
-        window.pageYOffset + window.innerHeight >= document.body.offsetHeight - 5
-    }
-  },
-  data() {
-    return {
-      submissions: null,
-      instanceIds: new Set(),
-      // The count of submissions at the time of the initial fetch or last
-      // refresh
-      originalCount: null,
-      // The number of chunks that have been fetched since the initial fetch or
-      // last refresh
-      chunkCount: 0,
-      message: null,
-      analyze: {
-        state: false
-      }
-    };
-  },
-  computed: {
-    ...requestData(['form', 'schema', 'submissionsChunk']),
-    configsForRefresh() {
-      return [{
-        key: 'submissionsChunk',
-        url: this.chunkURL({ top: this.chunkSizes.small }),
-        success: () => {
-          this.processChunk();
-        }
-      }];
-    },
-    encodedFormId() {
-      return encodeURIComponent(this.xmlFormId);
-    },
-    downloadHref() {
-      return `/v1/projects/${this.projectId}/forms/${this.encodedFormId}/submissions.csv.zip`;
-    },
-    // Returns information about the schema after processing it.
-    schemaAnalysis() {
-      // `columns` holds the columns of the table that correspond to a form
-      // field. We display a maximum of 10 such columns in the table.
-      const columns = [];
-      let idFieldCount = 0;
-      for (const field of this.schema) {
-        // Note that the field might not have a type, in which case `type` will
-        // be undefined -- though I have seen a field without a type only in the
-        // Widgets sample form (<branch>):
-        // https://github.com/opendatakit/sample-forms/blob/e9fe5838e106b04bf69f43a8a791327093571443/Widgets.xml
-        const { type, path } = field;
-        // We already display __id as the instance ID, so if there is also an
-        // meta.instanceID or instanceID field, we do not display it. Further,
-        // if the only fields that we do not display are instanceID fields, we
-        // do not show the field subset indicator.
-        if (type === 'string' &&
-          ((path.length === 2 && path[0] === 'meta' && path[1] === 'instanceID') ||
-          (path.length === 1 && path[0] === 'instanceID')))
-          idFieldCount += 1;
-        else if (type !== 'repeat' && columns.length < 10) {
-          const header = path.join('-');
-          const htmlClass = ['form-submission-list-field'];
-          if (type != null && /^\w+$/.test(type))
-            htmlClass.push(`form-submission-list-${type}-column`);
-          const key = this.$uniqueId();
-          columns.push({ type, path, header, htmlClass, key });
-        }
-      }
-      return {
-        columns,
-        subsetShown: columns.length !== this.schema.length - idFieldCount
-      };
-    },
-    table2Class() {
-      return {
-        table: true,
-        'table-condensed': true,
-        'form-submission-list-field-subset': this.schemaAnalysis.subsetShown
-      };
-    },
-    fieldColumns() {
-      return this.schemaAnalysis.columns;
-    }
-  },
-  watch: {
-    $route(newRoute, oldRoute) {
-      // Do not do anything if the user has simply navigated to another tab for
-      // the same form.
-      if (newRoute.params.projectId === oldRoute.params.projectId &&
-        newRoute.params.xmlFormId === oldRoute.params.xmlFormId)
-        return;
-
-      // Reset the component. Even if after the route change, the component is
-      // not rendered by the FormShow <router-view> (that is, even if the
-      // component is not the active tab), the component will still be kept
-      // alive, so it must be reset.
-      this.submissions = null;
-      this.instanceIds = new Set();
-      this.originalCount = null;
-      this.chunkCount = 0;
-      this.message = null;
-
-      if (oldRoute.name === 'FormSubmissionList' &&
-        newRoute.name === 'FormSubmissionList') {
-        // The route has changed, but the component's `activated` hook will not
-        // be called. Because of that, we call this.fetchSchemaAndFirstChunk()
-        // here instead.
-        this.fetchSchemaAndFirstChunk();
-      }
-    }
-  },
-  activated() {
-    // If the user navigates from this tab to another tab, then back to this
-    // tab, we do not send a new request.
-    if (this.schema == null && !this.$store.getters.loading('schema'))
-      this.fetchSchemaAndFirstChunk();
-    $(window).on('scroll.form-submission-list', this.onScroll);
-  },
-  deactivated() {
-    $(window).off('.form-submission-list');
-  },
-  methods: {
-    loadingMessageText({ top, skip = 0 }) {
-      if (skip === 0) {
-        if (this.form == null) return 'Loading submissions…';
-        if (this.form.submissions > top) {
-          const count = this.form.submissions.toLocaleString();
-          return `Loading the first ${top.toLocaleString()} of ${count} submissions…`;
-        }
-        return this.form.submissions === 1
-          ? 'Loading 1 submission…'
-          : `Loading ${this.form.submissions.toLocaleString()} submissions…`;
-      }
-      const remaining = this.originalCount - this.submissions.length;
-      // This case should be rare or impossible.
-      if (remaining <= 0) return 'Loading submissions…';
-      if (remaining > top)
-        return `Loading ${top.toLocaleString()} more of ${remaining.toLocaleString()} remaining submissions…`;
-      return remaining === 1
-        ? 'Loading the last submission…'
-        : `Loading the last ${remaining.toLocaleString()} submissions…`;
-    },
-    chunkURL({ top, skip = 0 }) {
-      const queryString = `%24top=${top}&%24skip=${skip}&%24count=true`;
-      return `/projects/${this.projectId}/forms/${this.encodedFormId}.svc/Submissions?${queryString}`;
-    },
-    // Sets this.form.submissions to this.submissionsChunk['@odata.count'].
-    updateFormSubmissionCount() {
-      if (this.form == null) return;
-      if (this.form.submissions === this.submissionsChunk['@odata.count'])
-        return;
-      this.$store.commit('setData', {
-        key: 'form',
-        value: this.form.with({
-          submissions: this.submissionsChunk['@odata.count']
-        })
-      });
-    },
-    processChunk(replace = true) {
-      // We update this.form.submissions, but not this.form.lastSubmission, nor
-      // lastSubmission for the project.
-      this.updateFormSubmissionCount();
-
-      if (replace) {
-        this.submissions = this.submissionsChunk.value != null
-          ? this.submissionsChunk.value
-          : [];
-        this.instanceIds.clear();
-        for (const submission of this.submissions)
-          this.instanceIds.add(submission.__id);
-        this.originalCount = this.submissionsChunk['@odata.count'];
-        this.chunkCount = 1;
-      } else {
-        if (this.submissionsChunk.value != null) {
-          const lastSubmission = this.submissions[this.submissions.length - 1];
-          const lastSubmissionDate = lastSubmission.__system.submissionDate;
-          for (const submission of this.submissionsChunk.value) {
-            // If one or more submissions have been created since the initial
-            // fetch or last refresh, then the latest chunk of submissions may
-            // include a newly created submission or a submission that is
-            // already shown in the table.
-            if (submission.__system.submissionDate <= lastSubmissionDate &&
-              !this.instanceIds.has(submission.__id)) {
-              this.submissions.push(submission);
-              this.instanceIds.add(submission.__id);
-            }
-          }
-        }
-        this.chunkCount += 1;
-      }
-
-      const remaining = this.originalCount - this.submissions.length;
-      // A negative value should be rare or impossible.
-      if (remaining <= 0)
-        this.message = null;
-      else {
-        this.message = {
-          text: remaining === 1
-            ? '1 row remains.'
-            : `${remaining.toLocaleString()} rows remain.`,
-          spinner: false
-        };
-      }
-    },
-    fetchSchemaAndFirstChunk() {
-      this.message = {
-        text: this.loadingMessageText({ top: this.chunkSizes.small }),
-        spinner: true
-      };
-      this.$store.dispatch('get', [
-        {
-          key: 'schema',
-          url: `/projects/${this.projectId}/forms/${this.encodedFormId}.schema.json?flatten=true&odata=true`
-        },
-        {
-          key: 'submissionsChunk',
-          url: this.chunkURL({ top: this.chunkSizes.small }),
-          success: () => {
-            this.processChunk();
-          }
-        }
-      ])
-        .catch(() => {
-          this.message = null;
-        });
-    },
-    // Returns the value of the $skip query parameter for skipping the specified
-    // number of chunks.
-    skip(chunkCount) {
-      if (chunkCount <= MAX_SMALL_CHUNKS)
-        return chunkCount * this.chunkSizes.small;
-      return (MAX_SMALL_CHUNKS * this.chunkSizes.small) +
-        ((chunkCount - MAX_SMALL_CHUNKS) * this.chunkSizes.large);
-    },
-    // This method may need to change once we support submission deletion.
-    onScroll() {
-      // Return if the request for the form is in progress or resulted in an
-      // error.
-      if (this.form == null) return;
-      if (this.schema == null) return;
-      // If the refresh button is clicked after the first chunk has been
-      // received, then `this.submissionsChunk == null` will be `false`, but
-      // this.$store.getters.loading('submissionsChunk') will be `true`.
-      if (this.submissionsChunk == null ||
-        this.$store.getters.loading('submissionsChunk'))
-        return;
-      const skip = this.skip(this.chunkCount);
-      if (skip >= this.form.submissions || !this.scrolledToBottom()) return;
-      const top = this.chunkCount < MAX_SMALL_CHUNKS
-        ? this.chunkSizes.small
-        : this.chunkSizes.large;
-      this.message = {
-        text: this.loadingMessageText({ top, skip }),
-        spinner: true
-      };
-      this.$store.dispatch('get', [{
-        key: 'submissionsChunk',
-        url: this.chunkURL({ top, skip }),
-        success: () => {
-          this.processChunk(false);
-        }
-      }])
-        .catch(() => {
-          this.message = null;
-        });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-@import '../../../assets/scss/variables';
-
-#form-submission-list-table1 {
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
-  position: relative;
-  // Adding z-index so that the background color of the other table's thead does
-  // not overlay the box shadow.
-  z-index: 1;
-
-  float: left;
-  width: unset;
-
-  > thead > tr > th {
-    &:last-child {
-      border-right: $border-bottom-table-heading;
-    }
-  }
-
-  > tbody > tr > td {
-    &:last-child {
-      border-right: $border-top-table-data;
-    }
-
-    &.form-submission-list-row-number {
-      color: #999;
-      font-size: 11px;
-      // Adding min-width so that the table's width does not increase as the row
-      // numbers increase.
-      min-width: 42px;
-      padding-top: 11px;
-      text-align: right;
-      vertical-align: middle;
-    }
-  }
-}
-
-#form-submission-list-table2-container {
-  // Placing the margin here rather than on the table so that the horizontal
-  // scrollbar appears immediately below the table, above the margin.
-  margin-bottom: $margin-bottom-table;
-  overflow-x: scroll;
-}
-
-#form-submission-list-table2 {
-  margin-bottom: 0;
-
-  thead > tr > th, tbody > tr > td {
-    &.form-submission-list-field {
-      max-width: 250px;
-    }
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  tbody > tr > td {
-    &.form-submission-list-int-column,
-    &.form-submission-list-decimal-column {
-      text-align: right;
-    }
-
-    &.form-submission-list-binary-column {
-      text-align: center;
-    }
-  }
-
-  .form-submission-list-binary-link {
-    background-color: $color-subpanel-background;
-    border-radius: 99px;
-    padding: 4px 7px;
-    text-decoration: none;
-
-    .icon-check {
-      color: $color-success;
-      margin-right: 0;
-    }
-
-    .icon-download {
-      border-left: 1px dotted #ccc;
-      color: #bbb;
-      padding-left: 5px;
-    }
-
-    &:hover .icon-download {
-      color: $color-action-foreground;
-    }
-  }
-
-
-  &.form-submission-list-field-subset {
-    $subset-padding-left: 30px;
-
-    thead th:last-child {
-      $color-fill: $color-table-heading-background;
-      $color-break: $color-page-background;
-      $zig-size: 10px;
-      background: linear-gradient(-135deg, $color-fill 5px, transparent 0) 0 5px,
-        linear-gradient(135deg, $color-break 9px, $color-fill 0) 0 5px;
-      background-position: 10px 5px;
-      background-repeat: repeat-y;
-      background-size: $zig-size $zig-size;
-      overflow: visible; // this is okay for "Instance ID", which is never truncated.
-      padding-left: $subset-padding-left;
-      position: relative;
-
-      &::before {
-        background: linear-gradient(-135deg, transparent 9px, $color-fill 0) 0 5px,
-          linear-gradient(135deg, $color-fill 5px, $color-break 0) 0 5px;
-        background-position: left top;
-        background-repeat: repeat-y;
-        background-size: $zig-size $zig-size;
-        content: '';
-        display: block;
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: $zig-size;
-      }
-
-      &::after { // TODO: is there a cleverer way to do this?
-        border-bottom: 1px solid $color-page-background;
-        content: '';
-        display: block;
-        left: 7px;
-        position: absolute;
-        top: 100%;
-        width: 11px;
-      }
-    }
-
-    tbody td:last-child {
-      padding-left: $subset-padding-left;
-      position: relative;
-
-      &::before {
-        color: #999;
-        content: '…';
-        display: block;
-        left: 4px;
-        top: 4px;
-        pointer-events: none;
-        position: absolute
-      }
-    }
-  }
-}
-
-#form-submission-list-message {
-  margin-left: 28px;
-  padding-bottom: 38px;
-  position: relative;
-
-  #form-submission-list-spinner-container {
-    float: left;
-    margin-right: 8px;
-    position: absolute;
-    top: 8px;
-    width: 16px; // TODO: eventually probably better not to default spinner to center.
-  }
-
-  #form-submission-list-message-text {
-    color: #555;
-    font-size: 12px;
-    padding-left: 24px;
-  }
-}
-</style>
diff --git a/src/components/form/submission/analyze.vue b/src/components/submission/analyze.vue
similarity index 87%
rename from src/components/form/submission/analyze.vue
rename to src/components/submission/analyze.vue
index b85ac1b95..f9edc6352 100644
--- a/src/components/form/submission/analyze.vue
+++ b/src/components/submission/analyze.vue
@@ -10,11 +10,11 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <modal id="form-submission-analyze" :state="state" backdrop hideable
+  <modal id="submission-analyze" :state="state" backdrop hideable
     @hide="$emit('hide')">
     <template slot="title">Using OData</template>
     <template slot="body">
-      <div id="form-submission-analyze-head">
+      <div id="submission-analyze-head">
         <div class="modal-introduction">
           <p>
             OData is a new standard for transferring data between tools and
@@ -49,8 +49,8 @@ except according to the terms contained in the LICENSE file.
         </ul>
       </div>
       <!-- eslint-disable-next-line max-len -->
-      <div id="form-submission-analyze-odata-url" ref="oDataUrl" class="modal-introduction" @click="selectUrl">{{ oDataUrl }}</div>
-      <div id="form-submission-analyze-tool-help" class="modal-introduction">
+      <div id="submission-analyze-odata-url" ref="oDataUrl" class="modal-introduction" @click="selectUrl">{{ oDataUrl }}</div>
+      <div id="submission-analyze-tool-help" class="modal-introduction">
         <p v-if="tool === 'microsoft'">
           For help using OData with Excel, see
           <a :href="links.excel.help" target="_blank" rel="noopener">this page</a>.
@@ -62,7 +62,7 @@ except according to the terms contained in the LICENSE file.
           <a :href="links.tableau.help" target="_blank" rel="noopener">this page</a>.
         </p>
       </div>
-      <div id="form-submission-analyze-actions-container">
+      <div id="submission-analyze-actions-container">
         <div class="modal-actions">
           <button type="button" class="btn btn-primary" @click="$emit('hide')">
             Done
@@ -74,10 +74,10 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
-import { requestData } from '../../../store/modules/request';
+import { requestData } from '../../store/modules/request';
 
 export default {
-  name: 'FormSubmissionAnalyze',
+  name: 'SubmissionAnalyze',
   props: {
     projectId: {
       type: String,
@@ -138,9 +138,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/scss/variables';
+@import '../../assets/scss/variables';
 
-#form-submission-analyze .modal-body {
+#submission-analyze .modal-body {
   padding-left: 0;
   padding-right: 0;
 
@@ -148,7 +148,7 @@ export default {
     margin-bottom: 10px;
   }
 
-  #form-submission-analyze-head {
+  #submission-analyze-head {
     border-bottom: 1px solid $color-subpanel-border-strong;
     padding-left: $padding-modal-body;
     padding-right: $padding-modal-body;
@@ -158,7 +158,7 @@ export default {
     }
   }
 
-  #form-submission-analyze-odata-url {
+  #submission-analyze-odata-url {
     background-color: $color-subpanel-background;
     font-family: $font-family-monospace;
     margin-bottom: 10px;
@@ -166,7 +166,7 @@ export default {
     padding: 12px $padding-modal-body;
   }
 
-  #form-submission-analyze-tool-help {
+  #submission-analyze-tool-help {
     margin-top: 15px;
     padding-left: $padding-modal-body;
     padding-right: $padding-modal-body;
@@ -176,7 +176,7 @@ export default {
     }
   }
 
-  #form-submission-analyze-actions-container {
+  #submission-analyze-actions-container {
     padding-left: $padding-modal-body;
     padding-right: $padding-modal-body;
   }
diff --git a/src/components/submission/decrypt.vue b/src/components/submission/decrypt.vue
new file mode 100644
index 000000000..a1f6a3219
--- /dev/null
+++ b/src/components/submission/decrypt.vue
@@ -0,0 +1,199 @@
+<!--
+Copyright 2019 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/opendatakit/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <modal :state="state" backdrop hideable @hide="$emit('hide')"
+    @shown="$refs.passphrase.focus()">
+    <template #title>Decrypt and Download</template>
+    <template #body>
+      <p class="modal-introduction">
+        In order to download this data, you will need to provide your
+        passphrase. Your passphrase will be used only to decrypt your data for
+        download, after which I will forget it again.
+      </p>
+      <form @submit.prevent="submit">
+        <label class="form-group">
+          <input ref="passphrase" v-model="passphrase" type="password"
+            class="form-control" placeholder="Passphrase *" required
+            autocomplete="off">
+          <span class="form-label">Passphrase *</span>
+        </label>
+        <p v-if="managedKey != null && managedKey.hint != null"
+          class="modal-introduction">
+          Hint: {{ managedKey.hint }}
+        </p>
+        <div class="modal-actions">
+          <button type="submit" class="btn btn-primary">
+            Download
+          </button>
+          <button type="button" class="btn btn-link" @click="$emit('hide')">
+            Cancel
+          </button>
+        </div>
+      </form>
+      <!-- We specify a Frontend page for src so that any cookies are sent when
+      the iframe form is submitted. -->
+      <iframe v-show="false" ref="iframe" src="/blank.html"></iframe>
+    </template>
+  </modal>
+</template>
+
+<script>
+import { requestData } from '../../store/modules/request';
+
+export default {
+  name: 'SubmissionDecrypt',
+  props: {
+    state: {
+      type: Boolean,
+      default: false
+    },
+    managedKey: Object, // eslint-disable-line vue/require-default-prop
+    formAction: {
+      type: String,
+      required: true
+    },
+    delayBetweenChecks: {
+      type: Number,
+      default: 1000
+    }
+  },
+  data() {
+    return {
+      passphrase: '',
+      // The number of times the iframe will be checked for a Problem after the
+      // iframe form is submitted
+      problemChecks: 0,
+      timeoutId: null
+    };
+  },
+  computed: requestData(['session']),
+  watch: {
+    state() {
+      if (this.state) return;
+      this.passphrase = '';
+      this.problemChecks = 0;
+      if (this.timeoutId != null) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = null;
+      }
+    }
+  },
+  methods: {
+    /*
+    replaceIframeBody() empties the iframe body, then appends a form to it. We
+    place a form in an iframe for a few reasons:
+
+      - We want to have the browser handle everything about the download, which
+        means that we cannot use an AJAX request.
+      - Our two options are an <a> element and a <form> element. We use a form
+        so that we can send a POST request. If we wish to securely pass the
+        passphrase to Backend, then assuming that wire security is not an issue,
+        we still need to ensure that the passphrase is not stored in the user's
+        browser history. A POST request allows us to accomplish that.
+      - However, submitting a form outside an iframe would navigate away from
+        Frontend, at least if a Problem is returned. Thus, we place the form
+        inside an iframe. The iframe may change pages, but that won't affect the
+        rest of Frontend.
+
+    Note that because the iframe may change pages after the form is submitted
+    (if a Problem is returned), we recreate the form each time we submit it.
+    */
+    replaceIframeBody() {
+      const doc = this.$refs.iframe.contentWindow.document;
+      doc.body.innerHTML = '';
+      const form = doc.createElement('form');
+      form.setAttribute('method', 'post');
+      form.setAttribute('action', this.formAction);
+      doc.body.appendChild(form);
+
+      const passphraseInput = doc.createElement('input');
+      // This might not be necessary (not sure).
+      passphraseInput.setAttribute('type', 'password');
+      passphraseInput.setAttribute('name', this.managedKey.id.toString());
+      passphraseInput.setAttribute('autocomplete', 'off');
+      form.appendChild(passphraseInput);
+
+      const csrf = doc.createElement('input');
+      csrf.setAttribute('type', 'password');
+      csrf.setAttribute('name', '__csrf');
+      csrf.setAttribute('autocomplete', 'off');
+      form.appendChild(csrf);
+
+      passphraseInput.value = this.passphrase;
+      csrf.value = this.session.csrf;
+    },
+    // scheduleProblemCheck() checks the iframe for a Problem after waiting. We
+    // check for a Problem in this way, because when the iframe form is
+    // submitted, it is not an AJAX request, so there is not another way to know
+    // whether a Problem was returned (I think).
+    scheduleProblemCheck() {
+      this.timeoutId = setTimeout(
+        () => {
+          const doc = this.$refs.iframe.contentWindow.document;
+          // If Backend returns a Problem, the iframe changes pages. However, if
+          // the form submission is successful, it seems that the iframe does
+          // not change pages, and the form remains on the page.
+          if (doc.querySelector('form') == null && doc.body != null) {
+            let problem;
+            try {
+              // Note that the Problem may be wrapped in another element, for
+              // example, a <pre> element.
+              problem = JSON.parse(doc.body.textContent);
+            } catch (e) {
+              this.$logger.error('cannot parse Problem');
+            }
+            if (problem != null) {
+              this.$logger.error(problem);
+              if (problem.message != null)
+                this.$alert().danger(problem.message);
+            }
+            this.problemChecks = 0;
+            this.timeoutId = null;
+          } else {
+            this.problemChecks -= 1;
+            if (this.problemChecks > 0)
+              this.scheduleProblemCheck();
+            else
+              this.timeoutId = null;
+          }
+        },
+        this.delayBetweenChecks
+      );
+    },
+    submit() {
+      // Return immediately if the iframe is still loading. It would probably be
+      // better to wait for the iframe to load, then continue the process then,
+      // but there would be edge cases to consider in implementing that. (For
+      // example, what if the user submits the form, but then closes the modal
+      // before the iframe finishes loading?)
+      const iframeDoc = this.$refs.iframe.contentWindow.document;
+      if (iframeDoc.readyState === 'loading') return;
+
+      this.replaceIframeBody();
+      const form = iframeDoc.body.querySelector('form');
+      form.submit();
+      // Make sure that the passphrase is no longer in the DOM. (This might not
+      // be necessary -- not sure.)
+      form.querySelector('input').value = '';
+
+      // Because the form submission is not an AJAX request, we will only know
+      // the result of the request if a Problem is returned: if a Problem is
+      // returned, the iframe will change pages, but if the download is
+      // successful, the iframe seems not to change.
+      this.$alert().info('Your data download should begin soon. If you have been waiting and it has not started, please try again.');
+
+      this.problemChecks = 300;
+      if (this.timeoutId == null) this.scheduleProblemCheck();
+    }
+  }
+};
+</script>
diff --git a/src/components/submission/list.vue b/src/components/submission/list.vue
new file mode 100644
index 000000000..9b6bc8042
--- /dev/null
+++ b/src/components/submission/list.vue
@@ -0,0 +1,364 @@
+<!--
+Copyright 2017 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/opendatakit/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div v-if="form != null">
+    <loading :state="$store.getters.initiallyLoading(['keys'])"/>
+    <div v-if="keys != null">
+      <float-row class="table-actions">
+        <template #left>
+          <refresh-button :configs="configsForRefresh"/>
+        </template>
+        <template #right>
+          <a v-if="managedKey == null" id="submission-list-download-button"
+            :href="downloadPath" class="btn btn-primary" target="_blank">
+            <span class="icon-arrow-circle-down"></span>{{ downloadButtonText }}
+          </a>
+          <button v-else id="submission-list-download-button" type="button"
+            class="btn btn-primary" @click="showModal('decrypt')">
+            <span class="icon-arrow-circle-down"></span>{{ downloadButtonText }}
+          </button>
+
+          <button id="submission-list-analyze-button" type="button"
+            class="btn btn-primary" @click="showModal('analyze')">
+            <span class="icon-plug"></span>Analyze via OData
+          </button>
+        </template>
+      </float-row>
+
+      <p v-if="submissions != null && submissions.length === 0"
+        class="empty-table-message">
+        There are no Submissions yet for <strong>{{ form.nameOrId() }}</strong>.
+      </p>
+      <submission-table v-else-if="schema != null && submissions != null"
+        :project-id="projectId" :submissions="submissions"
+        :original-count="originalCount"/>
+
+      <div v-if="message != null" id="submission-list-message">
+        <div id="submission-list-spinner-container">
+          <spinner :state="message.spinner"/>
+        </div>
+        <div id="submission-list-message-text">{{ message.text }}</div>
+      </div>
+
+      <submission-decrypt :state="decrypt.state" :managed-key="managedKey"
+        :form-action="downloadPath" @hide="hideModal('decrypt')"/>
+      <submission-analyze :state="analyze.state" :project-id="projectId"
+        @hide="hideModal('analyze')"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import SubmissionAnalyze from './analyze.vue';
+import SubmissionDecrypt from './decrypt.vue';
+import SubmissionTable from './table.vue';
+import modal from '../../mixins/modal';
+import { requestData } from '../../store/modules/request';
+
+const MAX_SMALL_CHUNKS = 4;
+
+export default {
+  name: 'SubmissionList',
+  components: { SubmissionAnalyze, SubmissionDecrypt, SubmissionTable },
+  mixins: [modal()],
+  props: {
+    projectId: {
+      type: String,
+      required: true
+    },
+    xmlFormId: {
+      type: String,
+      required: true
+    },
+    chunkSizes: {
+      type: Object,
+      default: () => ({ small: 250, large: 1000 })
+    },
+    // Function that returns true if the user has scrolled to the bottom of the
+    // page (or close to it) and false if not. Implementing this as a prop in
+    // order to facilitate testing.
+    scrolledToBottom: {
+      type: Function,
+      default: () =>
+        // Using pageYOffset rather than scrollY in order to support IE.
+        window.pageYOffset + window.innerHeight >= document.body.offsetHeight - 5
+    }
+  },
+  data() {
+    return {
+      submissions: null,
+      instanceIds: new Set(),
+      // The count of submissions at the time of the initial fetch or last
+      // refresh
+      originalCount: null,
+      // The number of chunks that have been fetched since the initial fetch or
+      // last refresh
+      chunkCount: 0,
+      message: null,
+      decrypt: {
+        state: false
+      },
+      analyze: {
+        state: false
+      }
+    };
+  },
+  computed: {
+    ...requestData(['form', 'keys', 'schema', 'submissionsChunk']),
+    // Returns the same value as this.form.encodedId(), but unlike
+    // this.form.encodedId(), can be called before the response for the form has
+    // been received.
+    encodedFormId() {
+      return encodeURIComponent(this.xmlFormId);
+    },
+    configsForRefresh() {
+      return [{
+        key: 'submissionsChunk',
+        url: this.chunkURL({ top: this.chunkSizes.small }),
+        success: () => {
+          this.processChunk();
+        }
+      }];
+    },
+    managedKey() {
+      return this.keys.find(key => key.managed);
+    },
+    downloadPath() {
+      return `/v1/projects/${this.projectId}/forms/${this.form.encodedId()}/submissions.csv.zip`;
+    },
+    downloadButtonText() {
+      return this.form.submissions <= 1
+        ? 'Download all records'
+        : `Download all ${this.form.submissions.toLocaleString()} records`;
+    }
+  },
+  watch: {
+    $route(newRoute, oldRoute) {
+      // Do not do anything if the user has simply navigated to another tab for
+      // the same form.
+      if (newRoute.params.projectId === oldRoute.params.projectId &&
+        newRoute.params.xmlFormId === oldRoute.params.xmlFormId)
+        return;
+
+      // Reset the component. Even if after the route change, the component is
+      // not rendered by the FormShow <router-view> (that is, even if the
+      // component is not the active tab), the component will still be kept
+      // alive, so it must be reset.
+      this.submissions = null;
+      this.instanceIds = new Set();
+      this.originalCount = null;
+      this.chunkCount = 0;
+      this.message = null;
+
+      if (oldRoute.name === 'SubmissionList' &&
+        newRoute.name === 'SubmissionList') {
+        // The route has changed, but the component's `activated` hook will not
+        // be called. Because of that, we call this.fetchInitialData() here
+        // instead.
+        this.fetchInitialData();
+      }
+    }
+  },
+  activated() {
+    // If the user navigates from this tab to another tab, then back to this
+    // tab, we do not send a new set of requests (unless there was a response
+    // error).
+    if ((this.keys == null && !this.$store.getters.loading('keys')) ||
+      (this.schema == null && !this.$store.getters.loading('schema')) ||
+      (this.submissions == null && !this.$store.getters.loading('submissionsChunk')))
+      this.fetchInitialData();
+    $(window).on('scroll.submission-list', this.onScroll);
+  },
+  deactivated() {
+    $(window).off('.submission-list');
+  },
+  methods: {
+    loadingMessageText({ top, skip = 0 }) {
+      if (skip === 0) {
+        if (this.form == null) return 'Loading submissions…';
+        if (this.form.submissions > top) {
+          const count = this.form.submissions.toLocaleString();
+          return `Loading the first ${top.toLocaleString()} of ${count} submissions…`;
+        }
+        return this.form.submissions === 1
+          ? 'Loading 1 submission…'
+          : `Loading ${this.form.submissions.toLocaleString()} submissions…`;
+      }
+      const remaining = this.originalCount - this.submissions.length;
+      // This case should be rare or impossible.
+      if (remaining <= 0) return 'Loading submissions…';
+      if (remaining > top)
+        return `Loading ${top.toLocaleString()} more of ${remaining.toLocaleString()} remaining submissions…`;
+      return remaining === 1
+        ? 'Loading the last submission…'
+        : `Loading the last ${remaining.toLocaleString()} submissions…`;
+    },
+    chunkURL({ top, skip = 0 }) {
+      const queryString = `%24top=${top}&%24skip=${skip}&%24count=true`;
+      return `/projects/${this.projectId}/forms/${this.encodedFormId}.svc/Submissions?${queryString}`;
+    },
+    // Sets this.form.submissions to this.submissionsChunk['@odata.count'].
+    updateFormSubmissionCount() {
+      if (this.form == null) return;
+      if (this.form.submissions === this.submissionsChunk['@odata.count'])
+        return;
+      this.$store.commit('setData', {
+        key: 'form',
+        value: this.form.with({
+          submissions: this.submissionsChunk['@odata.count']
+        })
+      });
+    },
+    processChunk(replace = true) {
+      // We update this.form.submissions, but not this.form.lastSubmission, nor
+      // lastSubmission for the project.
+      this.updateFormSubmissionCount();
+
+      if (replace) {
+        this.submissions = this.submissionsChunk.value != null
+          ? this.submissionsChunk.value
+          : [];
+        this.instanceIds.clear();
+        for (const submission of this.submissions)
+          this.instanceIds.add(submission.__id);
+        this.originalCount = this.submissionsChunk['@odata.count'];
+        this.chunkCount = 1;
+      } else {
+        if (this.submissionsChunk.value != null) {
+          const lastSubmission = this.submissions[this.submissions.length - 1];
+          const lastSubmissionDate = lastSubmission.__system.submissionDate;
+          for (const submission of this.submissionsChunk.value) {
+            // If one or more submissions have been created since the initial
+            // fetch or last refresh, then the latest chunk of submissions may
+            // include a newly created submission or a submission that is
+            // already shown in the table.
+            if (submission.__system.submissionDate <= lastSubmissionDate &&
+              !this.instanceIds.has(submission.__id)) {
+              this.submissions.push(submission);
+              this.instanceIds.add(submission.__id);
+            }
+          }
+        }
+        this.chunkCount += 1;
+      }
+
+      const remaining = this.originalCount - this.submissions.length;
+      // A negative value should be rare or impossible.
+      if (remaining <= 0)
+        this.message = null;
+      else {
+        this.message = {
+          text: remaining === 1
+            ? '1 row remains.'
+            : `${remaining.toLocaleString()} rows remain.`,
+          spinner: false
+        };
+      }
+    },
+    fetchInitialData() {
+      this.message = {
+        text: this.loadingMessageText({ top: this.chunkSizes.small }),
+        spinner: true
+      };
+      this.$store.dispatch('get', [
+        {
+          // We do not keep this.keys in sync with the keyId property of the
+          // project.
+          key: 'keys',
+          url: `/projects/${this.projectId}/forms/${this.encodedFormId}/submissions/keys`
+        },
+        {
+          key: 'schema',
+          url: `/projects/${this.projectId}/forms/${this.encodedFormId}.schema.json?flatten=true&odata=true`
+        },
+        {
+          key: 'submissionsChunk',
+          url: this.chunkURL({ top: this.chunkSizes.small }),
+          success: () => {
+            this.processChunk();
+          }
+        }
+      ])
+        .catch(() => {
+          this.message = null;
+        });
+    },
+    // Returns the value of the $skip query parameter for skipping the specified
+    // number of chunks.
+    skip(chunkCount) {
+      if (chunkCount <= MAX_SMALL_CHUNKS)
+        return chunkCount * this.chunkSizes.small;
+      return (MAX_SMALL_CHUNKS * this.chunkSizes.small) +
+        ((chunkCount - MAX_SMALL_CHUNKS) * this.chunkSizes.large);
+    },
+    // This method may need to change once we support submission deletion.
+    onScroll() {
+      // Return if the request for the form or any of the requests sent by
+      // fetchInitialData() is in progress or resulted in an error.
+      if (this.form == null || this.keys == null || this.schema == null ||
+        this.submissionsChunk == null)
+        return;
+      // Return if the refresh button is clicked after the first chunk is
+      // received.
+      if (this.$store.getters.loading('submissionsChunk'))
+        return;
+      const skip = this.skip(this.chunkCount);
+      if (skip >= this.form.submissions || !this.scrolledToBottom()) return;
+      const top = this.chunkCount < MAX_SMALL_CHUNKS
+        ? this.chunkSizes.small
+        : this.chunkSizes.large;
+      this.message = {
+        text: this.loadingMessageText({ top, skip }),
+        spinner: true
+      };
+      this.$store.dispatch('get', [{
+        key: 'submissionsChunk',
+        url: this.chunkURL({ top, skip }),
+        success: () => {
+          this.processChunk(false);
+        }
+      }])
+        .catch(() => {
+          this.message = null;
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+#submission-list-download-button {
+  margin-right: 5px;
+}
+
+#submission-list-message {
+  margin-left: 28px;
+  padding-bottom: 38px;
+  position: relative;
+
+  #submission-list-spinner-container {
+    float: left;
+    margin-right: 8px;
+    position: absolute;
+    top: 8px;
+    width: 16px; // TODO: eventually probably better not to default spinner to center.
+  }
+
+  #submission-list-message-text {
+    color: #555;
+    font-size: 12px;
+    padding-left: 24px;
+  }
+}
+</style>
diff --git a/src/components/form/submission/row.vue b/src/components/submission/row.vue
similarity index 84%
rename from src/components/form/submission/row.vue
rename to src/components/submission/row.vue
index 168949371..d8a9d8fd1 100644
--- a/src/components/form/submission/row.vue
+++ b/src/components/submission/row.vue
@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <!-- The frozen columns of the table -->
   <tr v-if="fieldColumns == null">
-    <td class="form-submission-list-row-number">{{ rowNumber }}</td>
+    <td class="row-number">{{ rowNumber }}</td>
     <td>{{ submission.__system.submitterName }}</td>
     <td>{{ submissionDate }}</td>
   </tr>
@@ -23,7 +23,7 @@ except according to the terms contained in the LICENSE file.
       :title="hasTitle(column) ? fieldValue(column) : null">
       <template v-if="column.type === 'binary'">
         <a v-if="fieldValue(column) !== ''" :href="fieldValue(column)"
-          class="form-submission-list-binary-link" target="_blank"
+          class="binary-link" target="_blank"
           title="File was submitted. Click to download.">
           <span class="icon-check"></span> <span class="icon-download"></span>
         </a>
@@ -40,8 +40,8 @@ except according to the terms contained in the LICENSE file.
 import { path } from 'ramda';
 import { DateTime, Settings } from 'luxon';
 
-import { formatDate } from '../../../util/util';
-import { requestData } from '../../../store/modules/request';
+import { formatDate } from '../../util/util';
+import { requestData } from '../../store/modules/request';
 
 const TITLE_FIELD_TYPES = [
   'string',
@@ -53,7 +53,7 @@ const TITLE_FIELD_TYPES = [
 ];
 
 export default {
-  name: 'FormSubmissionRow',
+  name: 'SubmissionRow',
   props: {
     projectId: {
       type: String,
@@ -165,3 +165,53 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+#submission-table1 td {
+  &.row-number {
+    color: #999;
+    font-size: 11px;
+    // Adding min-width so that the table's width does not increase as the row
+    // numbers increase.
+    min-width: 42px;
+    padding-top: 11px;
+    text-align: right;
+    vertical-align: middle;
+  }
+}
+
+#submission-table2 td {
+  &.submission-row-int-column,
+  &.submission-row-decimal-column {
+    text-align: right;
+  }
+
+  &.submission-row-binary-column {
+    text-align: center;
+  }
+
+  .binary-link {
+    background-color: $color-subpanel-background;
+    border-radius: 99px;
+    padding: 4px 7px;
+    text-decoration: none;
+
+    .icon-check {
+      color: $color-success;
+      margin-right: 0;
+    }
+
+    .icon-download {
+      border-left: 1px dotted #ccc;
+      color: #bbb;
+      padding-left: 5px;
+    }
+
+    &:hover .icon-download {
+      color: $color-action-foreground;
+    }
+  }
+}
+</style>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
new file mode 100644
index 000000000..df570e2c8
--- /dev/null
+++ b/src/components/submission/table.vue
@@ -0,0 +1,226 @@
+<!--
+Copyright 2019 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/opendatakit/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div>
+    <!-- This table element contains the frozen columns of the submissions
+    table, which contain metadata about each submission. -->
+    <table id="submission-table1" class="table table-condensed">
+      <thead>
+        <tr>
+          <th><!-- Row number --></th>
+          <th>Submitted by</th>
+          <th>Submitted at</th>
+        </tr>
+      </thead>
+      <tbody>
+        <submission-row v-for="(submission, index) in submissions"
+          :key="submission.__id" :project-id="projectId"
+          :submission="submission" :row-number="originalCount - index"/>
+      </tbody>
+    </table>
+    <!-- The next table element contains the form-field data and instance ID of
+    each submission. -->
+    <div id="submission-table2-container">
+      <table id="submission-table2" :class="table2Class">
+        <thead>
+          <tr>
+            <!-- Adding a title attribute in case the column header is so long
+            that it is truncated. -->
+            <th v-for="column of fieldColumns" :key="column.key"
+              :class="column.htmlClass" :title="column.header">
+              {{ column.header }}
+            </th>
+            <th>Instance ID</th>
+          </tr>
+        </thead>
+        <tbody>
+          <submission-row v-for="submission of submissions"
+            :key="submission.__id" :project-id="projectId" :form="form"
+            :submission="submission" :field-columns="fieldColumns"/>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import SubmissionRow from './row.vue';
+import { requestData } from '../../store/modules/request';
+
+export default {
+  name: 'SubmissionTable',
+  components: { SubmissionRow },
+  props: {
+    projectId: {
+      type: String,
+      required: true
+    },
+    submissions: {
+      type: Array,
+      required: true
+    },
+    originalCount: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    ...requestData(['form', 'schema']),
+    // Returns information about the schema after processing it.
+    schemaAnalysis() {
+      // `columns` holds the columns of the table that correspond to a form
+      // field. We display a maximum of 10 such columns in the table.
+      const columns = [];
+      let idFieldCount = 0;
+      for (const field of this.schema) {
+        // Note that the field might not have a type, in which case `type` will
+        // be undefined -- though I have seen a field without a type only in the
+        // Widgets sample form (<branch>):
+        // https://github.com/opendatakit/sample-forms/blob/e9fe5838e106b04bf69f43a8a791327093571443/Widgets.xml
+        const { type, path } = field;
+        // We already display __id as the instance ID, so if there is also an
+        // meta.instanceID or instanceID field, we do not display it. Further,
+        // if the only fields that we do not display are instanceID fields, we
+        // do not show the field subset indicator.
+        if (type === 'string' &&
+          ((path.length === 2 && path[0] === 'meta' && path[1] === 'instanceID') ||
+          (path.length === 1 && path[0] === 'instanceID')))
+          idFieldCount += 1;
+        else if (type !== 'repeat' && columns.length < 10) {
+          const header = path.join('-');
+          const htmlClass = ['submission-field'];
+          if (type != null && /^\w+$/.test(type))
+            htmlClass.push(`submission-row-${type}-column`);
+          const key = this.$uniqueId();
+          columns.push({ type, path, header, htmlClass, key });
+        }
+      }
+      return {
+        columns,
+        subsetShown: columns.length !== this.schema.length - idFieldCount
+      };
+    },
+    table2Class() {
+      return {
+        table: true,
+        'table-condensed': true,
+        'field-subset': this.schemaAnalysis.subsetShown
+      };
+    },
+    fieldColumns() {
+      return this.schemaAnalysis.columns;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+#submission-table1 {
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
+  position: relative;
+  // Adding z-index so that the background color of the other table's thead does
+  // not overlay the box shadow.
+  z-index: 1;
+
+  float: left;
+  width: unset;
+
+  th:last-child {
+    border-right: $border-bottom-table-heading;
+  }
+
+  td:last-child {
+    border-right: $border-top-table-data;
+  }
+}
+
+#submission-table2-container {
+  // Placing the margin here rather than on the table so that the horizontal
+  // scrollbar appears immediately below the table, above the margin.
+  margin-bottom: $margin-bottom-table;
+  overflow-x: scroll;
+}
+
+#submission-table2 {
+  margin-bottom: 0;
+
+  th, td {
+    &.submission-field {
+      max-width: 250px;
+    }
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.field-subset {
+    $subset-padding-left: 30px;
+
+    thead th:last-child {
+      $color-fill: $color-table-heading-background;
+      $color-break: $color-page-background;
+      $zig-size: 10px;
+      background: linear-gradient(-135deg, $color-fill 5px, transparent 0) 0 5px,
+        linear-gradient(135deg, $color-break 9px, $color-fill 0) 0 5px;
+      background-position: 10px 5px;
+      background-repeat: repeat-y;
+      background-size: $zig-size $zig-size;
+      overflow: visible; // this is okay for "Instance ID", which is never truncated.
+      padding-left: $subset-padding-left;
+      position: relative;
+
+      &::before {
+        background: linear-gradient(-135deg, transparent 9px, $color-fill 0) 0 5px,
+          linear-gradient(135deg, $color-fill 5px, $color-break 0) 0 5px;
+        background-position: left top;
+        background-repeat: repeat-y;
+        background-size: $zig-size $zig-size;
+        content: '';
+        display: block;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: $zig-size;
+      }
+
+      &::after { // TODO: is there a cleverer way to do this?
+        border-bottom: 1px solid $color-page-background;
+        content: '';
+        display: block;
+        left: 7px;
+        position: absolute;
+        top: 100%;
+        width: 11px;
+      }
+    }
+
+    tbody td:last-child {
+      padding-left: $subset-padding-left;
+      position: relative;
+
+      &::before {
+        color: #999;
+        content: '…';
+        display: block;
+        left: 4px;
+        top: 4px;
+        pointer-events: none;
+        position: absolute
+      }
+    }
+  }
+}
+</style>
diff --git a/src/presenters/base.js b/src/presenters/base.js
index 168872b98..537523c85 100644
--- a/src/presenters/base.js
+++ b/src/presenters/base.js
@@ -20,6 +20,9 @@ class Base {
     return this._data;
   }
 
+  // Unique ID for the object that can be used if the object has no other ID
+  // property. Typically used with v-for and v-bind:key. key() does not return a
+  // Backend Key object.
   get key() {
     if (this._key != null) return this._key;
     this._key = Vue.prototype.$uniqueId();
diff --git a/src/router.js b/src/router.js
index 85183fc2f..906a65237 100644
--- a/src/router.js
+++ b/src/router.js
@@ -22,7 +22,6 @@ import FormAttachmentList from './components/form-attachment/list.vue';
 import FormOverview from './components/form/overview.vue';
 import FormSettings from './components/form/settings.vue';
 import FormShow from './components/form/show.vue';
-import FormSubmissionList from './components/form/submission/list.vue';
 import NotFound from './components/not-found.vue';
 import ProjectHome from './components/project/home.vue';
 import ProjectList from './components/project/list.vue';
@@ -30,6 +29,7 @@ import ProjectOverview from './components/project/overview.vue';
 import ProjectSettings from './components/project/settings.vue';
 import ProjectShow from './components/project/show.vue';
 import ProjectUserList from './components/project/user/list.vue';
+import SubmissionList from './components/submission/list.vue';
 import SystemHome from './components/system/home.vue';
 import UserEdit from './components/user/edit.vue';
 import UserHome from './components/user/home.vue';
@@ -143,7 +143,7 @@ const routes = [
         children: [
           { path: '', component: FormOverview },
           { path: 'media-files', component: FormAttachmentList },
-          { path: 'submissions', component: FormSubmissionList },
+          { path: 'submissions', component: SubmissionList },
           { path: 'settings', component: FormSettings }
         ]
       }
@@ -295,12 +295,7 @@ preserveDataForKey({
 });
 preserveDataForKey({
   key: '*',
-  to: [
-    'FormOverview',
-    'FormAttachmentList',
-    'FormSubmissionList',
-    'FormSettings'
-  ],
+  to: ['FormOverview', 'FormAttachmentList', 'SubmissionList', 'FormSettings'],
   params: ['projectId', 'xmlFormId']
 });
 
@@ -310,7 +305,7 @@ preserveDataForKey({
     // ProjectShow
     'ProjectOverview', 'ProjectUserList', 'FieldKeyList', 'ProjectSettings',
     // FormShow
-    'FormOverview', 'FormAttachmentList', 'FormSubmissionList', 'FormSettings'
+    'FormOverview', 'FormAttachmentList', 'SubmissionList', 'FormSettings'
   ],
   params: ['projectId']
 });
diff --git a/src/store/modules/request.js b/src/store/modules/request.js
index c1aa58478..94a993385 100644
--- a/src/store/modules/request.js
+++ b/src/store/modules/request.js
@@ -36,6 +36,7 @@ const allKeys = [
   'attachments',
   // A single chunk of submissions OData
   'submissionsChunk',
+  'keys',
   'fieldKeys',
 
   'users',
diff --git a/test/components/form/submission/analyze.spec.js b/test/components/submission/analyze.spec.js
similarity index 72%
rename from test/components/form/submission/analyze.spec.js
rename to test/components/submission/analyze.spec.js
index 7cb8bf195..7e3f21da9 100644
--- a/test/components/form/submission/analyze.spec.js
+++ b/test/components/submission/analyze.spec.js
@@ -1,20 +1,20 @@
-import FormSubmissionAnalyze from '../../../../src/components/form/submission/analyze.vue';
-import FormSubmissionList from '../../../../src/components/form/submission/list.vue';
-import testData from '../../../data';
-import { mockHttp, mockRoute } from '../../../http';
-import { mockLogin } from '../../../session';
-import { mountAndMark } from '../../../destroy';
-import { trigger } from '../../../event';
+import SubmissionAnalyze from '../../../src/components/submission/analyze.vue';
+import SubmissionList from '../../../src/components/submission/list.vue';
+import testData from '../../data';
+import { mockHttp, mockRoute } from '../../http';
+import { mockLogin } from '../../session';
+import { mountAndMark } from '../../destroy';
+import { trigger } from '../../event';
 
 const clickTab = (wrapper, tabText) => {
-  for (const a of wrapper.find('#form-submission-analyze .nav-tabs a')) {
+  for (const a of wrapper.find('#submission-analyze .nav-tabs a')) {
     if (a.text().trim() === tabText)
       return trigger.click(a).then(() => wrapper);
   }
   throw new Error('tab not found');
 };
 
-describe('FormSubmissionAnalyze', () => {
+describe('SubmissionAnalyze', () => {
   beforeEach(mockLogin);
 
   it('opens the modal upon button click', () => {
@@ -24,7 +24,7 @@ describe('FormSubmissionAnalyze', () => {
     testData.extendedSubmissions.createPast(1);
 
     return mockHttp()
-      .mount(FormSubmissionList, {
+      .mount(SubmissionList, {
         propsData: {
           projectId: '1',
           xmlFormId: form.xmlFormId
@@ -34,18 +34,19 @@ describe('FormSubmissionAnalyze', () => {
       .request(component => {
         // Normally the `activated` hook calls this method, but that hook is not
         // called here, so we call the method ourselves instead.
-        component.vm.fetchSchemaAndFirstChunk();
+        component.vm.fetchInitialData();
       })
+      .respondWithData(() => testData.standardKeys.sorted())
       .respondWithData(() => testData.extendedForms.last()._schema)
       .respondWithData(testData.submissionOData)
       .afterResponses(component => {
-        component.first(FormSubmissionAnalyze).getProp('state').should.be.false();
+        component.first(SubmissionAnalyze).getProp('state').should.be.false();
         return component;
       })
       .then(component =>
-        trigger.click(component, '#form-submission-list-analyze-button'))
+        trigger.click(component, '#submission-list-analyze-button'))
       .then(component => {
-        component.first(FormSubmissionAnalyze).getProp('state').should.be.true();
+        component.first(SubmissionAnalyze).getProp('state').should.be.true();
       });
   });
 
@@ -60,14 +61,15 @@ describe('FormSubmissionAnalyze', () => {
       .respondWithData(() => testData.extendedProjects.last())
       .respondWithData(() => testData.extendedForms.last())
       .respondWithData(() => testData.extendedFormAttachments.sorted())
+      .respondWithData(() => testData.standardKeys.sorted())
       .respondWithData(() => testData.extendedForms.last()._schema)
       .respondWithData(testData.submissionOData)
       .afterResponses(app =>
-        trigger.click(app, '#form-submission-list-analyze-button'))
-      .then(app => trigger.click(app, '#form-submission-analyze-odata-url'))
+        trigger.click(app, '#submission-list-analyze-button'))
+      .then(app => trigger.click(app, '#submission-analyze-odata-url'))
       .then(() => {
         const selection = window.getSelection();
-        const url = $('#form-submission-analyze-odata-url')[0];
+        const url = $('#submission-analyze-odata-url')[0];
         selection.anchorNode.should.equal(url);
         selection.focusNode.should.equal(url);
       });
@@ -81,7 +83,7 @@ describe('FormSubmissionAnalyze', () => {
         .last();
       testData.extendedSubmissions.createPast(1);
 
-      modal = mountAndMark(FormSubmissionAnalyze, {
+      modal = mountAndMark(SubmissionAnalyze, {
         propsData: { projectId: '1' },
         requestData: { form }
       });
@@ -95,9 +97,9 @@ describe('FormSubmissionAnalyze', () => {
       const { xmlFormId } = testData.extendedForms.last();
       const baseUrl = `${window.location.origin}/v1/projects/1/forms/${xmlFormId}.svc`;
       const url = `${baseUrl}${urlSuffix}`;
-      modal.first('#form-submission-analyze-odata-url').text().trim().should.equal(url);
+      modal.first('#submission-analyze-odata-url').text().trim().should.equal(url);
       // Test the presence of help text.
-      const help = modal.first('#form-submission-analyze-tool-help');
+      const help = modal.first('#submission-analyze-tool-help');
       ($(help.element).children().length !== 0).should.equal(hasHelp);
     };
 
diff --git a/test/components/submission/decrypt.spec.js b/test/components/submission/decrypt.spec.js
new file mode 100644
index 000000000..d5789398f
--- /dev/null
+++ b/test/components/submission/decrypt.spec.js
@@ -0,0 +1,225 @@
+import SubmissionDecrypt from '../../../src/components/submission/decrypt.vue';
+import SubmissionList from '../../../src/components/submission/list.vue';
+import testData from '../../data';
+import { fillForm, submitForm, trigger } from '../../event';
+import { mockHttp } from '../../http';
+import { mockLogin } from '../../session';
+import { mountAndMark } from '../../destroy';
+
+const loadSubmissionList = (attachToDocument = false) => {
+  // Create test data.
+  if (testData.standardKeys.size === 0)
+    testData.standardKeys.createPast(1, { managed: true });
+  if (testData.extendedProjects.size === 0) {
+    const key = testData.standardKeys.sorted().filter(k => k.managed)[0];
+    testData.extendedProjects.createPast(1, { key }).last();
+  }
+  if (testData.extendedForms.size === 0) testData.extendedForms.createPast(1);
+
+  return mockHttp()
+    .mount(SubmissionList, {
+      propsData: {
+        projectId: testData.extendedProjects.last().id.toString(),
+        xmlFormId: testData.extendedForms.last().xmlFormId
+      },
+      requestData: {
+        project: testData.extendedProjects.last(),
+        form: testData.extendedForms.last()
+      },
+      attachToDocument
+    })
+    .request(component => {
+      // Normally the `activated` hook calls this method, but that hook is not
+      // called here, so we call the method ourselves instead.
+      component.vm.fetchInitialData();
+    })
+    .respondWithData(() => testData.standardKeys.sorted())
+    .respondWithData(() => testData.extendedForms.last()._schema)
+    .respondWithData(testData.submissionOData);
+};
+const wait = (delay) => new Promise(resolve => {
+  setTimeout(resolve, delay);
+});
+const submitDecryptForm = (formAction) => {
+  const modal = mountAndMark(SubmissionDecrypt, {
+    propsData: {
+      state: true,
+      managedKey: testData.standardKeys.createPast(1, { managed: true }).last(),
+      formAction,
+      delayBetweenChecks: 1
+    },
+    attachToDocument: true
+  });
+  // Wait for the iframe to load.
+  return wait(200)
+    .then(() => submitForm(modal, 'form', [['input', 'passphrase']]));
+};
+
+describe('SubmissionDecrypt', () => {
+  beforeEach(mockLogin);
+
+  describe('button tag', () => {
+    it('renders the button as a <button> when a managed key is returned', () =>
+      loadSubmissionList().afterResponses(component => {
+        const button = component.first('#submission-list-download-button');
+        button.element.tagName.should.equal('BUTTON');
+      }));
+
+    it('renders button as an <a> when only an unmanaged key is returned', () => {
+      testData.standardKeys.createPast(1, { managed: false });
+      return loadSubmissionList().afterResponses(component => {
+        const button = component.first('#submission-list-download-button');
+        button.element.tagName.should.equal('A');
+      });
+    });
+  });
+
+  it('shows the modal when the button is clicked', () =>
+    loadSubmissionList()
+      .afterResponses(component => {
+        component.first(SubmissionDecrypt).getProp('state').should.be.false();
+        return trigger.click(component, '#submission-list-download-button');
+      })
+      .then(component => {
+        component.first(SubmissionDecrypt).getProp('state').should.be.true();
+      }));
+
+  it('focuses the passphrase input', () =>
+    loadSubmissionList(true)
+      .afterResponses(component =>
+        trigger.click(component, '#submission-list-download-button'))
+      .then(component => {
+        component.first('input').should.be.focused();
+      }));
+
+  it('shows a hint if there is one', () => {
+    const modal = mountAndMark(SubmissionDecrypt, {
+      propsData: {
+        state: true,
+        managedKey: testData.standardKeys
+          .createPast(1, { managed: true, hint: 'some hint' })
+          .last(),
+        formAction: '/projects/1/forms/f/submissions.csv.zip'
+      }
+    });
+    const introductions = modal.find('.modal-introduction');
+    introductions.length.should.equal(2);
+    introductions[1].text().trim().should.equal('Hint: some hint');
+  });
+
+  it('resets the modal after it is hidden', () =>
+    loadSubmissionList()
+      .afterResponses(component =>
+        trigger.click(component, '#submission-list-download-button'))
+      .then(component => {
+        const modal = component.first(SubmissionDecrypt);
+        return fillForm(modal, [['input', 'passphrase']])
+          .then(() => trigger.click(modal, '.btn-link'))
+          .then(() => component);
+      })
+      .then(component =>
+        trigger.click(component, '#submission-list-download-button'))
+      .then(component => {
+        const input = component.first(SubmissionDecrypt).first('input');
+        input.element.value.should.equal('');
+      }));
+
+  /*
+  Normally, the iframe form is submitted immediately after it is created, after
+  which, at least within our tests, the iframe changes pages. However, that
+  means that it is challenging to test things about the iframe form.
+
+  Outside Karma, it seems that the iframe changes pages if a Problem is
+  returned after the form submission, but it does not change pages if the
+  submission is successful. That means that submitting a form successfully might
+  give us a way to test things about the form. However, I'm not sure how to set
+  that up in Karma: in these tests, the iframe always changes pages after the
+  form is submitted, whether successfully or not.
+
+  Instead, here, we do not submit any form, but simply call the
+  replaceIframeBody() method, then test the result.
+  */
+  it('appends a form to the iframe body and fills it', () => {
+    const key = testData.standardKeys.createPast(1, { managed: true }).last();
+    const modal = mountAndMark(SubmissionDecrypt, {
+      propsData: {
+        state: true,
+        managedKey: key,
+        formAction: '/projects/1/forms/f/submissions.csv.zip'
+      },
+      attachToDocument: true
+    });
+    // Wait for the iframe to load.
+    return wait(200)
+      .then(() => fillForm(modal, [['input', 'secret passphrase']]))
+      .then(() => {
+        modal.vm.replaceIframeBody();
+
+        const form = modal.vm.$refs.iframe.contentWindow.document
+          .querySelector('form');
+        form.getAttribute('action').should.equal('/projects/1/forms/f/submissions.csv.zip');
+
+        const inputs = form.querySelectorAll('input');
+        inputs.length.should.equal(2);
+        inputs[0].getAttribute('name').should.equal(key.id.toString());
+        inputs[0].value.should.equal('secret passphrase');
+        inputs[1].value.should.equal(modal.vm.session.csrf);
+      });
+  });
+
+  describe('after the iframe form is submitted', () => {
+    it('shows a danger alert if a Problem is returned', () =>
+      submitDecryptForm('/test/files/problem.html')
+        // Wait for a Problem check.
+        .then(modal => wait(200)
+          .then(() => {
+            modal.should.alert(
+              'danger',
+              'An unknown internal problem has occurred. Please try again later.'
+            );
+          })));
+
+    // We do not actually submit the iframe form here, because that would cause
+    // the iframe to change pages. Instead, we simply create and fill the form,
+    // then call the scheduleProblemCheck() method.
+    it('continually checks for a Problem even if form submission is successful', () => {
+      const key = testData.standardKeys.createPast(1, { managed: true }).last();
+      const modal = mountAndMark(SubmissionDecrypt, {
+        propsData: {
+          state: true,
+          managedKey: key,
+          formAction: '/projects/1/forms/f/submissions.csv.zip',
+          delayBetweenChecks: 1
+        },
+        attachToDocument: true
+      });
+      // Wait for the iframe to load.
+      return wait(200)
+        .then(() => {
+          modal.vm.replaceIframeBody();
+          modal.setData({ problemChecks: 300 });
+          modal.vm.scheduleProblemCheck();
+          // Wait for a Problem check.
+          return wait(200)
+            .then(() => {
+              const checks = modal.data().problemChecks;
+              checks.should.be.within(2, 299);
+              // Wait for another Problem check.
+              return wait(200).then(() => {
+                modal.data().problemChecks.should.be.within(1, checks - 1);
+                clearTimeout(modal.data().timeoutId);
+              });
+            });
+        });
+    });
+
+    // Here we actually submit the iframe form, which causes the iframe to
+    // change pages. To detect the info alert, we return /blank.html instead of
+    // a Problem.
+    it('shows an info alert', () =>
+      submitDecryptForm('/blank.html').then(modal => {
+        modal.should.alert('info');
+        clearTimeout(modal.data().timeoutId);
+      }));
+  });
+});
diff --git a/test/components/form/submission/list.spec.js b/test/components/submission/list.spec.js
similarity index 83%
rename from test/components/form/submission/list.spec.js
rename to test/components/submission/list.spec.js
index 89b481fe3..61051b2cf 100644
--- a/test/components/form/submission/list.spec.js
+++ b/test/components/submission/list.spec.js
@@ -1,14 +1,14 @@
-import FormShow from '../../../../src/components/form/show.vue';
-import FormSubmissionList from '../../../../src/components/form/submission/list.vue';
-import Spinner from '../../../../src/components/spinner.vue';
-import testData from '../../../data';
-import { formatDate, uniqueSequence } from '../../../../src/util/util';
-import { mockHttp, mockRoute } from '../../../http';
-import { mockLogin, mockRouteThroughLogin } from '../../../session';
-import { setLuxon } from '../../../util/util';
-import { trigger } from '../../../event';
-
-describe('FormSubmissionList', () => {
+import FormShow from '../../../src/components/form/show.vue';
+import SubmissionList from '../../../src/components/submission/list.vue';
+import Spinner from '../../../src/components/spinner.vue';
+import testData from '../../data';
+import { formatDate, uniqueSequence } from '../../../src/util/util';
+import { mockHttp, mockRoute } from '../../http';
+import { mockLogin, mockRouteThroughLogin } from '../../session';
+import { setLuxon } from '../../util/util';
+import { trigger } from '../../event';
+
+describe('SubmissionList', () => {
   describe('routing', () => {
     it('anonymous user is redirected to login', () =>
       mockRoute('/projects/1/forms/f/submissions')
@@ -24,6 +24,7 @@ describe('FormSubmissionList', () => {
           .createPast(1, { xmlFormId: 'f', submissions: 0 })
           .last())
         .respondWithData(() => testData.extendedFormAttachments.sorted())
+        .respondWithData(() => testData.standardKeys.sorted())
         .respondWithData(() => testData.extendedForms.last()._schema)
         .respondWithData(testData.submissionOData)
         .afterResponses(app => {
@@ -36,7 +37,7 @@ describe('FormSubmissionList', () => {
       it('requests schema for a user whose first navigation is to the tab', () =>
         mockRoute('/projects/1/forms/f/submissions')
           .beforeEachResponse((app, request, index) => {
-            if (index === 3)
+            if (index === 4)
               request.url.should.equal('/v1/projects/1/forms/f.schema.json?flatten=true&odata=true');
           })
           .respondWithData(() => testData.extendedProjects.createPast(1).last())
@@ -44,6 +45,7 @@ describe('FormSubmissionList', () => {
             .createPast(1, { xmlFormId: 'f', submissions: 0 })
             .last())
           .respondWithData(() => testData.extendedFormAttachments.sorted())
+          .respondWithData(() => testData.standardKeys.sorted())
           .respondWithData(() => testData.extendedForms.last()._schema)
           .respondWithData(testData.submissionOData));
 
@@ -57,16 +59,17 @@ describe('FormSubmissionList', () => {
           .complete()
           .route('/projects/1/forms/f/submissions')
           .beforeEachResponse((app, request, index) => {
-            if (index === 0)
+            if (index === 1)
               request.url.should.equal('/v1/projects/1/forms/f.schema.json?flatten=true&odata=true');
           })
+          .respondWithData(() => testData.standardKeys.sorted())
           .respondWithData(() => testData.extendedForms.last()._schema)
           .respondWithData(testData.submissionOData));
 
       it('resets and updates the component after the route updates', () =>
         mockRoute('/projects/1/forms/f1/submissions')
           .beforeEachResponse((app, request, index) => {
-            if (index === 3)
+            if (index === 4)
               request.url.should.equal('/v1/projects/1/forms/f1.schema.json?flatten=true&odata=true');
           })
           .respondWithData(() => testData.extendedProjects.createPast(1).last())
@@ -74,27 +77,28 @@ describe('FormSubmissionList', () => {
             .createPast(1, { xmlFormId: 'f1', submissions: 1 })
             .last())
           .respondWithData(() => testData.extendedFormAttachments.sorted())
+          .respondWithData(() => testData.standardKeys.sorted())
           .respondWithData(() => testData.extendedForms.last()._schema)
           .respondWithData(() => {
             testData.extendedSubmissions.createPast(1);
             return testData.submissionOData(1, 0);
           })
           .afterResponses(app => {
-            const { submissions } = app.first(FormSubmissionList).data();
-            submissions.length.should.equal(1);
+            app.first(SubmissionList).data().submissions.length.should.equal(1);
           })
           .route('/projects/1/forms/f2/submissions')
           .beforeAnyResponse(app => {
-            should.not.exist(app.first(FormSubmissionList).data().submissions);
+            should.not.exist(app.first(SubmissionList).data().submissions);
           })
           .beforeEachResponse((app, request, index) => {
-            if (index === 2)
+            if (index === 3)
               request.url.should.equal('/v1/projects/1/forms/f2.schema.json?flatten=true&odata=true');
           })
           .respondWithData(() => testData.extendedForms
             .createPast(1, { xmlFormId: 'f2', submissions: 2 })
             .last())
           .respondWithData(() => testData.extendedFormAttachments.sorted())
+          .respondWithData(() => testData.standardKeys.sorted())
           .respondWithData(() => testData.extendedForms.last()._schema)
           .respondWithData(() => {
             const form = testData.extendedForms.last();
@@ -102,8 +106,7 @@ describe('FormSubmissionList', () => {
             return testData.submissionOData(2, 1);
           })
           .afterResponses(app => {
-            const { submissions } = app.first(FormSubmissionList).data();
-            submissions.length.should.equal(2);
+            app.first(SubmissionList).data().submissions.length.should.equal(2);
           }));
     });
   });
@@ -137,7 +140,7 @@ describe('FormSubmissionList', () => {
 
       const [small = 250, large = 1000] = chunkSizes;
       return mockHttp()
-        .mount(FormSubmissionList, {
+        .mount(SubmissionList, {
           propsData: {
             projectId: '1',
             xmlFormId: testData.extendedForms.last().xmlFormId,
@@ -149,8 +152,9 @@ describe('FormSubmissionList', () => {
         .request(component => {
           // Normally the `activated` hook calls this method, but that hook is
           // not called here, so we call the method ourselves instead.
-          component.vm.fetchSchemaAndFirstChunk();
+          component.vm.fetchInitialData();
         })
+        .respondWithData(() => testData.standardKeys.sorted())
         .respondWithData(() => testData.extendedForms.last()._schema)
         .respondWithData(() => testData.submissionOData(small, 0));
     };
@@ -162,6 +166,7 @@ describe('FormSubmissionList', () => {
           .createPast(1, { xmlFormId: 'f', submissions: 0 })
           .last())
         .respondWithData(() => testData.extendedFormAttachments.sorted())
+        .respondWithData(() => testData.standardKeys.sorted())
         .respondWithData(() => testData.extendedForms.last()._schema)
         .respondWithData(testData.submissionOData)
         .complete()
@@ -173,7 +178,7 @@ describe('FormSubmissionList', () => {
     describe('table data', () => {
       it('contains the correct data for the left half of the table', () =>
         loadSubmissions(2).afterResponses(page => {
-          const tr = page.find('#form-submission-list-table1 tbody tr');
+          const tr = page.find('#submission-table1 tbody tr');
           const submissions = testData.extendedSubmissions.sorted();
           tr.length.should.equal(submissions.length);
           for (let i = 0; i < tr.length; i += 1) {
@@ -214,14 +219,14 @@ describe('FormSubmissionList', () => {
           testData.extendedForms
             .createPast(1, { hasInstanceId: true, submissions: 1 });
           return loadSubmissions(1).afterResponses(component => {
-            const th = component.find('#form-submission-list-table2 th');
+            const th = component.find('#submission-table2 th');
             th.map(wrapper => wrapper.text().trim()).should.eql(headers);
           });
         });
 
         it('contains the correct instance IDs', () =>
           loadSubmissions(2).afterResponses(component => {
-            const tr = component.find('#form-submission-list-table2 tbody tr');
+            const tr = component.find('#submission-table2 tbody tr');
             const submissions = testData.extendedSubmissions.sorted();
             tr.length.should.equal(submissions.length);
             for (let i = 0; i < tr.length; i += 1) {
@@ -233,13 +238,13 @@ describe('FormSubmissionList', () => {
         it('correctly formats int values', () =>
           loadSubmissions(1, { hasInt: true }).afterResponses(component => {
             const td = tdByRowAndColumn(
-              component.first('#form-submission-list-table2 tbody tr'),
+              component.first('#submission-table2 tbody tr'),
               'testInt'
             );
             const submission = testData.extendedSubmissions.last();
             const localeString = submission._oData.testInt.toLocaleString();
             td.text().trim().should.equal(localeString);
-            td.hasClass('form-submission-list-int-column').should.be.true();
+            td.hasClass('submission-row-int-column').should.be.true();
           }));
 
         describe('decimal values', () => {
@@ -247,10 +252,10 @@ describe('FormSubmissionList', () => {
             loadSubmissions(1, { hasDecimal: true })
               .afterResponses(component => {
                 const td = tdByRowAndColumn(
-                  component.first('#form-submission-list-table2 tbody tr'),
+                  component.first('#submission-table2 tbody tr'),
                   'testDecimal'
                 );
-                td.hasClass('form-submission-list-decimal-column').should.be.true();
+                td.hasClass('submission-row-decimal-column').should.be.true();
               }));
 
           // Array of test cases, where each case is an array with the following
@@ -273,7 +278,7 @@ describe('FormSubmissionList', () => {
             it(`correctly formats ${testDecimal}`, () =>
               loadSubmissions(1, { testDecimal }).afterResponses(component => {
                 const td = tdByRowAndColumn(
-                  component.first('#form-submission-list-table2 tbody tr'),
+                  component.first('#submission-table2 tbody tr'),
                   'testDecimal'
                 );
                 td.text().trim().should.equal(localeString);
@@ -284,7 +289,7 @@ describe('FormSubmissionList', () => {
         it('correctly formats string values', () =>
           loadSubmissions(1, { hasStrings: true }).afterResponses(component => {
             const td = tdByRowAndColumn(
-              component.first('#form-submission-list-table2 tbody tr'),
+              component.first('#submission-table2 tbody tr'),
               'testString1'
             );
             const { testString1 } = testData.extendedSubmissions.last()._oData;
@@ -308,7 +313,7 @@ describe('FormSubmissionList', () => {
             it(`correctly formats ${testDate}`, () =>
               loadSubmissions(1, { testDate }).afterResponses(component => {
                 const td = tdByRowAndColumn(
-                  component.first('#form-submission-list-table2 tbody tr'),
+                  component.first('#submission-table2 tbody tr'),
                   'testDate'
                 );
                 td.text().trim().should.equal(formatted);
@@ -347,7 +352,7 @@ describe('FormSubmissionList', () => {
               return loadSubmissions(1, { testTime })
                 .afterResponses(component => {
                   const td = tdByRowAndColumn(
-                    component.first('#form-submission-list-table2 tbody tr'),
+                    component.first('#submission-table2 tbody tr'),
                     'testTime'
                   );
                   td.text().trim().should.equal(formatted);
@@ -388,7 +393,7 @@ describe('FormSubmissionList', () => {
               return loadSubmissions(1, { testDateTime })
                 .afterResponses(component => {
                   const td = tdByRowAndColumn(
-                    component.first('#form-submission-list-table2 tbody tr'),
+                    component.first('#submission-table2 tbody tr'),
                     'testDateTime'
                   );
                   td.text().trim().should.equal(formatted);
@@ -414,7 +419,7 @@ describe('FormSubmissionList', () => {
             it(`correctly formats ${testGeopoint.coordinates.join(' ')}`, () =>
               loadSubmissions(1, { testGeopoint }).afterResponses(component => {
                 const td = tdByRowAndColumn(
-                  component.first('#form-submission-list-table2 tbody tr'),
+                  component.first('#submission-table2 tbody tr'),
                   'testGeopoint'
                 );
                 td.text().trim().should.equal(formatted);
@@ -426,10 +431,10 @@ describe('FormSubmissionList', () => {
           loadSubmissions(1, { instanceId: 'abc 123', testGroup: { testBinary: 'def 456.jpg' } })
             .afterResponses(component => {
               const td = tdByRowAndColumn(
-                component.first('#form-submission-list-table2 tbody tr'),
+                component.first('#submission-table2 tbody tr'),
                 'testGroup-testBinary'
               );
-              td.hasClass('form-submission-list-binary-column').should.be.true();
+              td.hasClass('submission-row-binary-column').should.be.true();
               const $a = $(td.element).find('a');
               $a.length.should.equal(1);
               $a.attr('href').should.equal(`/v1/projects/1/forms/${encodedFormId()}/submissions/abc%20123/attachments/def%20456.jpg`);
@@ -481,11 +486,8 @@ describe('FormSubmissionList', () => {
               testData.extendedProjects.createPast(1);
               testData.extendedForms.createPast(1, { schema, submissions: 1 });
               return loadSubmissions(1).afterResponses(component => {
-                component
-                  .first('#form-submission-list-table2')
-                  .hasClass('form-submission-list-field-subset')
-                  .should
-                  .equal(hasClass);
+                const table2 = component.first('#submission-table2');
+                table2.hasClass('field-subset').should.equal(hasClass);
               });
             });
           }
@@ -493,6 +495,12 @@ describe('FormSubmissionList', () => {
       }
     });
 
+    it('shows a message if there are no submissions', () =>
+      loadSubmissions(0)
+        .afterResponses(component => {
+          component.find('.empty-table-message').length.should.equal(1);
+        }));
+
     describe('refresh button', () => {
       for (let i = 1; i <= 2; i += 1) {
         it(`refreshes part ${i} of table after refresh button is clicked`, () => {
@@ -502,23 +510,44 @@ describe('FormSubmissionList', () => {
             .respondWithData(() => testData.extendedProjects.last())
             .respondWithData(form)
             .respondWithData(() => testData.extendedFormAttachments.sorted())
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithData(() => form()._schema)
             .testRefreshButton({
               collection: testData.extendedSubmissions,
               respondWithData: testData.submissionOData,
-              tableSelector: `#form-submission-list-table${i}`
+              tableSelector: `#submission-table${i}`
             });
         });
       }
     });
 
+    describe('download button', () => {
+      it('shows the number of submissions', () =>
+        loadSubmissions(2)
+          .afterResponses(page => {
+            const button = page.first('#submission-list-download-button');
+            const text = button.text().trim().replace(/\s+/g, ' ');
+            const count = testData.extendedSubmissions.size;
+            text.should.equal(`Download all ${count} records`);
+          }));
+
+      it('has the correct href', () =>
+        loadSubmissions(1)
+          .afterResponses(page => {
+            const button = page.first('#submission-list-download-button');
+            const $button = $(button.element);
+            $button.prop('tagName').should.equal('A');
+            $button.attr('href').should.equal(`/v1/projects/1/forms/${encodedFormId()}/submissions.csv.zip`);
+          }));
+    });
+
     describe('load by chunk', () => {
       const checkTopSkip = (request, top, skip) => {
         request.url.should.match(new RegExp(`%24top=${top}(&|$)`));
         request.url.should.match(new RegExp(`%24skip=${skip}(&|$)`));
       };
       const checkIds = (component, count, offset = 0) => {
-        const rows = component.find('#form-submission-list-table2 tbody tr');
+        const rows = component.find('#submission-table2 tbody tr');
         rows.length.should.equal(count);
         const submissions = testData.extendedSubmissions.sorted();
         submissions.length.should.be.aboveOrEqual(count + offset);
@@ -530,40 +559,58 @@ describe('FormSubmissionList', () => {
         }
       };
       const checkMessage = (component, spinnerShown, text) => {
-        const message = component.first('#form-submission-list-message');
+        const message = component.first('#submission-list-message');
         const spinners = component.find(Spinner)
           .filter(wrapper => $.contains(message.element, wrapper.vm.$el));
         spinners.length.should.equal(1);
         spinners[0].getProp('state').should.equal(spinnerShown);
-        message.first('#form-submission-list-message-text').text().should.equal(text);
+        message.first('#submission-list-message-text').text().should.equal(text);
       };
 
-      it('loads a single submission', () =>
-        loadSubmissions(1).beforeEachResponse((component, request, index) => {
-          if (index === 0) return;
-          checkMessage(component, true, 'Loading 1 submission…');
-        }));
+      it('loads a single submission', () => {
+        let tested = false;
+        return loadSubmissions(1)
+          .beforeEachResponse((component, request) => {
+            if (!request.url.includes('.svc/Submissions')) return;
+            checkMessage(component, true, 'Loading 1 submission…');
+            tested = true;
+          })
+          .then(() => {
+            tested.should.be.true();
+          });
+      });
 
-      it('loads all submissions if there are few of them', () =>
-        loadSubmissions(2).beforeEachResponse((component, request, index) => {
-          if (index === 0) return;
-          checkMessage(component, true, 'Loading 2 submissions…');
-        }));
+      it('loads all submissions if there are few of them', () => {
+        let tested = false;
+        return loadSubmissions(2)
+          .beforeEachResponse((component, request) => {
+            if (!request.url.includes('.svc/Submissions')) return;
+            checkMessage(component, true, 'Loading 2 submissions…');
+            tested = true;
+          })
+          .then(() => {
+            tested.should.be.true();
+          });
+      });
 
-      it('initially loads only the first chunk if there are many submissions', () =>
-        loadSubmissions(3, {}, [2])
-          .beforeEachResponse((component, request, index) => {
-            if (index === 0) return;
-            checkTopSkip(request, 2, 0);
+      it('initially loads only the first chunk if there are many submissions', () => {
+        let tested = false;
+        return loadSubmissions(3, {}, [2])
+          .beforeEachResponse((component, request) => {
+            if (!request.url.includes('.svc/Submissions')) return;
             checkMessage(component, true, 'Loading the first 2 of 3 submissions…');
+            checkTopSkip(request, 2, 0);
+            tested = true;
           })
           .afterResponses(component => {
+            tested.should.be.true();
             checkIds(component, 2);
-          }));
+          });
+      });
 
       it('shows the total in the download button even if there are multiple chunks', () =>
         loadSubmissions(10, {}, [2]).afterResponses(component => {
-          const button = component.first('#form-submission-list-download-button');
+          const button = component.first('#submission-list-download-button');
           button.text().trim().iTrim().should.equal('Download all 10 records');
         }));
 
@@ -580,14 +627,17 @@ describe('FormSubmissionList', () => {
           }));
 
       describe('scrolling', () => {
-        it('scrolling to the bottom loads the next chunk of submissions', () =>
+        it('scrolling to the bottom loads the next chunk of submissions', () => {
+          let tested = false;
           // Chunk 1
-          loadSubmissions(12, {}, [2, 3])
-            .beforeEachResponse((component, request, index) => {
-              if (index === 0) return;
+          return loadSubmissions(12, {}, [2, 3])
+            .beforeEachResponse((component, request) => {
+              if (!request.url.includes('.svc/Submissions')) return;
               checkMessage(component, true, 'Loading the first 2 of 12 submissions…');
+              tested = true;
             })
             .afterResponses(component => {
+              tested.should.be.true();
               checkMessage(component, false, '10 rows remain.');
             })
             // Chunk 2
@@ -653,12 +703,43 @@ describe('FormSubmissionList', () => {
             .respondWithData(() => testData.submissionOData(3, 11))
             .afterResponse(component => {
               checkIds(component, 12);
-              component.find('#form-submission-list-message').should.be.empty();
-            }));
+              component.find('#submission-list-message').should.be.empty();
+            });
+        });
+
+        it('does nothing upon scroll if keys request results in error', () =>
+          mockHttp()
+            .mount(SubmissionList, {
+              propsData: {
+                projectId: '1',
+                xmlFormId: 'f',
+                chunkSizes: { small: 1, large: 1000 },
+                scrolledToBottom: () => true
+              },
+              requestData: {
+                form: testData.extendedForms
+                  .createPast(1, { xmlFormId: 'f', submissions: 2 })
+                  .last()
+              }
+            })
+            .request(component => {
+              component.vm.fetchInitialData();
+            })
+            .respondWithProblem()
+            .respondWithData(() => testData.extendedForms.last()._schema)
+            .respondWithData(() => {
+              testData.extendedSubmissions.createPast(2);
+              return testData.submissionOData(1, 0);
+            })
+            .complete()
+            .request(component => {
+              component.vm.onScroll();
+            })
+            .respondWithData([/* no responses */]));
 
         it('does nothing upon scroll if schema request results in error', () =>
           mockHttp()
-            .mount(FormSubmissionList, {
+            .mount(SubmissionList, {
               propsData: {
                 projectId: '1',
                 xmlFormId: 'f',
@@ -672,8 +753,9 @@ describe('FormSubmissionList', () => {
               }
             })
             .request(component => {
-              component.vm.fetchSchemaAndFirstChunk();
+              component.vm.fetchInitialData();
             })
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithProblem()
             .respondWithData(() => {
               testData.extendedSubmissions.createPast(2);
@@ -687,7 +769,7 @@ describe('FormSubmissionList', () => {
 
         it('does nothing upon scroll if submissions request results in error', () =>
           mockHttp()
-            .mount(FormSubmissionList, {
+            .mount(SubmissionList, {
               propsData: {
                 projectId: '1',
                 xmlFormId: 'f',
@@ -701,8 +783,9 @@ describe('FormSubmissionList', () => {
               }
             })
             .request(component => {
-              component.vm.fetchSchemaAndFirstChunk();
+              component.vm.fetchInitialData();
             })
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithData(() => testData.extendedForms.last()._schema)
             .respondWithProblem()
             .complete()
@@ -810,6 +893,7 @@ describe('FormSubmissionList', () => {
               p.text().should.not.containEql('11\n');
             })
             .route(`/projects/1/forms/${encodedFormId()}/submissions`)
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithData(() => form()._schema)
             .respondWithData(() => {
               testData.extendedSubmissions.createPast(1);
@@ -827,10 +911,11 @@ describe('FormSubmissionList', () => {
           loadFormOverview(10)
             .complete()
             .route(`/projects/1/forms/${encodedFormId()}/submissions`)
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithData(() => form()._schema)
             .respondWithData(testData.submissionOData)
             .afterResponses(app => {
-              const button = app.first('#form-submission-list-download-button');
+              const button = app.first('#submission-list-download-button');
               const text = button.text().trim().iTrim();
               text.should.equal('Download all 10 records');
             })
@@ -840,7 +925,7 @@ describe('FormSubmissionList', () => {
               return testData.submissionOData();
             })
             .afterResponses(app => {
-              const button = app.first('#form-submission-list-download-button');
+              const button = app.first('#submission-list-download-button');
               const text = button.text().trim().iTrim();
               text.should.equal('Download all 11 records');
             }));
@@ -850,13 +935,14 @@ describe('FormSubmissionList', () => {
             .complete()
             // 4 submissions exist. About to request $top=2, $skip=0.
             .route(`/projects/1/forms/${encodedFormId()}/submissions`)
+            .respondWithData(() => testData.standardKeys.sorted())
             .respondWithData(() => form()._schema)
             .respondWithData(() => testData.submissionOData(2, 0))
             .complete()
             // 4 submissions exist, but 4 more are about to be created. About to
             // request $top=2, $skip=2.
             .request(app => {
-              app.first(FormSubmissionList).vm.onScroll();
+              app.first(SubmissionList).vm.onScroll();
             })
             .beforeEachResponse((app, request) => {
               checkTopSkip(request, 2, 2);
@@ -873,7 +959,7 @@ describe('FormSubmissionList', () => {
             })
             // 8 submissions exist. About to request $top=2, $skip=4.
             .request(app => {
-              app.first(FormSubmissionList).vm.onScroll();
+              app.first(SubmissionList).vm.onScroll();
             })
             .beforeEachResponse((app, request) => {
               checkTopSkip(request, 2, 4);
@@ -887,7 +973,7 @@ describe('FormSubmissionList', () => {
             })
             // 8 submissions exist. About to request $top=2, $skip=6.
             .request(app => {
-              app.first(FormSubmissionList).vm.onScroll();
+              app.first(SubmissionList).vm.onScroll();
             })
             .beforeEachResponse((app, request) => {
               checkTopSkip(request, 2, 6);
@@ -897,54 +983,13 @@ describe('FormSubmissionList', () => {
             .respondWithData(() => testData.submissionOData(2, 6))
             .afterResponse(app => {
               checkIds(app, 4, 4);
-              app.find('#form-submission-list-message').should.be.empty();
+              app.find('#submission-list-message').should.be.empty();
             })
             // 8 submissions exist. No request will be sent.
             .request(app => {
-              app.first(FormSubmissionList).vm.onScroll();
+              app.first(SubmissionList).vm.onScroll();
             }));
       });
     });
-
-    describe('download button', () => {
-      it('shows the number of submissions', () =>
-        loadSubmissions(2)
-          .afterResponses(page => {
-            const button = page.first('#form-submission-list-download-button');
-            const text = button.text().trim().replace(/\s+/g, ' ');
-            const count = testData.extendedSubmissions.size;
-            text.should.equal(`Download all ${count} records`);
-          }));
-
-      it('has the correct href', () =>
-        loadSubmissions(1)
-          .afterResponses(page => {
-            const button = page.first('#form-submission-list-download-button');
-            const $button = $(button.element);
-            $button.prop('tagName').should.equal('A');
-            $button.attr('href').should.equal(`/v1/projects/1/forms/${encodedFormId()}/submissions.csv.zip`);
-          }));
-    });
-
-    describe('no submissions', () => {
-      it('shows a message', () =>
-        loadSubmissions(0)
-          .afterResponses(component => {
-            const text = component.first('p').text().trim();
-            text.should.startWith('There are no submissions yet');
-          }));
-
-      it('does not show the download button', () =>
-        loadSubmissions(0)
-          .afterResponses(component => {
-            component.find('#form-submission-list-download-button').should.be.empty();
-          }));
-
-      it('does not show the analyze button', () =>
-        loadSubmissions(0)
-          .afterResponses(component => {
-            component.find('#form-submission-list-analyze-button').should.be.empty();
-          }));
-    });
   });
 });
diff --git a/test/data/sessions.js b/test/data/sessions.js
index 7ae490908..a6ee2ad3d 100644
--- a/test/data/sessions.js
+++ b/test/data/sessions.js
@@ -5,6 +5,7 @@ import { dataStore } from './data-store';
 export const sessions = dataStore({
   factory: ({ inPast, lastCreatedAt }) => ({
     token: faker.central.token(),
+    csrf: faker.central.token(),
     expiresAt: faker.date.future().toISOString(),
     createdAt: faker.date.timestamps(inPast, [lastCreatedAt]).createdAt
   })
diff --git a/test/event.js b/test/event.js
index 3d01f66c6..24afddbcd 100644
--- a/test/event.js
+++ b/test/event.js
@@ -109,6 +109,25 @@ trigger.dragAndDrop = (...args) => trigger.dragenter(...args)
 ////////////////////////////////////////////////////////////////////////////////
 // TRIGGERING A SERIES OF EVENTS
 
+/*
+fillForm(wrapper, selectorsAndValues) fills a form (whether an actual <form>
+element or something else). It sets the `value` property of one or more fields,
+triggering an input event for each.
+
+`wrapper` is an Avoriaz wrapper that wraps the form or a DOM node or Vue
+component that contains the form. selectorsAndValues is an array of
+[selector, value] arrays that specify how to select each field, as well as the
+field's value.
+
+fillForm() returns a promise that resolves to the wrapper.
+
+For example:
+
+  fillForm(component, [
+    ['input[type="email"]', 'email@opendatakit.org'],
+    ['input[type="password"]', 'password']
+  ]);
+*/
 export const fillForm = (wrapper, selectorsAndValues) => {
   const promise = selectorsAndValues.reduce(
     (acc, [selector, value]) => acc.then(() => {
@@ -123,6 +142,9 @@ export const fillForm = (wrapper, selectorsAndValues) => {
   return promise.then(() => wrapper);
 };
 
+// submitForm(wrapper, formSelector, fieldSelectorsAndValues) fills a form using
+// fillForm(), then submits the form. `wrapper` is an Avoriaz wrapper that
+// contains the form. submitForm() returns a promise that resolves to `wrapper`.
 export const submitForm = (wrapper, formSelector, fieldSelectorsAndValues) => {
   const form = wrapper.first(formSelector);
   return fillForm(form, fieldSelectorsAndValues)
diff --git a/test/files/problem.html b/test/files/problem.html
new file mode 100644
index 000000000..741b3bcad
--- /dev/null
+++ b/test/files/problem.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>ODK Central</title>
+  </head>
+  <body>
+    <pre>{"message":"An unknown internal problem has occurred. Please try again later.","code":500.1}</pre>
+  </body>
+</html>
