node.js: create a contactform with express, jade, boostrap and node-mailer

Today we want to create a contactform and send a message via gmail.
To make the form look good, we add bootstrap to hour project and we are using express to setup the webserver. At the end we want to use node-mailer to send the email. This might sound complicated, but you only have to follow my copy & paste instructions and everythings will be easy.

Prerequisits

At first you need to have some tools installed. here they are.
This should be familliar to you

node.js installed
npm installed
a gmail account with username and passsword
Installed and working express. For that please follow the last tutorial >>here<<.

After that, you have express installed, jade added to express and a routing added

Add the jade contactform

Jade is a templatelanguage like jsx, phptal, velocity etc. There are some facts, which seems to be nice, like the shortened syntax. But there might be some contras against jade too. For now we want to be open for new technologies and give jade a try.

If you want to get more information about jade, visit: http://jade-lang.com/

Create a file named "contact.jade" to your views folder. If you do not have a views folder, create one in your projectfolder and place following code to the contact.jade file.

	extends layout
	block content
	.container
	form(method="post", action="contact/send")
	.form-group
	label Name
	input.form-control(type="text",name="name", placeholder="Enter Name")
	.form-group
	label Email
	input.form-control(type="email", name='email', placeholder="Enter Email")
	.form-group
	label Message
	textarea.form-control(name="message", placeholder="Enter Message")
	button.btn.btn-default(type='submit') Submit

view raw contact.jade hosted with ❤ by GitHub

Create the routes for your form

Open your app.js and add the contact-routes.(See comments in following code).
One route to render the form, and one route to send the email. My complete app.js looks like that

This will bind a route "contact" and "contact/send" to your express webserver app. the simple "contact" route only renders the form.

The more complex route "contact/send" will do a lot of stuff more. At first, it will create a transporter object, which tells the mailer to send the email via googles gmail over a predefined "from account". After that, it defines the mailoptions with the plaintextversion, the htmlversion, the sender and the recipient

At the end, the sendMail function gets called on the transporter object. This will simply send the mail and do the errorhandling. If an error occures, we will log it to the console.

	var express = require('express');
	var path = require('path');
	var bodyParser = require('body-parser');
	var nodeMailer = require('nodemailer');
	var app = express();
	app.set('views', path.join(__dirname,'views'));
	app.set('view engine','jade');
	app.use(bodyParser.json());
	app.use(bodyParser.urlencoded({extended:false}));
	app.use(express.static(path.join(__dirname,'public')));
	//create a route
	app.get('/', function(req, res) {
	res.render('index', {title:'Welcome'});
	});
	//create a route
	app.get('/about', function(req, res) {
	res.render('about',{title:'About'});
	});
	//route to get the contact form
	app.get('/contact', function(req, res) {
	res.render('contact',{title:'Contact'});
	});
	//route to send the form
	app.post('/contact/send', function(req, res) {
	var transporter = nodeMailer.createTransport({
	service : 'Gmail',
	auth :
	{
	user:'youruser@gmail.com',
	pass:'yourpassword'
	}
	});
	var mailOptions =
	{
	from:'Peter Böthig <youremail@gmail.com>',
	to: 'youremail@gmail.com',
	subject:'A simple test',
	text:'this a a simple test from Name:'+ req.body.name+' Email:'+req.body.email+' Message:'+req.body.message,
	html:'<p><ul><li>this a a simple test from Name:'+ req.body.name+'</li><li> Email:'+req.body.email+'</li><li>Message:'+req.body.message+'</li></ul>',
	}
	transporter.sendMail(mailOptions, function (err, info)
	{
	if(err)
	{
	console.log(err);
	res.redirect('/');
	}else
	{
	console.log('Message send');
	res.redirect('/');
	}
	});
	});
	app.listen(3000, function() {
	console.log('App listening on port 3000!');
	});

view raw app.js hosted with ❤ by GitHub

Please make sure to set your own gmailaccount in the mailoptions and in the sendEmail function.

Add bootstrap to the project

Download and extract bootstrap to following folderstructure:
DownloadUrl: getboostrap.com

<yourprojectroot>
|__public
    |__css
    |__js
    |__fonts


create a file layout.jade with following code

	doctype html
	html(lang='en')
	head
	meta(charset='utf-8')
	meta(http-equiv='X-UA-Compatible', content='IE=edge')
	meta(name='viewport', content='width=device-width, initial-scale=1')
	// The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags
	meta(name='description', content='')
	meta(name='author', content='')
	title Jumbotron Template for Bootstrap
	// Bootstrap core CSS
	link(href='css/bootstrap.min.css', rel='stylesheet')
	body
	#navbar.navbar-collapse.collapse
	// Static navbar
	nav.navbar.navbar-default
	.container-fluid
	.navbar-header
	button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
	span.sr-only Toggle navigation
	span.icon-bar
	span.icon-bar
	span.icon-bar
	a.navbar-brand(href='#') Project name
	#navbar.navbar-collapse.collapse
	ul.nav.navbar-nav
	li.active
	a(href='/') Home
	a(href='/contact') Contact
	li.dropdown
	a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-haspopup='true', aria-expanded='false')
	| Dropdown
	span.caret
	ul.dropdown-menu
	li
	a(href='#') Action
	li
	a(href='#') Another action
	li
	a(href='#') Something else here
	li.divider(role='separator')
	li.dropdown-header Nav header
	li
	a(href='#') Separated link
	li
	a(href='#') One more separated link
	// /.nav-collapse
	// /.container-fluid
	.container
	h1 Hello, #{title}
	block content
	hr
	footer
	p © 2016 Company, Inc.

view raw layout.jade hosted with ❤ by GitHub

This will add the baselayout with a little navigation   

Add a homepage to your project

Create a file named "index.jade" and add it to your view folder

	extends layout
	block content
	.container
	p
	| This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
	p

view raw index.jade hosted with ❤ by GitHub

Start your webserver

go to your projectroot and run
$ node app.js

Use your contactform

Now you can surf http://localhost:3000/contact and fill out the form.
After submitting your form you will get a "message send" to your console and you will recieve your email in your gmail account

If your mail gets rejected......

To test your email sending,  you have to allow "less secure apps" in your gmail testaccount:

You can do this by following :

https://support.google.com/accounts/answer/6010255?hl=enhttps://support.google.com/accounts/answer/6010255?hl=en