Reputation: 25
I am trying to implement in a portfolio a functional form contact. I used to use smtpjs or AWS Lambda with a serverless function but this time I am trying to use EmailJS. I achieve to send an email to my account properly when the form is filled but the message does not show the email of the user and the text the user introduced and I do not know why exactly. Here it is my code:
export const Contact = () => {
const email = useFormInput('');
const message = useFormInput('');
const [sending, setSending] = useState(false);
const [complete, setComplete] = useState(false);
const initDelay = tokens.base.durationS;
const form = useRef()
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('ID', 'KEY', form.current, 'SECRET')
.then(alert("Message Sent! I'll reply you ASAP!"));
e.target.reset()
}
return (
<Section className={styles.contact}>
<Meta
title="Contact"
description="Send me a message if you're interested in discussing a project or if you just want to say hi"
/>
<Transition unmount in={!complete} timeout={1600}>
{(visible, status) => (
<form ref={form} onSubmit={sendEmail} className={styles.form}>
<Heading
className={styles.title}
data-status={status}
level={3}
as="h1"
style={getDelay(tokens.base.durationXS, initDelay, 0.3)}
>
<DecoderText
text="Keep in Touch!"
start={status !== 'exited'}
delay={300} />
</Heading>
<Divider
className={styles.divider}
data-status={status}
style={getDelay(tokens.base.durationXS, initDelay, 0.4)} />
<Input
name="mail"
required
className={styles.input}
data-status={status}
style={getDelay(tokens.base.durationXS, initDelay)}
autoComplete="email"
label="Your Email"
type="email"
maxLength={512}
{...email} />
<Input
name="body"
required
multiline
className={styles.input}
data-status={status}
style={getDelay(tokens.base.durationS, initDelay)}
autoComplete="off"
label="Message"
type="email"
maxLength={4096}
{...message} />
<Button
className={styles.button}
data-status={status}
data-sending={sending}
style={getDelay(tokens.base.durationM, initDelay)}
disabled={sending}
loading={sending}
loadingText="Sending..."
icon="send"
type="submit"
>
Send message
</Button>
</form>
)}
</Transition>
<Footer className={styles.footer} />
</Section>
);
};
Upvotes: 0
Views: 289
Reputation: 3803
Everything seems right. However the email that is received lacks the user's text input or email address. You must check that the name properties of the email and message inputs correspond to the keys used in the emailjs.sendForm
method in order to make it work.
Hence, in the input components, modify the "name" attributes. Like that:
< Input
name = "from_email"
required
className = {
styles.input
}
data - status = {
status
}
style = {
getDelay(tokens.base.durationXS, initDelay)
}
autoComplete = "email"
label = "Your Email"
type = "email"
maxLength = {
512
} { ...email
}
/>
<
Input
name = "message"
required
multiline
className = {
styles.input
}
data - status = {
status
}
style = {
getDelay(tokens.base.durationS, initDelay)
}
autoComplete = "off"
label = "Message"
type = "email"
maxLength = {
4096
} { ...message
}
/>
Upvotes: 1