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

✨ Join My Discord Server
/ discord
Source code: github.com/chaoocharles/react...
Buy My React Portfolio Course: chaoocharles.gumroad.com/l/re...
Donate 🤑
- Your support will help me to upgrade my setup for better quality content and more videos per month.
📍Donate with PayPal: www.paypal.com/cgi-bin/webscr...
SUPPORT MY CHANNEL
📍SUBSCRIBE: / @chaoocharles
📍Become a Channel Member: / @chaoocharles
📍Join My Fun Channel: / @chaaoo
GET IN TOUCH:
📍 Twitter: / chaoocharles
Disclaimer: This video is not sponsored

[@siddharthagarwal8617]

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

[@ChaooCharles]

Thank you!

[@MilanPatel-ri7my]

can i use this service for my client's site?

[@siddharthagarwal8617]

@@MilanPatel-ri7my yes

[@fadelellaherrami8840]

thank you

[@MeArron]

Now found in Account

[@aslan6921]

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.

[@Teos2911]

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]

ruclips.net/channel/UCcvrowWWzbIIErU164UAtgQ

[@desmondmpofu4083]

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.

[@bp-ob8ic]

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

[@roseiyera]

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

[@Samflaful]

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]

You're welcome 😊

[@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]

@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.

[@amanahirwar9236]

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

[@drewe9514]

Big help, thanks for this easy to follow tutorial!

[@stealthmunky]

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

[@gtry1966]

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

[@mahamdabdi]

this is helpful thank you very much chaoo charles i love anyone talk about web development

[@seananih7609]

This was extremely helpful, thanks!

[@GreenPear-mz4dl]

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

[@XenothGaming]

Great Video! Clear and concise!

[@syncosota]

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

[@ankurparchani3230]

Nice work. You explained it very neatly.

[@AaronTMac]

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

[@harz9556]

Very fast one! Thank you for sharing :)

[@user-ni8ro1wg3d]

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

[@craigjohnson8279]

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

[@ChaooCharles]

Great buddy

[@TaneKaio-qe9mc]

Fantastic explanation, thank you!

[@nellison]

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

[@lemibekele669]

So helpful you saved a ton of time! thank you

[@fluffybubble6872]

Pretty good explanation, thanks for tutorial!

[@nicolasbarthes7622]

Just thank you !! Subscribed !

[@veejay33]

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

[@ChaooCharles]

Thank you!

[@vinaybhojwani998]

Thanks brother! It was a great help :)

[@yofanalfiatur2779]

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

[@pracco]

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

[@Ninjajitsu562]

cute

[@yannickmulikuza6364]

Yeah, just found out too

[@Thhs3]

Yeah

[@sportsstimulant4228]

How to hide your user id in .env file ??

[@sportsstimulant4228]

CN you explain suppose .env file write "PUBLIC _KEY "= "123456789abcd"
Then how to write code in main file ? Process.env{PUBLIC_KEY} ???

[@Pinwinazo]

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

[@AleRom]

Thank u so much, cheers from Argentina!

[@TheSoulCrisis]

Solid guide.....great work sir!

[@luxi1415]

Thank you ! You make it easy !

[@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 😆

[@jpcc1223]

you helped me A LOT! thank you so much!

[@ChaooCharles]

Welcome buddy

[@Filip-_-._.]

Thank you! Great video :)

[@titoboyabunda4763]

ty so much bro new subscriber here!

[@fredlesh8610]

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

[@leonardodias2154]

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

[@estevaolibardi]

Thank you so much my friend!

[@elliecottrell4574]

Great video, thanks! :) 😃

[@muhumuzaallan7915]

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

[@shalomsanbi]

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

[@ashurawat850]

Thank you, helps me alot 😊

[@syedsalmanali7359]

Very Helpful design thanks.

[@anupamaherath4983]

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

[@alexg7282]

Works perfectly ! Ty

[@masudranaofficial99]

Thank you brother. very good tutorial was for me

[@chaitanya-varu]

thank you! very helpful video

[@shabiulhassan3397]

I love your Video your video help me alot bro❤

[@nathanielgonzalez9598]

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

[@ChaooCharles]

Glad it was helpful 🫡

[@morganphemba648]

This video was SUPER useful !

[@ChaooCharles]

Awesome 👌

[@MichellQHernandez]

Excelente video!! Saludos desde colombia!!

[@melissastan6884]

Much appreciated it!

[@nirmalapusparatna8940]

Thank you so much!

[@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"

[@UncleVanyaCode]

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.

[@safaakhoudja2092]

thank you so much for this tuto very usefull

[@satishmaurya2089]

Thankyou so much for this wonderful content

[@alltoall]

ruclips.net/channel/UCcvrowWWzbIIErU164UAtgQ

[@b0b0_]

THANKS SOO MUCH BRO, VERY COOL

[@iafofkhadze4628]

such a great video

[@ChaooCharles]

You're welcome 😊

[@code-with-vivek]

Very nicely explained...

[@Karrnfr]

Nice video, Thanks

[@adediransulyman6103]

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

[@issameddinebouhoush115]

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

[@bhaskarroychoudhury7911]

Thank you very much!!!

[@bhaskarkumar8812]

Sir I am not getting where the integration section is

[@crvenioklop1217]

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

[@user-jr6jk5xi5y]

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

[@techlightdev]

Thank you so helpful for me

[@md.sheikhalnahian459]

Thanks a lot for helping .

[@marmikpatel8387]

Great tutorial--thank you!

[@ChaooCharles]

You're welcome

[@alltoall]

ruclips.net/channel/UCcvrowWWzbIIErU164UAtgQ

[@user-mp6jv2ki3f]

Excellent, ty sir

[@ambiguouscompany]

Thanks so much for this

[@chiomaveronicaezezim1933]

Thank you so much

[@umanggoel5385]

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

[@sulemanmughal5397]

i love ur portfolio bro...

[@nvvgcc]

thanks a lot!

[@SpaceNerdUffi]

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

[@benjaminb7544]

Thanks!

[@shakilahmed6870]

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?

[@Icedanon]

many thanks good sir

[@ericadeguzman6799]

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

[@sayazdir]

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]

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.

[@MK_official005]

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

[@kamalraj-hp8qd]

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

[@kaveeshbhashitha7652]

Thank you 😊

[@md.sadiqibnmasud4985]

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

[@shoaibahmed195]

great guide

[@imanimi7817]

Thank you 🤩🤩🤩

[@phantasythenoob]

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

[@ChaooCharles]

Thanks bro...

[@aie007]

Thank you

[@bryandelacruz9066]

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

[@peoplechoice7848]

working, thanks!

[@mikemaer]

Thanks man :)

[@richardmartyns7978]

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

[@investandcyclecheap4890]

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

[@seyedahmadqz]

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

[@TheGodfather96]

you're the best, bro