Send email from React without backend

Поділитися
Вставка
  • Опубліковано 21 січ 2025

КОМЕНТАРІ • 225

  • @CodewithVoran
    @CodewithVoran  2 роки тому +30

    EmailJS team has rearranged the dashboard design. "Integration" page has been removed from the dashboard. API Keys moved to the "Account" page. "User ID" renamed to "Public Key"

    • @SathishKumar-em1kf
      @SathishKumar-em1kf 2 роки тому

      not working Bro getting error

    • @Jeff-zc6rr
      @Jeff-zc6rr 2 роки тому +1

      @@SathishKumar-em1kf youtube is filled with outdated tutorials. becoming like a junkyard of outdated stuff because no one wants to delete anything.

    • @CodewithVoran
      @CodewithVoran  2 роки тому +1

      @@Jeff-zc6rr brother. Its still not out dated. You can find the keys in account page.

    • @brainchessnovice
      @brainchessnovice 2 роки тому +1

      use your public key instead it worked for me

    • @invideo1115
      @invideo1115 2 роки тому

      Ss correct th
      anks bro

  • @selikiekone9975
    @selikiekone9975 3 роки тому +6

    One of the best tutorials ever, thanks to you and keep it up, you are good at this. Your explanations are very explicit and very clear indeed.

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Thanks selikie. Subscribe for more useful tutorial

  • @rajat_171
    @rajat_171 2 роки тому

    Thanks a lot brother, I was not getting the documentation but you solved the problem.

  • @vijayrajput9122
    @vijayrajput9122 2 роки тому +1

    Buddyy you are just Awsome mann

  • @fatimaanjum314
    @fatimaanjum314 2 роки тому

    Thanku so much sir you saved my project from getting critics today..I am so much thankful to you🤗..keep it up👍🏻

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      Welcome Fatima. happy to know that. 🤗🤗

  • @serhiikhotsyk869
    @serhiikhotsyk869 Рік тому

    It's awesome, I needed it for my portfolio, nice video bro! Thank you!

  • @khan.hassan
    @khan.hassan 3 роки тому

    That's really I wanted keep update more simple ReacJS tutorials please I'm your new Subscriber!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      thanks brother. I will upload more tutorials

  • @marcossilva9063
    @marcossilva9063 2 роки тому

    Loool. I legit spend 6 years using gms before finally getting serum. I was making blown out saw softs and exporting them to Edison

  • @harithalbadry6345
    @harithalbadry6345 3 роки тому +3

    really nice tutorail thats easy to follow , thanks

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Thanks a lot. Please subscribe to my channel, it really motivates me to do more and more tutorials.

  • @windowview1
    @windowview1 2 роки тому +1

    Very useful video 👍🏻👍🏻 thank you so much

  • @sukhimillz
    @sukhimillz 2 роки тому +1

    Good stuff bro👍

  • @carlosesierra
    @carlosesierra Рік тому

    short, clear and AWESOME thanks!

  • @TungjangpoMusic-yq4rf
    @TungjangpoMusic-yq4rf 8 місяців тому

    Whether it is possible to make one submit button perform 2 function, sending information as well as redirect to another page that work as a link

  • @dev_shiv6753
    @dev_shiv6753 3 роки тому +2

    How can I send to email to dynamic user email id using Email Js

  • @Travis.Pirozzini
    @Travis.Pirozzini 2 роки тому

    Thank you, Voran! - great tutorial :)

  • @sithuliyanage9849
    @sithuliyanage9849 Рік тому

    great video. thankyou so much💗

  • @kamalraj-hp8qd
    @kamalraj-hp8qd 2 роки тому

    can we put form in email content and perform action on same email page.?

  • @brainchessnovice
    @brainchessnovice 2 роки тому

    Thanks for this i was stuck, but now I'm free

  • @isamic_amol
    @isamic_amol 3 роки тому

    Thanks for your nice tutorial.

  • @santra528
    @santra528 Рік тому

    Don't you think this approach has security issues since here we are storing the serviceId, templateId and public tokens in the frontend code so anyone probably can get hold of these details ?

  • @Glebtc
    @Glebtc 2 роки тому

    Worked like a charm, thank you

  • @judoScott
    @judoScott 2 роки тому

    Great tutorial. Thank you so much!

  • @facucu5957
    @facucu5957 Рік тому

    You saved me today, thank u

  • @yogeshsharma4363
    @yogeshsharma4363 3 роки тому +1

    It will send the email to the user's mail who is filling the form right? but in case I want to send an email to both sender and the admin on which website a user is filling the form? what should I have to do about this?

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      hi yogesh. Check this documentation www.emailjs.com/docs/tutorial/creating-email-template/

  • @angiesoto7409
    @angiesoto7409 2 роки тому

    Great

  • @jerrysimeon3267
    @jerrysimeon3267 2 роки тому +1

    can't reach site anymore i tried from all browser and on other laptops too it's not working anymore

  • @poojashetty1825
    @poojashetty1825 2 роки тому +1

    At last when we inspect the code got error saying uncaught the 3rd parameter is expected to be html form element or the style selector of form send form.js

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      You should pass the form element as the 3rd parameter. Please console.log the form and check.

  • @abrahamolasode6469
    @abrahamolasode6469 3 роки тому +1

    thanks for the great tutorial

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome buddy. Subscribe to my channel for more useful tutorials

  • @kosmos7348
    @kosmos7348 2 роки тому

    Excellent video thank you !

  • @Krystian-i1o
    @Krystian-i1o Рік тому

    is it ok for sending for example 200 emails at once?

  • @kratibhat5330
    @kratibhat5330 2 роки тому

    How to develop a website where mails shud be sent to many ppl through a csv file

  • @thisfireelite5786
    @thisfireelite5786 2 роки тому

    I love you, bro. Thank you

  • @mirnataher9905
    @mirnataher9905 3 роки тому +1

    very helpful! thanks!

  • @alexanderson1193
    @alexanderson1193 2 роки тому

    I dont have the integration section in my email.js account. Instead of the init number it requires the public API key found in account

  • @rankokoturic6633
    @rankokoturic6633 3 роки тому +1

    How can i make it cover whole screen width

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      2.50 remove width. Or make it 100%

    • @rankokoturic6633
      @rankokoturic6633 3 роки тому +1

      Thank you, I'm making my portfolio page and I'm not that experienced woth CSS

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@rankokoturic6633 ok brother. If you get any doubt, feel free to ask me

    • @rankokoturic6633
      @rankokoturic6633 3 роки тому

      Thanks i appreciate it

  • @karthikeyanp164
    @karthikeyanp164 Рік тому

    cannot able to find the integration tab

  • @maheshwardumpala6852
    @maheshwardumpala6852 3 роки тому +1

    thank you bro
    Do more videos on react .

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      sure bro. Subscribe to mu channel and give your support

  • @anubhavnegi4230
    @anubhavnegi4230 2 роки тому +1

    where to find integration in emailjs?

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      EmailJS team has rearranged the dashboard design. "Integration" page has been removed from the dashboard. API Keys moved to the "Account" page. "User ID" renamed to "Public Key"

  • @sajalk4996
    @sajalk4996 Рік тому

    Without using email.js how can we get email responses

  • @rahul6778
    @rahul6778 3 роки тому +1

    Anyone used this with react native app by any chance? I am getting the following error even though i have enabled option to allow api calls from non browser apps:
    {"status": 403, "text": "API calls are disabled for non-browser applications"}

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Unfortunately this method doesn't work with react native

  • @melincognito9560
    @melincognito9560 2 роки тому

    Thank you! this was a lifesaver

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      thanks buddy. subscribe to my channel for more useful tutorials

  • @Charles-Darwin
    @Charles-Darwin 3 роки тому +1

    How would you make it more secure? I feel like this exposes too much on the client

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      you can use .env file to store the credentials. refer this. create-react-app.dev/docs/adding-custom-environment-variables/

    • @Charles-Darwin
      @Charles-Darwin 3 роки тому

      @@CodewithVoran in production?

  • @Dina-bn2zc
    @Dina-bn2zc 3 роки тому

    Amazing video thank you so much

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome dina. Subscribe for more useful tutorials 😊😊

    • @Dina-bn2zc
      @Dina-bn2zc 3 роки тому

      @@CodewithVoran i am building a portfolio website right now that has a route for a blog section. how do i go about doing this?

  • @CodewithVoran
    @CodewithVoran  3 роки тому

    Please subscribe to my channel, it really motivates me to do more and more tutorials.
    you can check the code in my git repo - github.com/voranzovv/react-emailjs/tree/master

  • @neerajkanojiya8098
    @neerajkanojiya8098 2 роки тому

    Nice video!
    What about emails from different domain like godaddy.

  • @PriyoStatus
    @PriyoStatus 2 роки тому

    thank you ,,its working

  • @ozzzy9623
    @ozzzy9623 2 роки тому +1

    Can you send file with this thing? Without subscribtion

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      it is available here github.com/voranzovv/react-emailjs/tree/master

  • @miscany
    @miscany 2 роки тому +2

    Great video, thank you so much. Probably better off without the music in my opinion, rather than going up and down. Or just leave it low in background,

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      Yeah miscany. I got many comments about this. Now upload tutorials without the music

  • @mdsamiul7530
    @mdsamiul7530 3 роки тому +1

    When I send the message it gives an error: " TypeError: Converting circular structure to JSON". Please say, how can I solve it?

    • @prashnought
      @prashnought 3 роки тому

      Somebody got solution to this??

  • @abdulrehmanamir3180
    @abdulrehmanamir3180 2 роки тому

    Sir in my account integration option is not showing

  • @parthdave9457
    @parthdave9457 2 роки тому

    I'm getting mails but the only concern is it's showing my email id only as "'from", basically not getting the email id from whom i received the message

    • @Unknown-840
      @Unknown-840 2 роки тому

      same, have you fixed it yet??

  • @mannat6056
    @mannat6056 3 роки тому

    All ok..but i cant get the user email..it shows the same email in (from and to)

  • @satakshishrivastava4772
    @satakshishrivastava4772 3 роки тому

    It worked for me but how can i render form submission confirmation message to user?

  • @jammuharish5998
    @jammuharish5998 Рік тому

    i didn't get integrtion and init code

  • @maitritrivedi7521
    @maitritrivedi7521 2 роки тому

    if we want to send mail to different user each time and also want same user filled data in database Then how we can do?

  • @tawhidib8036
    @tawhidib8036 2 роки тому

    thank you for make it easier to all... :D

  • @nicolasascona448
    @nicolasascona448 3 роки тому +1

    Hi. i got 2 erros .. the first is that doesnt recognize e.preventDefault() as a function and that doesn`t recognize e.target as a valid parameter

    • @CodewithVoran
      @CodewithVoran  3 роки тому +2

      5:46 check the 3rd line. you need to pass the parameter e.

    • @nicolasascona448
      @nicolasascona448 3 роки тому +2

      @@CodewithVoran yes i do pass the e... But aparently the problem was related with the form i was using (i was using an ant design form) .
      With an usual form works pefectly Well. Thenks

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@nicolasascona448 is that working fine now?

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@nicolasascona448 good

    • @wanjirumercy2540
      @wanjirumercy2540 2 роки тому

      Hi..did you get the solution? I'm using antd as well

  • @avoo1d
    @avoo1d 2 роки тому

    hey, good job with this one, can you do with file attachment in frontend and emailjs?

  • @ahmodfateh8266
    @ahmodfateh8266 3 роки тому

    very nice

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Thanks fateh. Subscribe for more useful tutorials

  • @carinvid
    @carinvid 3 роки тому +1

    I follow all but I got a error412 from google API, pls help

  • @nawel3398
    @nawel3398 2 роки тому

    thank you so much sir :)

  • @codeAlongwith
    @codeAlongwith 3 роки тому

    Thanks this helped to clarify things

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome mark. Subscribe to my channel for more useful tutorials

    • @codeAlongwith
      @codeAlongwith 3 роки тому

      @@CodewithVoran How can I create a message to tell the user the message was sent?

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@codeAlongwith 9.22 after line 12 addthis line
      alert("mail sent")

    • @codeAlongwith
      @codeAlongwith 3 роки тому

      @Code with Voran This video seems to explain it fairly well ua-cam.com/video/jOviw8Ou_Yk/v-deo.html

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@codeAlongwith that's cool

  • @0GERA0
    @0GERA0 3 роки тому +1

    Can you show us how to connect react js ts with idp 4

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Yeah sure. I'll make a video for that in future

  • @GMERT
    @GMERT 3 роки тому

    Please I am having problems in redirecting another page after clicking send. Pls assist

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      You should use react router

    • @GMERT
      @GMERT 3 роки тому

      @@CodewithVoran please can you write this code for me and link me up to your github?

    • @GMERT
      @GMERT 3 роки тому +2

      Please I still dont get it. Please can you make a video on linking or route to thank you page to emailjs code. I have been having issues with that for more than 3weeks and no video of that nature on youtube

    • @GMERT
      @GMERT 3 роки тому +1

      You are the best teacher I have on youtube. Please I want you to do a video on how to add thank you page to emailjs react code . I have been battling with that for weeks

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@GMERT hi brother. sorry for the late reply. 9.20 after line 12, write this code location.replace("www.yourPageURL.com")

  • @humans_love_speed
    @humans_love_speed 3 роки тому

    how will you clear the input field after submitting ?

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      window.location.reload();
      write this code after the sendForm function

    • @humans_love_speed
      @humans_love_speed 3 роки тому

      @@CodewithVoran thanks

  • @bushranikhat2326
    @bushranikhat2326 3 роки тому

    But even if the user puts incorrect email id..the email is getting send which is not right I think.

  • @Cantin91
    @Cantin91 3 роки тому +1

    Thank you so much!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      welcome. please subscribe to my channel for more videos

  • @mdikbalhosen1711
    @mdikbalhosen1711 2 роки тому

    is it safe?

  • @jiaxuanonn2413
    @jiaxuanonn2413 3 роки тому +2

    Hi sir, I'm using React Native to create a mobile application instead of web application. May I know what can I change for the "e.target"? There is an error (The 3rd parameter is expected to be the HTML form element or the style selector of form) shown.

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      hi Jia, Check this video. It may help you. ua-cam.com/video/x7Ewtay0Q78/v-deo.html

    • @victorfranco6673
      @victorfranco6673 3 роки тому

      I had the same error. I wanted to send a String not a form element. In that case I replace "emailjs.sendForm" to "emailjs.send" because it's not necessary a form element. There, I put in 3rd parameter a object who have the variable name and String(ex. parametersNames {name: "John Doe", city: "New York"}).

  • @KINTUALEXLADWONG
    @KINTUALEXLADWONG Рік тому

    I want it to be able to avoid spam mail. And it shouldn't send an empty mail when you click on send.

  • @howiewang4238
    @howiewang4238 2 роки тому +1

    Hi Voran, thank you for making this video. Is EmailJS the best service in the market for implementing this feature? Is there anyway without third-party?

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      you have to use third-party libraries. EmailJS is one of the famous libraries.

    • @howiewang4238
      @howiewang4238 2 роки тому

      @@CodewithVoran Thank you Voran.

  • @ritviksharma7449
    @ritviksharma7449 3 роки тому +1

    Great tutorial. Short and crisp. Just one thing, after successful submission how can we redirect to a new page?

  • @Abhishek44503
    @Abhishek44503 3 роки тому +1

    Link the repo in the future videos. It will be a huge help.

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      ok brother. I will link it in the future

    • @CodewithVoran
      @CodewithVoran  3 роки тому +3

      github.com/voranzovv/react-emailjs.git

  • @inspirationalquotes5840
    @inspirationalquotes5840 3 роки тому +1

    Thank you

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome bro. Subscribe to my channel for more useful tutorials

  • @udayjprg2988
    @udayjprg2988 3 роки тому +1

    Can you please tell us important topics should know for React JS while learning it.
    I like your videos they are very understandable

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      check this article. it will be useful for beginners blog.glitch.com/post/react-starter-kit

    • @udayjprg2988
      @udayjprg2988 3 роки тому

      @@CodewithVoran
      Thank you brother will follow it.
      Can you please are for JavaScript like important topics to cover and wanted to do small projects in it.

    • @CodewithVoran
      @CodewithVoran  3 роки тому +2

      @@udayjprg2988 this video will help you ua-cam.com/video/rt11z-V-IhY/v-deo.html

  • @sivajayaprakash9136
    @sivajayaprakash9136 2 роки тому

    THANK YOU

  • @ooru_suthalam_vanga_
    @ooru_suthalam_vanga_ 3 роки тому +1

    Hello sir,please can share the code

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      you can check the code in my git repo - github.com/voranzovv/react-emailjs/tree/master

  • @abhishekparmar.9232
    @abhishekparmar.9232 3 роки тому

    Thank you very much .,..

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome abi. Subscribe for more useful tutorials

  • @m__link6499
    @m__link6499 2 роки тому

    It's weird, when I receive the mail to my mail box, the textarea part is empty ....anyone have encountered this problem please?Need help...thank you for your video.

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      You need to check the id of the textarea

    • @m__link6499
      @m__link6499 2 роки тому

      @@CodewithVoran I don’t see any id value for the textarea in your video, I’ve always put a value on it. Maybe it’s béa cause I have 2 form on my website and using the same e.target for both forms?

  • @ganesha.m6423
    @ganesha.m6423 3 роки тому

    god video , but after click the send button , how to make auto refresh the form , what I mean , how to set the default form after click the send button that is the question on my side .

  • @PavanKumar-ut7pn
    @PavanKumar-ut7pn 2 роки тому

    soft interface support.

  • @fayasahamed5587
    @fayasahamed5587 3 роки тому +1

    Teach form validation and pdf generated

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      I will do a video about validation soon, by the way, I've already done a pdf generator. Check it out. ua-cam.com/video/rZr23bMwHsU/v-deo.html

    • @fayasahamed5587
      @fayasahamed5587 3 роки тому +1

      @@CodewithVoran using react

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@fayasahamed5587 yeah. i will do bro

  • @saksahgx4011
    @saksahgx4011 3 роки тому +1

    You were my salvation, thank you :D

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      welcome brother. please subscribe to my channel for more videos. Thank you

  • @hussamhuzaibi6856
    @hussamhuzaibi6856 2 роки тому

    tNice tutorials really helped

  • @VIPINPRASADNIT2020
    @VIPINPRASADNIT2020 Рік тому

    bro can you please give this code..i mean github

  • @md.anwarhossain1179
    @md.anwarhossain1179 3 роки тому

    Thanks a lot bro.
    Please provided a video react js & laravel forget password with email verify.

  • @cse_29_abdulshariqkalim15
    @cse_29_abdulshariqkalim15 3 роки тому

    Thanks a Lot

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      welcome brother. subscribe to my channel for more videos.

  • @ImranKhan-kf4ez
    @ImranKhan-kf4ez 2 роки тому +1

    can you give me source code?

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      You can find the link in the comments section

  • @AMIRSHOOTER
    @AMIRSHOOTER 3 роки тому +1

    hello sir could u send me source code of this project ?

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      yeah sure

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      github.com/voranzovv/react-emailjs.git

    • @AMIRSHOOTER
      @AMIRSHOOTER 3 роки тому +1

      @@CodewithVoran Thank u sir

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      @@AMIRSHOOTER
      this is the correct branch github.com/voranzovv/react-emailjs/tree/master

  • @prathameshTBSM
    @prathameshTBSM 3 роки тому +1

    GOD or what?

  • @eddi3ms
    @eddi3ms 3 роки тому

    thanks :)

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      Welcome bro. Subscribe for more useful tutorials

  • @trishamaemendoza1819
    @trishamaemendoza1819 2 роки тому

    When u first used a phone in ur life it probably was complicated too.

  • @atifhu
    @atifhu 2 роки тому

    sir dont put playcards befoe ending the video ,it hard to see last details

  • @kentyesene7020
    @kentyesene7020 2 роки тому

    you didn't say "no homo" man

  • @zubaerhaq
    @zubaerhaq 3 роки тому +1

    please don't add background music

  • @sirinemabrouk2079
    @sirinemabrouk2079 3 роки тому

    good job can u send me the code plz !!!

    • @CodewithVoran
      @CodewithVoran  3 роки тому

      github.com/voranzovv/react-emailjs.git

  • @sinantk4036
    @sinantk4036 2 роки тому

    lets make soft

  • @htetwaiyan2499
    @htetwaiyan2499 2 роки тому +1

    background music is so annoying

    • @CodewithVoran
      @CodewithVoran  2 роки тому

      Sorry to know the brother. Now i stopped playing music

  • @avishek_ataur
    @avishek_ataur 3 роки тому +1

    Gmail_API: Request had insufficient authentication scopes

    • @CodewithVoran
      @CodewithVoran  3 роки тому +1

      To solve this problem, you need to go to EmailJS dashboard -> Services, click on the Gmail service in your list, and reconnect your account. Please click on the checkbox "Send email on your behalf" to allow us to send the emails through your Gmail account

  • @MrCavid1991
    @MrCavid1991 Рік тому

    STİLL WORKS . AWESOME