至急:お問い合わせフォームのエラーが解決できない
Q&A
解決したいこと
お問い合わせフォームを作っているのですが内容がGmialに送れずエラーが出て、chatgptに質問しても解決しないため、こちらに質問しました。chatgptを使いながら作成したので、知識はあまりありません。
発生している問題・エラー
script.js↓↓
// お問い合わせフォームの処理
const contactForm = document.getElementById("contact-form");
if (contactForm) {
contactForm.addEventListener("submit", function (event) {
event.preventDefault();
const name = contactForm.querySelector("input[name='name']").value;
const email = contactForm.querySelector("input[name='email']").value;
const message = contactForm.querySelector("textarea[name='message']").value;
fetch('/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'name': name,
'email': email,
'message': message
})
})
.then(response => response.text())
.then(data => {
alert('お問い合わせを送信しました。');
contactForm.reset();
})
.catch(error => {
console.error('Error:', error);
alert('お問い合わせの送信に失敗しました。');
});
});
} else {
console.error('Form element with id "contact-form" not found.');
}
chatgptに質問したらserver.jsに問題があると出たので、貼っときます。
server.js↓↓
require('dotenv').config();
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path');
const { sendMail } = require('./public/scripts');
const app = express();
const port = 3000;
// Email configuration
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '〇〇@gmail.com',
pass: 'アプリパスワード入力済み'
},
debug: true,
logger: true
});
// Serve static HTML files
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'script.js'));
});
app.post('/contact', (req, res) => {
const { name, email, message } = req.body;
let mailOptions = {
from: 'email',
to: '〇〇@gmail.com',
subject: 'お問い合わせが来ました',
text: `以下の内容でお問い合わせが来ました。\n\n【名前】: ${name}\n【メールアドレス】: ${email}\n【内容】: ${message}`
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
return res.status(500).send('メール送信に失敗しました。');
}
res.send('お問い合わせを受け付けました。');
});
});
分からないことがあれば教えてください!