8 - Form Routing

app/routes.js

@@ -30,5 +30,5 @@ router.get('/contact', function(req, res) {
 });
 
 router.post('/contact', function(req, res) {
-
+  res.send('Thanks for contacting us, ' + req.body.name + '! We will respond shortly!');
 });

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.15.2",
     "ejs": "^2.5.1",
     "express": "^4.14.0",
     "express-ejs-layouts": "^2.2.0",

server.js

@@ -1,14 +1,18 @@
 
 // require our dependencies
-var express = require('express');
+var express        = require('express');
 var expressLayouts = require('express-ejs-layouts');
-var app = express();
-var port = 8080;
+var bodyParser     = require('body-parser');
+var app            = express();
+var port           = 8080;
 
 // use ejs and express layouts
 app.set('view engine', 'ejs');
 app.use(expressLayouts);
 
+// use body parser
+app.use(bodyParser.urlencoded());
+
 // route our app
 var router = require('./app/routes');
 app.use('/', router);

views/pages/contact.ejs

@@ -1,5 +1,31 @@
 <div class="jumbotron text-center">
   <h1>Contact Page</h1>
 
-  <p>Contact form goes here</p>
+  <div class="row">
+    <div class="col-sm-6 col-sm-offset-3">
+      <h2>Contact Us!</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ullam, tempore exercitationem voluptas deserunt culpa, eligendi nemo iste quas nisi ducimus cum sed earum est, laboriosam in cumque ipsum. Nihil.</p>
+
+      <form action="/contact" method="POST">
+
+        <div class="form-group">
+          <label>Name</label>
+          <input type="text" name="name" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>Email</label>
+          <input type="text" name="email" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>Your Message</label>
+          <input type="text" name="message" class="form-control">
+        </div>
+
+        <div class="form-group text-right">
+          <button type="submit" class="btn btn-primary btn-lg">Send</button>
+        </div>
+
+      </form>
+    </div>
+  </div>
 </div>