diff --git a/content/pages/contact.md b/content/pages/contact.md
index aa79944515ec5dd5d2e514479ed92be249effcf1..491ed89ef99759c0f2095ca321890c7e9abfcd0a 100644
--- a/content/pages/contact.md
+++ b/content/pages/contact.md
@@ -8,8 +8,8 @@ Submit the form below, write to [mail@ant.sr](mailto:mail@ant.sr) or leave a mes
 Looking forward to hearing from you!
 
 <form class="xhr" action="https://api.ant.sr/api/contact" method="post">
-    <input name="name" placeholder="Name">
-    <input name="email" type="email" placeholder="Email" required>
-    <textarea name="text" placeholder="Your message" required></textarea>
+    <textarea name="text" placeholder="Your message" required autofocus></textarea>
+    <input name="name" data-reveal-after="[name=text]" placeholder="Your Name" required>
+    <input name="email" data-reveal-after="[name=text]" type="email" placeholder="Your Email" required>
     <input type="submit" value="Send">
 </form>
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
index e33c1c738a1025221ca1ec2bcba51922c7782700..2556797e36fc567020b0778ce932bc6a67e11430 100644
--- a/theme/static/css/style.css
+++ b/theme/static/css/style.css
@@ -135,9 +135,11 @@ form {
 }
 input {
     flex: 1 0 10em;
+    margin: .25em;
 }
 textarea {
-    flex: 0 0 100%;
+    flex: 1 1 100%;
+    margin: .25em;
 }
 
 /* Links */
diff --git a/theme/static/js/script.js b/theme/static/js/script.js
index 36396326b3663876b527d2575f13b997770d82dd..5e5505582c439115f81e884044c9269419ebc083 100644
--- a/theme/static/js/script.js
+++ b/theme/static/js/script.js
@@ -1,20 +1,17 @@
-/* Responsive Navigation Menu */
+/* Responsive Navigation Menu
+ *
+ * Expand/collapse logic for hamburger menu.
+ */
 (function(selector) {
-    var nav = document.querySelector(selector),
-        toggle = document.createElement("button");
-    toggle.className = "toggle";
-    toggle.innerHTML  = "<span class='toggle-box'>"
-                      + "<span class='toggle-inner'></span>"
-                      + "</span>";
-    toggle.addEventListener("click", function(e) {
-        if (nav.className.indexOf("collapsed") != -1) {
-            nav.className = nav.className.replace("collapsed", "expanded");
-        } else {
-            nav.className = nav.className.replace("expanded", "collapsed");
-        }
-    }, false);
-    nav.insertBefore(toggle, nav.firstChild);
-    nav.className += "collapsed";
+    var toggle = $("<button>")
+        .addClass("toggle")
+        .html("<span class='toggle-box'>"
+            + "<span class='toggle-inner'></span>"
+            + "</span>")
+        .click(function() {
+            $(selector).toggleClass("collapsed expanded");
+        });
+    $(selector).prepend(toggle).addClass("collapsed");
 })("body > div > nav");
 
 /* Submit forms using XHR */
@@ -35,7 +32,6 @@
                     alert("Too many requests from your network. Please try again in "
                         + retry + " seconds.");
                 } else {
-                    console.log(jqXHR);
                     alert("Too many requests from your network. Please try again later.");
                 }
             } else {
@@ -45,3 +41,40 @@
         return false;
     });
 })("form.xhr");
+
+/* Dynamic Form Inputs
+ *
+ * data-reveal-after    If this attribute is filled with a jQuery selector,
+ *                      the input will be hidden until the target element has
+ *                      been changed to a non-empty value.
+ */
+(function(selector) {
+    var triggers = [];
+    $(selector).find(":input[data-reveal-after]")
+        .each(function() {
+            var trigger = $(this).data('reveal-after');
+            var deps = $(trigger).data('dependents');
+            if ($.isArray(deps)) {
+                deps.push(this);
+            } else {
+                deps = [this];
+            }
+            $(trigger).data('dependents', deps);
+            if (triggers.indexOf(trigger) == -1) {
+                triggers.push(trigger);
+            }
+        });
+    for (t in triggers) {
+        $(triggers[t]).change(function() {
+            var deps = $(this).data('dependents');
+            for (d in deps) {
+                if ($(this).val()) {
+                    $(deps[d]).show();
+                } else {
+                    $(deps[d]).hide();
+                }
+            }
+            $(deps[0]).focus();
+        }).change();
+    }
+})("form")
diff --git a/theme/templates/page.html b/theme/templates/page.html
index 2ac9941d5b99e72dcffc66a6dcfd05cb120e8235..34a6c45174c7b7c4589a26eb21f3439583077c3f 100644
--- a/theme/templates/page.html
+++ b/theme/templates/page.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}{{ page.title }}| {{ super() }}{% endblock %}
+{% block title %}{{ page.title }} | {{ super() }}{% endblock %}
 {% block content %}
             <h1>{{ page.title }}</h1>
 {% import 'translations.html' as translations with context %}