React: Send email from contact form without server code - Email.js Tutorial

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

КОМЕНТАРІ • 241

  • @siddharthagarwal8617
    @siddharthagarwal8617 Рік тому +74

    User ID is replaced by Public key which can be find in settings

  • @aslan6921
    @aslan6921 Рік тому +34

    This was realy helpful, thank you!
    Btw, If you want to prevent your email from being spammed with empty emails, make sure to implement form validation. Currently, even if the input fields are empty, the email will still be sent. By adding validation, you can ensure that the user fills out all required fields before sending the email.

  • @desmondmpofu4083
    @desmondmpofu4083 2 роки тому +15

    Thank you so much this has helped me a lot, in case the integration tab is not in your dashboard, go to "Account" tab and you will find the API keys there.

  • @Teos2911
    @Teos2911 2 роки тому +7

    Thanks a lot, I spent like three hours trying to figure out how this library worked. But your video was straightforward, well detailed and precise.

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

      ua-cam.com/channels/cvrowWWzbIIErU164UAtgQ.html

  • @pracco
    @pracco 2 роки тому +40

    Thanks, mate for posting the video. I'd like to advise that "YOUR_USER_ID" should be replaced with "PUBLIC_KEY" which is now under Account>API Keys

  • @roseiyera
    @roseiyera Рік тому +2

    Something others tried to teach in 1 hour you did in 11 minutes and it worked so well👏👏👏👏

  • @Samflaful
    @Samflaful Рік тому +2

    Thank you! I just finished a bootcamp and I'm putting my portfolio together, I feel like this integration will really help with getting people to reach out, as it's taking so many steps out of the process of reaching me. The guide was super clear, I really appreciate it!

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

      You're welcome 😊

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

      Mind if I ask how your job hunt went/is going? I just finished a bootcamp a month ago and would be interested to hear how things went for you after finishing :)

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

      @OhShiverMeTimbers nobody in my cohort (myself included) managed to get a job. The market basically locked up as we got our certs of completion and bootcamps in general seem to not appeal to employers anymore. I think some other members of my class are still looking but I've given up. I tried grinding really hard on putting out applications and coding, but I had very few interviews and no callbacks, even for entry level and internships. The course itself was expensive and I basically obliterated my savings paying for it and then trying to job search and practice full time afterwards. I went back to my old restaurant job, and I'm just trying to make the best of it. I'm sorry this is probably not the sort of answer you were looking for, but it's not really the outcome I was hoping for, and the whole experience has been pretty tough.
      Not that I'm in a position to give advice, cause I didn't really "make it" but I don't think it's impossible. If you just hold down a job to support yourself and spend your spare time coding/ studying/ applying I think you'll make it. It's still a broad and expanding industry, and it'll open up again as some of the FANG companies start hiring again in the coming year. You just need the willingness to keep trying, and a sincere passion for coding. Best of luck to you, stranger.

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

    Good to see a brother from Kenya on the YT tech scene

  • @bp-ob8ic
    @bp-ob8ic 2 роки тому +1

    Nicely done!! Adding this to my portfolio contact page just got a lot easier.

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

    thank youa lot bro, you're the only one who's made a great comprehensive tutorial on emailjs. good luck.

  • @bhaskarkumar8812
    @bhaskarkumar8812 Рік тому +2

    Sir I am not getting where the integration section is

  • @hardtospell
    @hardtospell 9 місяців тому

    Is there a way to add dynamic data to the forms? I have an order form similar to yours which has a selections of goods unique for every client. The data I have is an array of ids and names of the products that a user selected.

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

    how do you style the email ? What if I want the email to look attractive and fancy

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

    Thank you so much. This information is very useful. I thought that I need to setting the backend first to make the form functional 😆

  • @EronMahmuti
    @EronMahmuti Рік тому +1

    integration page isn't active anymore in emailjs dashboard, can someone please tell me how to find userID, even chatGPT doesn't know how

    • @EronMahmuti
      @EronMahmuti Рік тому +2

      In case someone has the same problem as mentioned, just use the public key instead of userID and you can find it in account page of dashboard ;)

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

    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 ?

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

      make use of an .env file to fix that in production

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

    thanks, man. you're big help to my thesis

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

    Thank you
    But please how do I go about it that after sending the mail it refresh the contact input

  • @ModiKrushil-m3n
    @ModiKrushil-m3n 5 місяців тому

    It's really helpfull and your explaination were straightforward man.thank you so much guy for help.😊😊

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

    Thank you so much. Can anyone explain why don't we need to store the form data in a state, as we normally would with forms in React?

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

      The data is sent to Emailjs through the sendForm method. That's why you specify the Service ID, Template ID, and Public Key. Once you click send, the data is sent to your account.

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

    You're the goat!!! Thanks it worked guys.

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

    Please I want to build a portfolio like this one you have. Please where can I watch the video?

  • @sivark878
    @sivark878 4 місяці тому

    Thank you so much bro,
    It's really work and helpful for my projects.

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

    Hello,
    how I can send default values during the first reload of the component plz?

  • @اصمت-ظ9ق
    @اصمت-ظ9ق 9 місяців тому

    Aff Module not found: Error: Can't resolve 'styled-components' in 'C:\production github react\mystate\src'

  • @muhumuzaallan7915
    @muhumuzaallan7915 7 місяців тому

    thank you big boss it has worked and you have saved lots of hours for me your amazing

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

    thank you so much! but how to validate form before sent to email sir? Can you tech me or Do you have a video?

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

      basic html validation is as easy as setting the input types and adding required attributes so they can't submit a blank form.

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

    Very fast one! Thank you for sharing :)

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

    Hello, I have a react site using typescript. How can I write this in typescript? Thank you!

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

    Big help, thanks for this easy to follow tutorial!

  • @MK_official005
    @MK_official005 11 місяців тому

    thankyou so much for this tut 🙏 can i use this platform for client project..............?

  • @GreenPear-mz4dl
    @GreenPear-mz4dl Рік тому

    absolutely useful and easy to follow, it works perfectly, thank you so much, you got my subscribe!

  • @anupamaherath4983
    @anupamaherath4983 8 місяців тому

    Thankyou sirr for you tutorial may god bless you....... love from Srilanka...

  • @petermwansa4890
    @petermwansa4890 4 місяці тому

    Perfect tutorial!!! Thank you mate!

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

    I'm having a problem on console "Invalid value for prop `submit`"

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

    Thanks for this tutorial.
    I have a question. How do you do to make a loading state for that moment when you click to sent the email. I mean, in that moment i wanna see a "loading"

  • @kimdokja8336
    @kimdokja8336 10 місяців тому

    How did you do the message that appears when you send the email ?

    • @ChaooCharles
      @ChaooCharles  10 місяців тому

      Look for react toastify tutorial

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

    How can i lock the button, and unlock when all is filled?

  • @muubaraq
    @muubaraq 10 місяців тому

    After hosting. It is requesting for public key even when the public is available. On local host it works

  • @seyedahmadqz
    @seyedahmadqz 10 місяців тому

    It's useful but I couldn't use this service. Now after watching your video I must tray again. 😊

  • @fatimaahmad5734
    @fatimaahmad5734 4 місяці тому

    should we be using this emailjs in real project?will there be any security concerns?

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

    Hello! Thanks for this Tutorial !
    What is your vs code font !

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

    This video helped me a lot! Thank you and also you have the nice portfolio website :)

  • @nathanielgonzalez9598
    @nathanielgonzalez9598 10 місяців тому

    Thank you so much for your video! It was incredibly helpful

  • @kamalraj-hp8qd
    @kamalraj-hp8qd Рік тому

    Hi is it possible can we put form in email content and perform action on same email page.?

  • @diegoalejandro1932
    @diegoalejandro1932 11 місяців тому

    what is yout theme dude? thanks 4 video!

  • @lemibekele669
    @lemibekele669 7 місяців тому

    So helpful you saved a ton of time! thank you

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

    Great video Charles. Thanks for sharing the knowledge, I learned a lot. :)

  • @amreenkhatik9952
    @amreenkhatik9952 4 місяці тому

    Why i m getting "Template: One or more dynamic variables are corrupted" in my email

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

    is it possible to do the reverse? you're the one sending to the email they give?

  • @stealthmunky
    @stealthmunky Рік тому +1

    Really simple tutorial, nice work, really appreciate valuable content like this 👍👍

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

    thank you your video really helped me as a beginner 🙌🙌🙌

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

    Thanks nice tutoriel i appreciate a lot u don't know how much u helped me

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

    you're an amazing human being, thank you so much

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

    There is no integration tab in emailjs..How do I add my user id ?? Please help

  • @investandcyclecheap4890
    @investandcyclecheap4890 Рік тому +1

    thanks for the tutorial. Does anyone know if this will work with Firebase hosting? Thanks

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

    how can i do this using checkboxes?

  • @aneeshfit6224
    @aneeshfit6224 10 місяців тому

    What If I have to send all mails to professional mailId? Please reply

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

    they changed the website and dont have an integration tab to lead to finding the public key with the apis... (update, I found it in the "Account" tab at the top

  • @TheSoulCrisis
    @TheSoulCrisis 8 місяців тому

    Solid guide.....great work sir!

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

    incredible, fast and effective, thank you very much
    new subscriber

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

    Thank u so much, cheers from Argentina!

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

    Thank you so much, this was very helpful and it was time saving.:)

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

    But it is sending me email from my email to my email. Like the sender and the receiver email remains same. So the email sender cannot see any sent emails to their inbox. Why this happening?

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

    You created a new service in Gmail but I want to create create in SMTP ,will it work??

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

    This video was SUPER useful !

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

    how to get the radio button value

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

    Thanks brother! It was a great help :)

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

    Just thank you !! Subscribed !

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

    This was extremely helpful, thanks!

  • @md.sadiqibnmasud4985
    @md.sadiqibnmasud4985 2 роки тому

    Why am I seeing "Team Members" instead of seeing "Integration" in my emaijs dashboard? can you please help me? I can not find any "integration" in my dashboard, as well as userId

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

    Nice work. You explained it very neatly.

  • @maniac1441
    @maniac1441 Рік тому +1

    getting error "Gmail_API: Recipient address required"

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

    Great vídeo Chaoo, you are so cool. Thanks for the explanation. ;)

  • @titoboyabunda4763
    @titoboyabunda4763 8 місяців тому

    ty so much bro new subscriber here!

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

    facing some issues after adopting these library. can anyone help me please

  • @lucasblomhall1184
    @lucasblomhall1184 Місяць тому

    Thank you it works!😄

  • @nileetsavale1871
    @nileetsavale1871 6 місяців тому

    i am encoupntering an error for no reason, the task is always failing, if someone can help please let me know(ps: I am coding in react itself for my portfolio website)

  • @prathmeshkhandare6113
    @prathmeshkhandare6113 3 місяці тому

    Doest it uses our email to send the messaage to us ?m

  • @riteshbhadana
    @riteshbhadana 5 місяців тому

    When I am sending mail, I am not getting the name and email, I am getting the message, what happened

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

    great bro,its work with next.js as well if somebody use it,tnx a lot bro

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

    Pretty good explanation, thanks for tutorial!

  • @NativeCoding-s1e
    @NativeCoding-s1e 4 місяці тому

    I always got public key is invalid. I have follow all instructions actually

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

    I love your Video your video help me alot bro❤

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

    Thank you brother. very good tutorial was for me

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

    you helped me A LOT! thank you so much!

  • @Filip-_-._.
    @Filip-_-._. Рік тому

    Thank you! Great video :)

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

    thank you chaoo charles. well expalined and easy to implement🙏

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

    Thank you, I finally got this to work^U^

  • @accountdept7963
    @accountdept7963 6 місяців тому +1

    this is secure or not? can i use real time project for company website

  • @Kocakinnn
    @Kocakinnn Місяць тому

    Halo, I had input my Public Key and and i sure, that i'm correct. When i tested that, the console said that 'FAILED, the public KEY INVALID"

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

    Excelente video!! Saludos desde colombia!!

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

    Great Video! Clear and concise!

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

    Very Helpful design thanks.

  • @TaneKaio-qe9mc
    @TaneKaio-qe9mc Рік тому

    Fantastic explanation, thank you!

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

    Great video, thanks! :) 😃

  • @Deepak-ye8vt
    @Deepak-ye8vt 2 роки тому

    why is it not working for any random email in react.js ??

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

    short question. Does this also works for react-native?

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

    Awesome video! Still works!

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

    Thank you, helps me alot 😊