Next.js Discord

Discord Forum

Unable to connect Email JS with React Hook Form (with Zod)

Answered
Australian Cattle Dog posted this in #help-forum
Open in Discord
Australian Cattle DogOP
I have been trying to add Email JS service to my form, and unable to.

Here is my code: check the attachment mycode.txt

you can check the official documentation for email js here: https://www.emailjs.com/docs/examples/reactjs/

Unable to submit the form, as can use the ref attribute in the form tag. Kindly help, I am still a student and can make silly mistakes I apologise for that.
Answered by New Guinea Singing Dog
Could you try sending through the data as send()
View full answer

44 Replies

@Clown what is the error? is form onSubmit not getting run?
Australian Cattle DogOP
actually what happen is we need to pass a reference of the form, when sending form to email js. But I'm unable to figure out how should I do it
Clown
let me check if there is better way with react-hook-form
because otherwise you can just use useRef() hook
Australian Cattle DogOP
I'm unable to use UseRef() that's the main issue
Australian Cattle DogOP
Its not referring
Clown
its supposed to be formRef.current
Australian Cattle DogOP
when changing to formRef.current this is the issue
Clown
hmm.. weirdly enough i couldnt find any from a quick search
they all just pass they the formdata directly instead of a reference
without stringifying and using that zod type
Australian Cattle DogOP
can you suggest some changes?
I am a newbie, with little experience
Australian Cattle DogOP
someone please help
@Australian Cattle Dog someone please help
New Guinea Singing Dog
Whats with the <Form/> element? I'm guessing its a differen component of yours?
But it's not returning a strictly type HTML form element (if you know TS/have intellisense you will get different types of html form elements)
Most like its returning a general div and then like some sort of your own form within it
which is good you're using like encapsulation and abstraction like building up your form in a completely different function
Australian Cattle DogOP
its from shad cn
New Guinea Singing Dog
But because it's not stricly a <form> html element
thats probably why
Could you try temporally change the ref to just a normal <form> element and see whether the error goes away?
Australian Cattle DogOP
if I remove it, this is the error
New Guinea Singing Dog
Aw ok nvm
tbh I dont know if its really possible, because shad cn would just be supplying a component mimicking a form, not an actual <form> ty[e HTML element which is the type that only the library accepts
New Guinea Singing Dog
Could you try sending through the data as send()
Answer
New Guinea Singing Dog
sendForm() takes in speciifcally a HTML form element or query
Australian Cattle DogOP
I tried using Send instead and now its giving a really weird error
I am literally using no image whatsover
New Guinea Singing Dog
Oh i think i see what is the error
you're trying to pass the absolute path as the path onto the localhost itself
Australian Cattle DogOP
I got the mail btw
New Guinea Singing Dog
Sweet!
Australian Cattle DogOP
its working now
@Australian Cattle Dog Click to see attachment
New Guinea Singing Dog
But for this i think you need to use like the href attribute
so the one that'll give like /image/something idk
Australian Cattle DogOP
ok ok, still learning phase. Need to grind more
New Guinea Singing Dog
A win is a win, keep making progress, im still a beginner too