0

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.

kiran
  • 1

0 Answers0