I am trying to use a lambda function to sent contact form submissions to an email. The site is built on React, the lambda was built following the guide they suggest Building a serverless contact form with AWS Lambda and AWS SES
However, the issue is that in the guide he uses vanilla JS instead of something more suitable for React and I can't figure out where to place the JS code or if I need to do something else to make it work.
The lambda function work and I can send emails using a curl command such as
curl --header "Content-Type: application/json" \
--request POST \
--data '{"email":"john.doe@email.com","name":"John Doe","content":"Hey!"}' \
https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send
But it does not function on the form directly because the function is expecting a header "Content-Type: application/json" so I need to add this snippet of JS code, but I don't know where and the site is failing because of that.
const form = document.getElementById('contactForm')
const url = 'https://{id}.execute-api.{region}.amazonaws.com/{stage}/email/send'
const toast = document.getElementById('toast')
const submit = document.getElementById('submit')
function post(url, body, callback) {
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/json");
req.addEventListener("load", function () {
if (req.status < 400) {
callback(null, JSON.parse(req.responseText));
} else {
callback(new Error("Request failed: " + req.statusText));
}
});
req.send(JSON.stringify(body));
}
function success () {
toast.innerHTML = 'Thanks for sending me a message! I\'ll get in touch with you ASAP. :)'
submit.disabled = false
submit.blur()
form.name.focus()
form.name.value = ''
form.email.value = ''
form.content.value = ''
}
function error (err) {
toast.innerHTML = 'There was an error with sending your message, hold up until I fix it. Thanks for waiting.'
submit.disabled = false
console.log(err)
}
form.addEventListener('submit', function (e) {
e.preventDefault()
toast.innerHTML = 'Sending'
submit.disabled = true
const payload = {
name: form.name.value,
email: form.email.value,
content: form.content.value
}
post(url, payload, function (err, res) {
if (err) { return error(err) }
success()
})
})<form id="contactForm">
<input type="text" name="name" required placeholder="Your name" />
<input type="email" name="email" required placeholder="Your email address" />
<input type="text" name="phone_number" required placeholder="Your phone number" />
<textarea name="message" required placeholder="Write your message..." >
</textarea>
<button id="submit" type="submit">Send
<i className="flaticon-tick"></i>
</button>
</form>And the form is located inside a react functional component:
const ContactForm = () => {
return (
<form>
<!-- Above form is here -->
</form>
)
}
export default ContactForm
I am trying to imbed it directly into the component but it seems like that is not working. Where should this JS code be within my React project?
I am not sure if I need to use something like a hook in React. (I am pretty now to react and don't really understand how all that works yet)
This is the repository:Deep-Blue
and the site is located at deep-blue.io
I also asked the Gatsby community and did not get an answer, I have been looking at many different tutorials like, this one but they all either use different technologies or fall short of explaining how to handle form submissions in ReactJS with GastbyJS
