Stuff

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 out
+src/files/contactsubmit.php

src/documents/contact.html

@@ -19,10 +19,10 @@ order: 1
       <a class="icon fa fa-twitter" style="display: inline-block;" href="https://twitter.com/Tim_Stallard"></a>
     </div>
   </div>
-  <div class="animated">
-    <div>
+  <div class="animated" id="formcontainer">
+    <div id="inputscontainer" class="animated">
       Or, if you're feeling lazy, you can just fill out this form:
-      <form>
+      <form id="contactform">
         <input name="name" placeholder="Name"></input>
         <input name="subject" placeholder="Subject"></input>
         <input name="contact" placeholder="Email/Phone/Twitter"></input>
@@ -30,5 +30,19 @@ order: 1
         <input type="submit" value="Send!"></input>
       </form>
     </div>
+    <div id="completed" class="animated">
+      Your message has been sent. Expect to hear back soon!
+    </div>
   </div>
 </div>
+<script>
+  $("#contactform").submit(function(e){
+    $("#formcontainer").addClass("completed");
+    setTimeout(function(){
+      $("#formcontainer").addClass("completedmsg");
+    }, 400)
+    e.preventDefault();
+    //alert("done");
+    return false;
+  });
+</script>

src/documents/styles.css.scss

@@ -314,6 +314,26 @@ body{
         }
       }
 
+      &#formcontainer{
+        #completed{
+          display: none;
+        }
+        &.completed{
+          #inputscontainer{
+            animation-name: zoomOut;
+          }
+        }
+        &.completedmsg{
+          #inputscontainer{
+            display: none;
+          }
+          #completed{
+            animation-name: zoomIn;
+            display: block;
+          }
+        }
+      }
+
       >div{ //centered sections
         margin: auto;
         >.icon{
@@ -344,7 +364,7 @@ body{
       }
     }
   }
-  @media(min-width: 800px) and (max-height: 120vw){
+  @media (min-width: 800px) and (max-height: 120vw){
     >div{ //page container
       flex-direction: row;
       >div{ //contact panels

src/layouts/core.html.ejs

@@ -33,7 +33,7 @@
     </div>
     <div id="footer">
       <h3>&copy; Tim Stallard 2015</h3>
-      Hand crafted in the UK with DocPad, SmoothState.js, and lots of other magic - see the code on GitHub
+      Hand crafted in the UK with DocPad, SmoothState.js, and lots of other magic - see the code <a href="https://github.com/TimStallard/timstallard.me.uk">on GitHub</a>
     </div>
   </body>
 </html>