I'm new to Node so I apologize in advance if my code is not tidy. I'm trying to create a contact form using node. I'm really close but when I send the form it fails. I get an error of "Invalid Captcha" in the console. Below is my code I took out the sensitive data.
//app.js
pp.set('view engine', 'ejs');
app.locals.pagetitle = '';
app.use(express.static('public'));
app.use(bodyParser.raw());
app.get('/', routes.index);
app.get('/portfolio', routes.portfolio);
app.get('/contact', routes.contact);
app.get('*', function(req, res){
res.send('Bad Route');
});
//Require the module
var nodemailer = require('nodemailer');
//Create the reusable transport
var transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: 'myEmailAddress',
pass: 'myPassword'
}
});
var sweetcaptcha = new require('sweetcaptcha')(appId, appKey, appSecret);
console.log( req.body, req.params );
//Validate captcha
sweetcaptcha.api('check', {sckey: req.body["sckey"], scvalue: req.body["scvalue"]}, function(err, response){
if (err) return console.log(err);
if (response === 'true') {
// valid captcha
// setup e-mail data with unicode symbols
var mailOptions = {
from: 'name <yourEmail@email.com>', // sender address
to: 'myEmail@gmail.com', // list of receivers. This is whoever you want to get the email when someone hits submit
subject: 'New email from your website contact form', // Subject line
text: req.body["contact-form-message"] + ' You may contact this sender at: ' + req.body["contact-form-mail"] // plaintext body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
console.log(error);
} else {
console.log('Message sent: ' + info.response);
}
});
//Success
res.send("Thanks! We have sent your message.");
}
if (response === 'false'){
// invalid captcha
console.log("Invalid Captcha");
res.send("Try again");
}
});
});
//index.js
exports.index = function(req, res){
res.render('default', {
title: 'Home',
classname: 'home',
users: ['Alex', 'Brandon', 'Vanessa']
});
};
exports.portfolio = function(req, res){
res.render('default', {
title: 'Portfolio',
classname: 'portfolio'
});
};
exports.contact = function(req, res){
//Require the sweetcaptcha module and give it the credentials you were sent upon registration.
var sweetcaptcha = new require('sweetcaptcha')(appId, appKey, appSecret);
sweetcaptcha.api('get_html', function(err,html) {
res.render('contact', {
title: 'Contact',
classname: 'contact',
captcha: html
});
});
};
//scripts.js
$(function(){
$(document).ready(function() {
$("#contact-form-submit").click(function (e) {
e.preventDefault(); // prevent page reload
$.ajax({
type: "POST",
url: '/contact',
data: $("#contact-form").serialize(),
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (response) {
$("#submitResponse").html(response);
}
});
});
});
});
//contact.ejs
<form name="contact-form" id="contact-form" class="contact-form clear-fix" target="uploader_iframe">
<div class="clear-fix">
<ul class="list-0 clear-fix">
<li>
<div class="block field-box">
<label for="contact-form-name">Your Name</label>
<input type="text" name="contact-form-name" id="contact-form-name" value=""/>
</div>
</li>
<li>
<div class="block field-box">
<label for="contact-form-mail">Your E-mail</label>
<input type="text" name="contact-form-mail" id="contact-form-mail" value=""/>
</div>
</li>
<li>
<div class="block field-box">
<label for="contact-form-message">Your message</label>
<textarea name="contact-form-message" id="contact-form-message" rows="1" cols="1"></textarea>
</div>
</li>
<div id="captchaHolder">
<%- captcha %>
</div>
<h5 id="submitResponse"></h5>
<li>
<div class="block field-box field-box-button">
<input type="submit" id="contact-form-submit" name="contact-form-submit" class="button" value="Submit"/>
</div>
</li>
</ul>
</div>
</form>
Hopefully this is clear I know I copied and pasted a lot of code. Please ask any follow up questions if it is not. Thanks.