<h1 style='font-size:26px;color:#6aa84f;'>node.js: create a contactform with express, jade, boostrap and node-mailer</h1>

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.

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.


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
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

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