Hi, I created a React Web Protfolio and my site contains contact form. Which is for the give access to users to send me emails. I tried multiple things and can’t figure that out. Here is my GitHub repo: https://github.com/gorkemtand/Portfolio
netlify.toml:
[build]
functions = "functions"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
sendEmail.js:
const sgMail = require('@sendgrid/mail');
exports.handler = async (event, context) => {
console.log("Executing email.js");
try {
const { name, email, message } = JSON.parse(event.body);
// Set up SendGrid API key
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
// Compose the email
const msg = {
to: process.env.CONTACT_EMAIL, // Replace with your email address
from: email,
subject: 'New Contact Form Submission',
text: `Name: ${name}\nEmail: ${email}\n\nMessage: ${message}`,
};
// Send the email
await sgMail.send(msg);
console.log(process.env.SENDGRID_API_KEY);
console.log(process.env.CONTACT_EMAIL);
return {
statusCode: 200,
body: 'Email sent successfully',
};
} catch (error) {
console.log('Error sending email:', error);
return {
statusCode: 500,
body: 'An error occurred while sending the email',
};
}
};
ContactForm.jsx:
import React, { useState } from "react";
import swal from "sweetalert";
function ContactForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
subject: "",
message: "",
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("/contact", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (response.ok) {
const responseData = await response.json();
console.log(responseData);
setFormData({
name: "",
email: "",
subject: "",
message: "",
});
swal("Email successfully sent!", "", "success");
} else {
swal("Error sending email", "", "error");
console.error("Error sending email:", response.status);
}
} catch (error) {
swal("Error sending email", "", "error");
console.error("Error sending email:", error);
}
};
return (
<form name="contact" action="/contact" method="post" className="contactForm" onSubmit={handleSubmit}>
<input type="hidden" name="form-name" value="contact" />
<div className="formDiv">
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
autoComplete="on"
required
/>
</div>
<div className="formDiv">
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
autoComplete="on"
required
/>
</div>
<div className="formDiv">
<label htmlFor="subject">Subject:</label>
<input
type="text"
id="subject"
name="subject"
value={formData.subject}
onChange={handleChange}
required
/>
</div>
<div className="formDiv">
<label htmlFor="message">Message:</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
required
/>
</div>
<button type="submit">Send Email</button>
</form>
);
}
export default ContactForm;
The error I got:
Please help me.
