diff --git a/backend/server.js b/backend/server.js index 027f3751..48a8db76 100644 --- a/backend/server.js +++ b/backend/server.js @@ -1,71 +1,73 @@ -const express = require('express'); -const nodemailer = require('nodemailer'); -const bodyParser = require('body-parser'); -const cors = require('cors'); +const express = require("express"); +const nodemailer = require("nodemailer"); +const bodyParser = require("body-parser"); +const cors = require("cors"); const app = express(); const PORT = process.env.PORT || 3000; app.use(bodyParser.json()); -app.use(cors()); +app.use(cors()); -app.post('/send-email', async (req, res) => { - const { firstName, lastName, email, phone, message } = req.body; +app.post("/send-email", async (req, res) => { + const { firstName, lastName, email, phone, message } = req.body; - let transporter = nodemailer.createTransport({ - service: 'gmail', - auth: { - user: 'your-email@gmail.com', - pass: 'your-email-password' - } - }); + let transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", // add you email + pass: "your-email-password", // add your password + }, + }); - let mailOptions = { - from: email, - to: 'your-email@gmail.com', - subject: `Contact Us Form Submission from ${firstName} ${lastName}`, - text: `You have received a new message from your website contact form. + let mailOptions = { + from: email, + to: "your-email@gmail.com", // add email where you want to send the message + subject: `Contact Us Form Submission from ${firstName} ${lastName}`, + text: `You have received a new message from your website contact form. Name: ${firstName} ${lastName} Email: ${email} Phone: ${phone} - Message: ${message}` - }; + Message: ${message}`, + }; - try { - await transporter.sendMail(mailOptions); - res.status(200).send({ message: "Email sent successfully!" }); - } catch (error) { - res.status(500).send({ message: "Error sending email", error }); - } + try { + await transporter.sendMail(mailOptions); + res.status(200).send({ message: "Email sent successfully!" }); + } catch (error) { + res.status(500).send({ message: "Error sending email", error }); + } }); // New endpoint for newsletter subscription -app.post('/subscribe', async (req, res) => { - const { email } = req.body; +app.post("/subscribe", async (req, res) => { + const { email } = req.body; - let transporter = nodemailer.createTransport({ - service: 'gmail', - auth: { - user: 'your-email@gmail.com', - pass: 'your-email-password' - } - }); + let transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", + pass: "your-email-password", + }, + }); - let mailOptions = { - from: 'your-email@gmail.com', - to: 'your-email@gmail.com', - subject: 'New Newsletter Subscription', - text: `You have a new subscriber! Email: ${email}` - }; + let mailOptions = { + from: "your-email@gmail.com", + to: "your-email@gmail.com", + subject: "New Newsletter Subscription", + text: `You have a new subscriber! Email: ${email}`, + }; - try { - await transporter.sendMail(mailOptions); - res.status(200).send({ message: "Subscription successful!" }); - } catch (error) { - res.status(500).send({ message: "Error sending subscription email", error }); - } + try { + await transporter.sendMail(mailOptions); + res.status(200).send({ message: "Subscription successful!" }); + } catch (error) { + res + .status(500) + .send({ message: "Error sending subscription email", error }); + } }); app.listen(PORT, () => { - console.log(`Server is running on port ${PORT}`); + console.log(`Server is running on port ${PORT}`); }); diff --git a/contact_us.html b/contact_us.html index e876d7fc..cbb5d17a 100644 --- a/contact_us.html +++ b/contact_us.html @@ -1,219 +1,207 @@ - - + + - + Contact Us - - - - - + + + + + - - + +
-
-
+
+ - - +
-

Get in Touch

-

Whether you have questions, feedback, or need assistance, our team is here to help. Please fill out the form below, and we'll get back to you as soon as possible.

- -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
- - - - + + + + + diff --git a/contact_us.js b/contact_us.js new file mode 100644 index 00000000..48d9f037 --- /dev/null +++ b/contact_us.js @@ -0,0 +1,63 @@ +async function SendEmail(event) { + event.preventDefault(); + const firstName = document.getElementById("firstName").value; + const lastName = document.getElementById("lastName").value; + const email = document.getElementById("email").value; + const phone = document.getElementById("phone").value; + const message = document.getElementById("message").value; + + if (message.length < 10) { + alert("Message must be at least 10 characters long."); + return; + } + + const data = { + firstName: firstName, + lastName: lastName, + email: email, + phone: phone, + message: message, + }; + + try { + const response = await fetch("http://localhost:3000/send-email", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + }); + + const result = await response.json(); + if (response.ok) { + const form = document.getElementById("contactForm"); + const popup = document.getElementById("popupMessage"); + const overlay = document.getElementById("overlay"); + const closePopup = document.getElementById("closePopup"); + + // Show popup + overlay.style.display = "block"; + popup.style.display = "block"; + + // Clear the form + form.reset(); + + // Close the popup + closePopup.addEventListener("click", function () { + popup.style.display = "none"; + overlay.style.display = "none"; + }); + + // Close the popup when clicking outside of it + overlay.addEventListener("click", function () { + popup.style.display = "none"; + overlay.style.display = "none"; + }); + } else { + alert(`Error: ${result.message}`); + } + } catch (error) { + console.error("Error sending email:", error); + alert("Error sending email. Please try again later."); + } +}