diff --git a/templates/zephyr/settings.html b/templates/zephyr/settings.html
index 8feae387ff..e25912901b 100644
--- a/templates/zephyr/settings.html
+++ b/templates/zephyr/settings.html
@@ -7,6 +7,8 @@
       {# One text line worth of space #}
       <div>&nbsp;</div>
 
+      <div class="alert" id="settings-status"></div>
+
       <div class="form-horizontal" id="api_key_button_box">
           <div class="control-group">
               <label class="control-label label_for_text">API key</label>
@@ -118,8 +120,6 @@
     </form>
     </div>
 
-    <div class="alert" id="settings-status"></div>
-
     <hr class="settings_separator" />
 
     <p><button class="btn declare_bankruptcy_button" data-dismiss="modal" aria-hidden="true">
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index 9ef87e3b06..a0548af7f9 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -765,6 +765,9 @@ $(function () {
     var settings_status = $('#settings-status');
 
     function settings_change_error(message) {
+        // Scroll to the top so the error message is visible.
+        // We would scroll anyway if we end up submitting the form.
+        viewport.scrollTop(0);
         settings_status.removeClass(status_classes)
             .addClass('alert-error')
             .text(message).stop(true).fadeTo(0,1);