diff --git a/package-lock.json b/package-lock.json
index 8fb136d..ce0d1c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3564,6 +3564,12 @@
           "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
           "dev": true
         },
+        "lodash": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
+          "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
+          "dev": true
+        },
         "minimatch": {
           "version": "0.2.14",
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
@@ -5362,12 +5368,6 @@
         }
       }
     },
-    "lodash": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-      "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
-      "dev": true
-    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
diff --git a/src/index.html b/src/index.html
index a73bc28..ae18d89 100644
--- a/src/index.html
+++ b/src/index.html
@@ -52,7 +52,7 @@
           </div>
           <div class="row">
             <div class="col col-12 col-md-4">
-              <input type="number" min="10000" max="99999" name="zip" placeholder="Postleitzahl" required>
+              <input type="text" maxlength="5" name="zip" placeholder="Postleitzahl" required>
             </div>
             <div class="col col-12 col-md-8">
               <input type="text" name="place" placeholder="Ort" required>
@@ -98,7 +98,7 @@ FabLab Bad Windsheim
 Spitalwall 16
 91435 Bad Windsheim</pre>
         <div class="download-wrapper">
-          <button type="button" id="generate" class="btn btn-success">Mitgliedsantrag herunterladen</button>
+          <button disabled type="button" id="generate" class="btn btn-danger">Mitgliedsantrag herunterladen</button>
         </div>
       </div>
 
diff --git a/src/js/script.js b/src/js/script.js
index 6e5f152..49571fc 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -1,14 +1,35 @@
 'use strict'
+
 const numSteps = 1
 
 _.forEach(_.range(numSteps), function (value) {
   $('#step-' + (value + 1) + ' form').submit(function (event) {
     $('#step-' + (value + 2)).collapse('show')
     $('#step-' + (value + 1) + '-heading .step-number').addClass('done')
+    if (isDone) {
+      $('.download-wrapper button').prop('disabled', false)
+      $('.download-wrapper button').remove('btn-danger')
+      $('.download-wrapper button').addClass('btn-success')
+    } else {
+      $('.download-wrapper button').prop('disabled', true)
+      $('.download-wrapper button').remove('btn-success')
+      $('.download-wrapper button').addClass('btn-danger')
+    }
     event.preventDefault()
   })
 })
 
+function isDone () {
+  var done = true
+  _.forEach(_.range(numSteps), (value) => {
+    console.log(value)
+    if (!$('#step-' + (value + 1) + '-heading .step-number').hasClass('done')) {
+      done = false
+    }
+  })
+  return done
+}
+
 $('#generate').click(function () {
   var model = {}
   _.forEach(_.range(numSteps), function (value) {
diff --git a/src/less/style.less b/src/less/style.less
index ba15f7e..fbd37a2 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -1,6 +1,7 @@
 @color-1: #047e7c;
 @color-2: #0c6d74;
 @color-3: #145c6c;
+@color-final: @color-2;
 @color-white: #f1f2e3;
 @color-grey: #787970;
 
@@ -97,6 +98,12 @@ header {
         &:not(.final) { // prevents animation to be shown at final step
           animation: rotate-step-number 0.5s;
         }
+
+        &.final {
+          background-color: @color-white;
+          color: @color-final;
+        }
+
         background-color: #8eca63; // green
         color: @color-white;
 
@@ -221,6 +228,12 @@ footer {
 
   .download-wrapper {
     text-align: center;
+
+    button {
+      &:disabled {
+        opacity: 1;
+      }
+    }
   }
 
   a {