My first website launched in 1997. For many years I've built and maintained a limited portfolio mostly built around xml files with xsltproc transforms. I moved to Nuxt and now I'm exploring Eleventy.
In a Vue application I'm stuck with how to combine the form values and reCaptcha code into a single params that is sent to EmailJS. I guess what I basically need is your "Example usage" code for the React application written for a Vue application. Do you happen to have an equivalent code for Vue?
Unfortunately, I don't have the code for Vue but I've had a look on their docs and it looks to be the same. You should use the .send function documented here: emailjs.com/docs/sdk/send/. Then when calling the .send function, add the field 'g-recaptcha-response' and the reCaptcha code into the params object.
For example if you had a EmailJS template that required a name and message you'd do the following adding in the g-recaptcha-response:
emailjs.send(emailJSService,emailJSTemplate,{name:"Simon",message:"A new message",'g-recaptcha-response':'your_recaptcha_returned_code',},emailJSUser,// this is optional)
If you send me a link to your code or paste the relevant part as a comment I'm happy to take a look.
My first website launched in 1997. For many years I've built and maintained a limited portfolio mostly built around xml files with xsltproc transforms. I moved to Nuxt and now I'm exploring Eleventy.
I’ve had a look your code and done a bit of research on Nuxt to understand it a bit better.
You’re using .sendForm and passing the e.target as the third parameter. AFAIK Recaptcha only works with the .send function.
So this is what I’d suggest:
Change .sendForm to be .send
For the third parameter pass an object, the keys need to be the same as your EmailJS template. I’ll assume they’re name, email and message. Then add another key: g-recaptcha-response.
Add an ID to the two inputs and text areas, something like id=“form-name” etc.
Populate the object using document.getElementById().
So the EmailJS parameter object and .send function should roughly look like:
To be honest, the captcha was made for sendForm method, since the captcha is usually part of the form. However, the send method can send any params, including the captcha token.
By the way, this is why the name of the parameter is so strange (g-recaptcha-response), this is the default name from reCAPCHA.
Ah is that right? I ended up using send as I wanted to show the reCaptcha after the form was submitted but before querying EmailJS.
Additionally, I wasn't able to find a guide to use reCaptcha with sendForm whereas I could find one for sendemailjs.com/docs/rest-api/send/. Looking again at the docs and your comment I guess that you literally just put the reCaptcha inside the form element and EmailJS will get it out of e.target.
HI James,
In a Vue application I'm stuck with how to combine the form values and reCaptcha code into a single params that is sent to EmailJS. I guess what I basically need is your "Example usage" code for the React application written for a Vue application. Do you happen to have an equivalent code for Vue?
Simon
Hi Simon,
Unfortunately, I don't have the code for Vue but I've had a look on their docs and it looks to be the same. You should use the
.send
function documented here: emailjs.com/docs/sdk/send/. Then when calling the.send
function, add the field'g-recaptcha-response'
and the reCaptcha code into the params object.For example if you had a EmailJS template that required a
name
andmessage
you'd do the following adding in theg-recaptcha-response
:If you send me a link to your code or paste the relevant part as a comment I'm happy to take a look.
Thanks so much, James. I'll take a close look over your guidance and code tomorrow.
I said I was working on a Vue application but actually it's a Nuxt application. You'll understand I'm sure as I see you work with Next.js.
My code is here:
github.com/pastorsi/ghost-nuxt-web...
In the script section of that file, onSubmit for reCaptcha is not actioned because I couldn't get it working. I action EmailJS without reCaptcha.
(My repository is a working repository for a website. The working website contact form here mcea.org.uk/contact.)
All the best,
Simon
Monmouth, UK
No problem at all.
I’ve had a look your code and done a bit of research on Nuxt to understand it a bit better.
You’re using
.sendForm
and passing thee.target
as the third parameter. AFAIK Recaptcha only works with the.send
function.So this is what I’d suggest:
.sendForm
to be.send
g-recaptcha-response
.id=“form-name”
etc.document.getElementById()
. So the EmailJS parameter object and.send
function should roughly look like:I’ve not tested that code block but it should at least put you on the right track!
Let me know how you get on and if you need further assistance.
Thanks, James
To be honest, the captcha was made for
sendForm
method, since the captcha is usually part of the form. However, thesend
method can send any params, including the captcha token.By the way, this is why the name of the parameter is so strange (
g-recaptcha-response
), this is the default name from reCAPCHA.Ah is that right? I ended up using
send
as I wanted to show the reCaptcha after the form was submitted but before querying EmailJS.Additionally, I wasn't able to find a guide to use reCaptcha with
sendForm
whereas I could find one forsend
emailjs.com/docs/rest-api/send/. Looking again at the docs and your comment I guess that you literally just put the reCaptcha inside theform
element and EmailJS will get it out ofe.target
.Yeah, you guess correctly.