diff --git a/registration.html b/registration.html
index 3ae0301..6295cf5 100644
--- a/registration.html
+++ b/registration.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -6,26 +7,26 @@
   </head>
   <body>
 
-    <div class="container">
+    <form class="container">
 
       <div class="field">
         <label class="label">First Name*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name= "first_name" type="text">
         </div>
       </div>
 
       <div class="field">
         <label class="label">Last Name*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name= "last_name" type="text">
         </div>
       </div>
 
       <div class="field">
         <label class="label">Email*</label>
         <div class="control has-icons-left has-icons-right">
-          <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
+          <input class="input is-danger" name= "email" type="text" placeholder="Email input">
           <span class="icon is-small is-left">
             <i class="fa fa-envelope"></i>
           </span>
@@ -39,7 +40,7 @@
       <div class="field">
         <label class="label">School*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name="school" type="text">
         </div>
       </div>
 
@@ -55,14 +56,14 @@
       <div class="field">
         <label class="label">Major(s)*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name="major" type="text">
         </div>
       </div>
 
       <div class="field">
         <label class="label">Graduation Year*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name="graduation_year" type="text">
         </div>
       </div>
 
@@ -70,7 +71,7 @@
         <label class="label">Ethnicity*</label>
         <div class="control">
           <div class="select">
-            <select>
+            <select id="ethnicity">
               <option>Select dropdown</option>
               <option>White or Euro-American</option>
               <option>Black, Afro-Caribbean, or African-American</option>
@@ -90,7 +91,7 @@
         <label class="label">What gender do you identify with?*</label>
         <div class="control">
           <div class="select">
-            <select>
+            <select id="gender_identity">
               <option>Select dropdown</option>
               <option>Male</option>
               <option>Female</option>
@@ -106,7 +107,7 @@
         <label class="label">What is your sexual orientation?</label>
         <div class="control">
           <div class="select">
-            <select>
+            <select id="sexual_orientation">
               <option>Select dropdown</option>
               <option>Heterosexual</option>
               <option>Homosexual</option>
@@ -122,7 +123,7 @@
         <div class="control">
           <div class="file">
             <label class="file-label">
-              <input class="file-input" type="file" name="Resume*">
+              <input class="file-input" name="file" type="file" name="Resume*">
               <span class="file-cta">
                 <span class="file-icon">
                   <i class="fa fa-upload"></i>
@@ -148,14 +149,14 @@
       <div class="field">
         <label class="label">Any useful links</label>
         <div class="control">
-          <input class="input" type="text" placeholder="Linkedin, Github, Dribbble">
+          <input class="input" name="links" type="text" placeholder="Linkedin, Github, Dribbble">
         </div>
       </div>
 
       <div class="field">
         <label class="label">Have you attended WHACK before?*</label>
         <div class="control">
-          <label class="checkbox">
+          <label  class="checkbox">
             <input type="checkbox"> Yes, as a participant <br/> 
             <input type="checkbox"> Yes, as a volunteer <br/> 
             <input type="checkbox"> Yes, as a mentor or corporate representative <br/> 
@@ -168,7 +169,7 @@
       <div class="field">
         <label class="label">Will WHACK be your first hackathon?</label>
         <div class="control">
-          <label class="checkbox">
+          <label id="first_hackathon" class="checkbox">
             <input type="checkbox"> Yes <br/> 
             <input type="checkbox"> No
           </label>
@@ -178,21 +179,21 @@
       <div class="field">
         <label class="label">Do you have any dietary restrictions?*</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name="dietary_restrictions" type="text">
         </div>
       </div>
 
       <div class="field">
         <label class="label">Do you require any special accommodations?</label>
         <div class="control">
-          <input class="input" type="text">
+          <input class="input" name="special_accommodations" type="text">
         </div>
       </div>
       
       <div class="field">
         <label class="label">WHACK aims to be an inclusive and safe space for all participants. Is there anything you’d like us to know to make your WHACK experience more comfortable?</label>
         <div class="control">
-          <textarea class="textarea" placeholder="Text Area"></textarea>
+          <textarea class="textarea" name="other_notes" placeholder="Text Area"></textarea>
         </div>
       </div>
 
@@ -216,13 +217,68 @@
 
       <div class="field is-grouped">
         <div class="control">
-          <button class="button is-primary">Submit</button>
+          <button id="submit" class="button is-primary">Submit</button>
         </div>
         <div class="control">
           <button class="button is-link">Save</button>
         </div>
       </div>
-    </div>
+    </form>
+
+    <script src="jquery-3.1.0.js"></script> 
+
+    <script>
+      $( "#submit" ).submit(function( event ) {
+ 
+        // Stop form from submitting normally
+        event.preventDefault();
+       
+        // Get some values from elements on the page:
+        var $form = $( this ),
+          first_name = $form.find( "input[name='first_name']" ).val(),
+          last_name = $form.find( "input[name='last_name']" ).val(),
+          email = $form.find( "input[name='email']" ).val(),
+          school = $form.find( "input[name='school']" ).val(),
+          major = $form.find( "input[name='major']" ).val(),
+          graduation_year = $form.find( "input[name='graduation_year']" ).val(),
+          ethnicity = $form.find( "input[name='ethnicity']" ).val(),
+          gender_identity = $form.find( "input[name='gender_identity']" ).val(),
+          ethnicity = $("#ethnicity option:selected").text();
+          gender_identity = $("#gender_identity option:selected").text();
+          sexual_orientation = $("#sexual_orientation option:selected").text();
+          links = $form.find( "input[name='links']" ).val(),
+          first_hackathon = $('#first_hackathon').val();
+          special_accomodations = $form.find( "input[name='special_accomodations']" ).val(),
+          other_notes = $form.find( "input[name='other_notes']" ).val();
+        // NOT SURE IF I HANDLE THE FILE CORRECTLY
+        $(':file').on('change', function() {
+            var file = this.files[0];
+            if (file.size > 1024) {
+                alert('max upload size is 1k')
+            }
+            // Also see .name, .type
+        });
+       
+        // Send the data using post
+        // TODO(daxisun): confirm with Yada about url.
+        var posting = $.post( url, { 'first_name': first_name,  
+                                     'last_name': last_name,
+                                     'email': email,
+                                     'school': school,
+                                     'major': major,
+                                     'graduation_year':graduation_year,
+                                     'ethnicity':ethnicity,
+                                     'gender_identity':gender_identity,
+                                     'sexual_orientation':sexual_orientation,
+                                     'resume': file,
+                                     'links':links,
+                                     'first_hackathon': first_hackathon == "Yes" ? true : false,
+                                     'special_accomodations': special_accomodations,
+                                     'other_notes': other_notes
+                                   } );
+       
+      });
+    </script>
 
   </body>
-</html>
\ No newline at end of file
+</html>
