├── README.md ├── package.json ├── public └── css │ └── style.css ├── views └── contact.handlebars └── app.js /README.md: -------------------------------------------------------------------------------- 1 | # Node Contact Form 2 | 3 | Simple Node.js/Express app using Nodemailer to send emails 4 | 5 | - Please add your own SMTP info for it to work 6 | 7 | ### Version 8 | 9 | 1.0.0 10 | 11 | ## Install Dependencies 12 | 13 | ```bash 14 | npm install 15 | ``` 16 | 17 | ## Run 18 | 19 | ```bash 20 | node app 21 | ``` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodecontactform", 3 | "version": "1.0.0", 4 | "description": "Sample app using nodemailer", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Brad Traversy", 10 | "license": "MIT", 11 | "dependencies": { 12 | "body-parser": "^1.17.2", 13 | "express": "^4.15.4", 14 | "express-handlebars": "^3.0.0", 15 | "nodemailer": "^4.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background:#92bde7; 7 | color:#485e74; 8 | line-height:1.6; 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 10 | padding:1em; 11 | } 12 | 13 | .container{ 14 | max-width:1170px; 15 | margin-left:auto; 16 | margin-right:auto; 17 | padding:1em; 18 | } 19 | 20 | ul{ 21 | list-style: none; 22 | padding:0; 23 | } 24 | 25 | .brand{ 26 | text-align: center; 27 | } 28 | 29 | .brand span{ 30 | color:#fff; 31 | } 32 | 33 | .wrapper{ 34 | box-shadow: 0 0 20px 0 rgba(72,94,116,0.7); 35 | } 36 | 37 | .wrapper > *{ 38 | padding: 1em; 39 | } 40 | 41 | .company-info{ 42 | background:#c9e6ff; 43 | } 44 | 45 | .company-info h3, .company-info ul{ 46 | text-align: center; 47 | margin:0 0 1rem 0; 48 | } 49 | 50 | .contact{ 51 | background:#f9feff; 52 | } 53 | 54 | /* FORM STYLES */ 55 | .contact form{ 56 | display: grid; 57 | grid-template-columns: 1fr 1fr; 58 | grid-gap:20px; 59 | } 60 | 61 | .contact form label{ 62 | display:block; 63 | } 64 | 65 | .contact form p{ 66 | margin:0; 67 | } 68 | 69 | .contact form .full{ 70 | grid-column: 1 / 3; 71 | } 72 | 73 | .contact form button, .contact form input, .contact form textarea{ 74 | width:100%; 75 | padding:1em; 76 | border:1px solid #c9e6ff; 77 | } 78 | 79 | .contact form button{ 80 | background:#c9e6ff; 81 | border:0; 82 | text-transform: uppercase; 83 | } 84 | 85 | .contact form button:hover,.contact form button:focus{ 86 | background:#92bde7; 87 | color:#fff; 88 | outline:0; 89 | transition: background-color 2s ease-out; 90 | } 91 | 92 | /* LARGE SCREENS */ 93 | @media(min-width:700px){ 94 | .wrapper{ 95 | display: grid; 96 | grid-template-columns: 1fr 2fr; 97 | } 98 | 99 | .wrapper > *{ 100 | padding:2em; 101 | } 102 | 103 | .company-info h3, .company-info ul, .brand{ 104 | text-align: left; 105 | } 106 | } -------------------------------------------------------------------------------- /views/contact.handlebars: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Acme Web Design 8 | 9 | 10 | 11 | 12 | 13 |

14 |

Acme Web Design

15 |

16 |

17 |

Acme Web Design

18 |

44 Something st
(555) 555-5555
test@acme.test

23 |

24 |

25 |

Email Us

26 | {{msg}} 27 | 52 |

53 |

54 |

55 | 56 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const bodyParser = require('body-parser'); 3 | const exphbs = require('express-handlebars'); 4 | const path = require('path'); 5 | const nodemailer = require('nodemailer'); 6 | 7 | const app = express(); 8 | 9 | // View engine setup 10 | app.engine('handlebars', exphbs()); 11 | app.set('view engine', 'handlebars'); 12 | 13 | // Static folder 14 | app.use('/public', express.static(path.join(__dirname, 'public'))); 15 | 16 | // Body Parser Middleware 17 | app.use(bodyParser.urlencoded({ extended: false })); 18 | app.use(bodyParser.json()); 19 | 20 | app.get('/', (req, res) => { 21 | res.render('contact'); 22 | }); 23 | 24 | app.post('/send', (req, res) => { 25 | const output = ` 26 |

You have a new contact request

27 |

Contact Details

28 |

Name: ${req.body.name}
Company: ${req.body.company}
Email: ${req.body.email}
Phone: ${req.body.phone}

34 |

Message

35 |

${req.body.message}

36 | `; 37 | 38 | // create reusable transporter object using the default SMTP transport 39 | let transporter = nodemailer.createTransport({ 40 | host: 'mail.YOURDOMAIN.com', 41 | port: 587, 42 | secure: false, // true for 465, false for other ports 43 | auth: { 44 | user: 'YOUREMAIL', // generated ethereal user 45 | pass: 'YOURPASSWORD' // generated ethereal password 46 | }, 47 | tls:{ 48 | rejectUnauthorized:false 49 | } 50 | }); 51 | 52 | // setup email data with unicode symbols 53 | let mailOptions = { 54 | from: '"Nodemailer Contact" ', // sender address 55 | to: 'RECEIVEREMAILS', // list of receivers 56 | subject: 'Node Contact Request', // Subject line 57 | text: 'Hello world?', // plain text body 58 | html: output // html body 59 | }; 60 | 61 | // send mail with defined transport object 62 | transporter.sendMail(mailOptions, (error, info) => { 63 | if (error) { 64 | return console.log(error); 65 | } 66 | console.log('Message sent: %s', info.messageId); 67 | console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info)); 68 | 69 | res.render('contact', {msg:'Email has been sent'}); 70 | }); 71 | }); 72 | 73 | app.listen(3000, () => console.log('Server started...')); --------------------------------------------------------------------------------