for example the email will look like this:
Company Name or website: Info
Project Description: mnbvc
Estimated Budget: $50k to $75k
Image: C:\fakepath\img1.jpeg
How did you here about company?: mncx
I obviously don't want the text to show up on the e-mail, but a file to be uploaded instead.
Any ideas on how to make this work.
I will post heaps of code below for everyone to check out.
Contactform.js
import React, { useState } from "react";
import swal from 'sweetalert';
function ContactForm() {
const [status, setStatus] = useState("Submit");
const handleSubmit = async (e) => {
e.preventDefault();
setStatus("Sending...");
swal({
text: "Your details submitted Succesfully",
icon: "success",
button: "Okay",
});
const { name, email, text, text2, list, uploadFile, text3, date } = e.target.elements;
let details = {
name: name.value,
email: email.value,
text: text.value,
text2: text2.value,
list: list.value,
uploadFile: uploadFile.value,
text3: text3.value,
date: date.value,
};
let response = await fetch("http://localhost:5000/contact", {
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(details),
});
setStatus("Submit");
let result = await response.json();
alert(result.status);
};
return (
<form onSubmit={handleSubmit}>
<div>
<div>
<label htmlFor="name">1.Tell us about your comapany</label>
</div>
<div>
<input type="name" id="name" placeholder="Your Name*" required />
</div>
<div>
<input type="email" id="email" placeholder="Your Email*" required />
</div>
<div>
<input type="text" id="text" placeholder="Company name Or Website" />
</div>
<div>
<input type="submit" value="Next"></input>
</div>
</div>
<div id="name1">
<div>
<label htmlFor="name">2.Tell us more about your project</label>
</div>
<div>
<textarea type="text2" id="text2" placeholder="Describe your project briefly*" required />
</div>
<div>
<label>Estimated Budget:</label>
<select name="list" id="list">
<option >$25k to $50k</option>
<option >$50k to $75k</option>
<option >$75k to $100k</option>
<option >$100k to $125k</option>
</select>
</div>
<div>
<span>
Drag and Drop image here
<input type="file" id="uploadFile" />
</span>
</div>
<div>
<input type="submit" value="Next"></input>
</div>
</div>
<div>
<div>
<label htmlFor="name">3.Where did you hear about us?</label>
</div>
<div>
<textarea type="text3" id="text3" placeholder="How Did You Hear About Us?" />
</div>
<div>
<input type="submit" value="Next"></input>
</div>
</div>
<div>
<div>
<label htmlFor="name">4.Schedule a call with our tech expert. Get a detailed tech consultation for free.</label>
</div>
<div>
<input type="date" id="date" required />
</div>
<button type="submit">{status}</button>
</div>
</form>
);
}
export default ContactForm;
Server.js
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
const express = require("express");
const router = express.Router();
const cors = require("cors");
const nodemailer = require("nodemailer");
const app = express();
app.use(cors());
app.use(express.json());
app.use("/", router);
app.listen(5000, () => console.log("Server Running"));
const contactEmail = nodemailer.createTransport({
service: 'gmail',
auth: {
user: "kishan.gudisagar@infoservices.com",
pass: "Kishan@123",
},
});
contactEmail.verify((error) => {
if (error) {
console.log(error);
} else {
console.log("Ready to Send");
}
});
router.post("/contact", (req, res) => {
const name = req.body.name;
const email = req.body.email;
const text = req.body.text;
const text2 = req.body.text2;
const list = req.body.list;
const uploadFile = req.body.uploadFile;
const text3 = req.body.text3;
const date = req.body.date;
console.log(req.files);
const mail = {
from: name,
to: "kishan.gudisagar@infoservices.com",
subject: "Contact Form Submission",
html: `<p>Name: ${name}</p>
<p>Email: ${email}</p>
<p>Company Name or website: ${text}</p>
<p>Project Description: ${text2}</p>
<p>Estimated Budget: ${list}</p>
<p>Image: ${uploadFile}</p>
<p>How did you here about company?: ${text3}</p>
<p>Date: ${date}</p>`,
};
contactEmail.sendMail(mail, (error) => {
if (error) {
res.json({ status: "ERROR" });
} else {
res.json({ status: "Message Sent" });
}
});
});
for example the email will look like this:
Company Name or website: Info
Project Description: mnbvc
Estimated Budget: $50k to $75k
Image: C:\fakepath\img1.jpeg
How did you here about company?: mncx
I obviously don't want the text to show up on the e-mail, but a file to be uploaded instead.
Any ideas on how to make this work.
I will post heaps of code below for everyone to check out.