Is my HTML form sending to a Netlify lambda function correctly? - forms

Question

With a site running on Netlify, I'm trying to send an automatic reply using Mailgun to a site visitor who submits a form.
I'm trying to follow this example to do it:
https://gist.github.com/flatlinediver/0bdca4c2ae09d34d351d45230d3b2489
However, when I try to run this locally and submit the form (using netlify dev), I keep running into this error:
Request from ::1: POST /.netlify/functions/submission-created
Response with status 500 in 1 ms.
SyntaxError: Unexpected token a in JSON at position 1
at JSON.parse (<anonymous>)
at Object.exports.handler (/Users/sam/Projects/wycd/functions/submission-created.js:15:23)
at /usr/local/lib/node_modules/netlify-cli/src/utils/serve-functions.js:117:29
at Layer.handle [as handle_request] (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/layer.js:95:5)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:137:13)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:131:14)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:131:14)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:131:14)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:131:14)
at next (/usr/local/lib/node_modules/netlify-cli/node_modules/express/lib/router/route.js:131:14)
Here is my file for the function submission-created
require('dotenv').config()
const apiKey = process.env.MAILGUN_API_KEY
const domain = process.env.DOMAIN
// const receiver_mail = process.env.RECEIVER_MAIL
const mailgun = require('mailgun-js')({ apiKey, domain })
exports.handler = function(event, context, callback) {
if(event.httpMethod!='POST' || !event.body){
return callback(new Error('An error occurred!'))
}
const data = JSON.parse(event.body);
if(data.antibot.length>0){
return callback(new Error('Forbidden access'))
}
let messageData = {
from: data.email,
to: data.email,
subject: `Message received from ${data.name}`,
text: `${data.message}`
}
mailgun.messages().send(messageData, function (error) {
if (error) {
return callback(error);
} else {
return callback(null, {
statusCode: 200,
body: 'success'
});
}
})
}
And here is my code for the HTML form on index.html
<form class="contact" id="contactForm" action="/.netlify/functions/submission-created" name="contactForm" method="POST" data-netlify="true">
<input type="text" class="large" id="name" name="name" placeholder="Your Name *" required>
<input type="text" class="large" id="email" name="email" placeholder="example#email.com *" required>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="tel" class="large" id="phone" name="phone">
<script src="build/js/utils.js"></script>
<script>
var input = document.querySelector("#phone"),
output = document.querySelector("#output");
var iti = window.intlTelInput(input, {
nationalMode: true,
utilsScript: "../../build/js/utils.js?1562189064761" // just for formatting/placeholders etc
});
var handleChange = function() {
var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
var textNode = document.createTextNode(text);
output.innerHTML = "";
output.appendChild(textNode);
};
// listen to "keyup", but also "change" to update when the user selects a country
input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange);
</script>
<input type="text" id="role" name="role" style="display: none;">
<button type="submit" style="background: black; cursor: pointer;">Submit</button>
<p class="text-sm"><em>When you click Submit, we'll send your details to a top climate organization who will guide you on further action.</em></p>
</form>
Can anybody share advice to get this function working as expected?