Getting a blank email, user_email, and message content. Any help would be greatly appreciated!

[KatAthay]

Unfortunately I don't see anything within their doc's/support that guides you on what to do when you receive an email from EmailJS alerting you with all the fields blank. I see that each email has gone through ok and is being deducted from the allotted emails on my EmailJS dashboard, but it isn't actually sending over any of the users information.

`import { useState } from "react";
import { useRef } from 'react';
import { TextField, Button, Typography, Box, Dialog, DialogContent } from "@mui/material";
import emailjs from '@emailjs/browser';

function SuccessModal({ open, onClose }) {
return (

Thank you for submitting your message. We will get back to you soon!

Close


);
}

function ContactForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [openModal, setOpenModal] = useState(false);

const templateParams = {
to_name: 'Recipient Name',
from_name: name,
message: message,
from_email: email,
};

const form = useRef();

const sendEmail = (e) => {
e.preventDefault();
console.log(form.current)

emailjs.sendForm('service_XXXXXXX', 'template_XXXXXXX', form.current, 'XXXXXXX', templateParams )
  .then((result) => {
      console.log('Email was successfully sent!', result.text);
      setOpenModal(true);
  }, (error) => {
      console.log(error.text);
  });

};

return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<Box sx={{ maxWidth: 600, mx: "auto", p: 2 }}>

Contact Us

<TextField
fullWidth
label="Name"
value={name}
onChange={(e) => setName(e.target.value)}
margin="normal"
required
/>
<TextField
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
type="email"
/>
<TextField
fullWidth
label="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
margin="normal"
required
multiline
rows={4}
/>
<Button variant="contained" type="submit" sx={{ mt: 2 }}>
Submit

    </form>
      <SuccessModal open={openModal} onClose={() => setOpenModal(false)} />
  </Box>
</Box>

);
}

export default ContactForm;`

Here are my EmailJS template params:

Message Senders full name: {{from_name}}

Message Senders email: {{from_email}}

Message: {{message}}

[xr0master]

Please edit your code, to make it easier to read.

[KatAthay]

Sorry about that. Is this any better? If it's not please let me know what i need to do. This is my first time using the discussion link on Github.

import { useState } from "react";
import { useRef } from 'react';
import { TextField, Button, Typography, Box, Dialog, DialogContent } from "@mui/material";
import emailjs from '@emailjs/browser';

function SuccessModal({ open, onClose }) {
return (


Thank you for submitting your message. We will get back to you soon!


Close


);
}
function ContactForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [openModal, setOpenModal] = useState(false);

const templateParams = {
to_name: 'Recipient Name',
from_name: name,
message: message,
from_email: email,
};

const form = useRef();

const sendEmail = (e) => {
e.preventDefault();
console.log(form.current)

emailjs.sendForm('service_XXXXXXX', 'template_XXXXXXX', form.current, 'XXXXXXX', templateParams )
  .then((result) => {
      console.log('Email was successfully sent!', result.text);
      setOpenModal(true);
  }, (error) => {
      console.log(error.text);
  });
};

return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<Box sx={{ maxWidth: 600, mx: "auto", p: 2 }}>

Contact Us


<TextField
fullWidth
label="Name"
value={name}
onChange={(e) => setName(e.target.value)}
margin="normal"
required
/>
<TextField
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
type="email"
/>
<TextField
fullWidth
label="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
margin="normal"
required
multiline
rows={4}
/>
<Button variant="contained" type="submit" sx={{ mt: 2 }}>
Submit
    </form>
      <SuccessModal open={openModal} onClose={() => setOpenModal(false)} />
  </Box>
</Box>
);
}

export default ContactForm;

[xr0master]

You need to specify a name attribute for your input fields.

If you are using EmailJS to send form details, sendForm will automatically collect the values of the form and pass them to the specified template. The form should have a distinct ID, and the name attribute of each field should correspond to the variable name used in the template.

[KatAthay]

Thank you so much, that fixed it! I really appreciate your help!