Hi everyone, today I'll show you how to create a contact form in React and send e-mail using e-mail.js. Let's take a look at this design. As you can see, I'll have the contact form on contact page and the form contains 2 input fields and one text area and the button to send e-mail. And also we'll have browser validation. So now I can press submit button and as you can see we have message. Please fill out this field and I need to provide some name. Let it be John and some e-mail like john@test.com. And now I can submit and we have please fill out this field. And also I can provide incorrect e-mail. And we have please enter a valid e-mail. And now I can return test.com and provide message hello. And now I can submit my message. And message was submitted and as you can see I have Thank you for your message. And now I can check my e-mail. And I have new message. And this message from John and e-mail address john@test.com and the message was hello. And I can reply to my message. And for the sending emails, I'm going to use email.js. You can create a free account. I created one. And also we need e-mail services, e-mail templates, and I will explain it later. Let's go to the code. I launched my Visual Studio Code and opened portfolio project that was built previously. You can check the video about building the portfolio app or can check the code. I'll provide the links in the video description. And now I can open this portfolio project in terminal and install email.js. I'm going to open docs and check install email.js SDK and just copy this command and run it in terminal and I'm going to modify contact page of Portfolio app. and dependencies were installed and I can check package.json file and as you can see email.js dependency was added and now I can run my dev server with command npm run dev and open it in my browser. Okay and I have my portfolio app and I'm going to modify contact page. I have some code here and I can hide all these panels and now I can modify the code and first of all I need to create component and it will be contact form. Inside folder components I can create new folder forms. And inside forms I'm going to add contact form contact form JSX and also I need contact form CSS for my styles. OK, and now inside contractform.jsx I can create my functional component and it will be function contractform. contactform. And it's a function and now I can return some JSX and build form. First of all, I need some div and it will be container for for the whole form and I'm going to provide class name contact form. And inside div I'm going to add a h2 tag with a contact and also I can add form and I don't need action. I'm going to handle it in React code and now I can provide div with class name class name form-group. And I'm going to add styles later and inside this group I'll have a label with HTML4 name and provide text name. And this filter will be required and I'm going to mark it as required. And now I can add input. Input will be will have type text, name will be name and id will be name. And I can make it required and also I can copyPaste this form group. And create a label for my e-mail. e-mail input, it will be also required. And place e-mail, and change name for e-mail, enter id for e-mail, and also the type will be e-mail. And uh, now I can add the text area for my message of a form group and I need a label for message and provide a label message and it will be text area text area with name message. And ID message. and I can add rows 5 and also I need some button inside my form and button will be type submit and add text submit. Okay, now I can export. Export my contact form as default. Default contact form. And inside my contact page I can import my form. Import contact form and add it into my page. And I'm going to just remove all this code and Just provide contact form, contact form and close tag. And let's check what we have. We have our portfolio. I can refresh the page. On contact page, we have name, e-mail and message. Let me try to add some name. remove it and submit. And as you can see, we have validation. It's a browser validation because we marked field as required and I can provide some values and also have e-mail required and I can provide some values. And as you can see, we need some valid e-mail. I'm going to provide some @test.com and now I can submit. And we need to make message required. Let me do it. In my contact form it will be required. And let's check again. I can provide some e-mail. at .com and with empty message. Okay, and I can add some valid e-mail and submit. And we have validation for our message. And now form was submitted, but we're going to handle it in our React code. And first of all, let me add some styles to uh look nicer. I'm going to provide styles for our contact form. And contact form CSS is a class. And I can add width 100% and make max width 600 pixels and make background color white. And also I can add some padding, one REM for all sides and also add box shadow and make it 005 pixels and provide some hex color. I'm going to use this blue color. something like that. Okay, and also I can add border radius 5 pixels and increase font size. Font size 1.2 REM. And let's check what we have. Okay, we don't have anything because we need to import our styles. I'm going to add import and from the root contact form css. Okay let's check again and I have error. Let's check what happened. Import contact form. Okay, I provided wrong name. We can rename contact form. And let's check again. Okay, we have our styles and now we can add more styles. I'm going to use my container class contact form to assign other styles. That's because I use plain CSS. It could be resolved by using some preprocessor or modules, but here I'm using just CSS and will use my contact form class to avoid some confusion with other styles. So contract form and for form I'm going to add some margin bottom and it will be 2 REM. And also I need styles for my form group. I'm going to copy paste this class, it's a class. inside contact form and also I'll make margin-bottom 2 rem and text-align, text-align will be left. Let's check what we have so far. As you can see we have text align left and margins are added. And now I can add styles for my label. contact-form label and I'm going to make font weight bold, bold and also we need styles for our inputs and textareas contact form input input and also contact form Text area Text area And provide styles width will be 100% And also I can add some paging 1 rem And to add some border 1 pixel of it gray Gray. Gray. Okay. And let's check what I have. Okay, we have our form, but we have extra space outside of our container and I can fix it by adding box sizing. CSS property, border box. sizing and apply border-box to calculate pagings with the width of our container. Let's check and our styles looks good and now we can provide styles for our submit button. Let me do it. Contact form, and button. And I can add some paddings. One REM for top button and two REM for left right. I need to remove this. And also I can specify background color and copy our box shadow color. Ok and now I can add color for text. It will be white. And now I can remove border. And also add border radius. 10 pixels. And also I can make cursor pointer. Increase font size 1.2 rems. And also I can provide pseudo class hover to change color of the button during hovering over the button. So with pseudo class hover and I'm going to change background-color for button to something. like this. Okay, and provide some blue. OK, and let's check what we have. And as you can see, the styles for button were changed. And when I hover over the button, the text is changing. And I can provide some text. Submit and we have our validation and now I'm going to add functionality to sending emails. For that I'm going to modify my contact form JS act and provide some state. We need to keep the values of input and text area and send them to e-mail JS by pressing submit button. And first of all I need to add hook useState. And as you can see, import was added and useState returns a state for value and a function to update it. And I'm going to keep the the values in my variable formData and function to change variables will be set formdata and assign and initial value will be object with fields name empty and also e-mail empty and message empty. Okay we have our state and now I can add a function to update the state, it will be const and the name will be handleChange. And as parameter we'll have event. Event The code will be, we will give the name and value. const name and value using object destructing from event, event target. It will be our input or text area. And if we will call this handle change when the user changes the input and let me do it. And I'm going to change my JSX and provide value from data name and onChange I'll call handleChange. handleChange. And I'll do the same for my e-mail, but change to e-mail. And also I need to add this for text area, but provide message. Okay, and now we can change the state. and use set form data, set form data but make the copy of our current state of data it will be new object and I'm going to change name and provide new value. Okay and now I can add some handling for submit button and it will be called when submit button pressed and to form I can provide handle submit on submit on submit I will call handle submit and I need to provide some code. Const and handleSubmit will be arrow function and inside code I'm going to use event to prevent default behavior and add event prevent default, prevent default uh to avoid sending a form without data and by pressing the button I can check what we have in our form using console log and provide some message, submit form data equals and check our form data. And let's check what we have. I'm going to open the app, refresh, and provide some name. So I need to open developer tools and open console and the e-mail will be test.test.com and message will be test. And just submit. And we have undefined. Let's check what happened. Okay, I need to provide coma here and let me check again. Submit and inside form data we have our test message and e-mail. I can add some change some values and We have our values test again and submit again. OK, we have our message test again and everything looks good so far. And now I can use email.js documentation to send messages and we have email.js send. And let's take a look at the code. We need to service ID, template ID, and also we can use init and provide public key, but we have options to provide public key inside send function. You can check the documentation and I'm going to use only send function without init. But first of all I need service ID and template ID and you can log in in e-mail JS and into account that you created and I have own account and e-mail. You can select e-mail services and add new service and I'm using Gmail. And the service will be created, but you need to connect your account. And by pressing connect account, I can select my e-mail and then press continue and the service will be added. But I have one and I'm going to use this service. And also you need e-mail templates. You can create new template and I'm going to create new template and and modify these fields. We have name, we'll have name because we were using name, like name and also reply to will be e-mail because as name we are using e-mail. I'm just going to copy paste this e-mail and you got new message from e-mail. I'm going to edit content in probably code editor. You got new message from And e-mail, and also I can just remove this. Code, and also I don't need this. And I can just apply changes. And save it. Okay, and template was added. And I can change the name inside settings and provide portfolio app and save. OK and now I can use this code emailjs.end and place it inside my handle submit. And for your service ID, I can add my service ID. We have it here. Service ID and also I can provide my template. I have it in settings template ID. And also I haven't added any in it and I can provide it in my send. Template ID on key, my key will be an account public key. I'm going to copy paste it and as form data I'm going to use my variable. OK, save and let me try to send something from my application. I'm going to just submit and I got error, email.js is not defined and I need to import email.js from my from my library that I added email.js browser. Okay, and let me save and try it again. It will be test, test@test.com and test message submit and we have our data and as you can see we have success message and I can provide some status for my message but first of all let's let me check e-mail. I'm going to refresh my e-mail and check what I have. I have new message from test and the message You got new message from test@test.com and the message test and everything is working and now I can add some feedback message. I'm going to change my JSX code and for that I need to add one more state variable and it will be const submitted. And set submitted function to modify this variable and use state and initially it will be false. And when form successfully submitted, I'm going to change Set submitted to true. And provide JSX to check if submitted. If submitted. Then I'll show message div inside div. And close div. And provide message. Thank you for your message. Let's check what I have. I'm going to provide name test1 and message test1@test.com and message test1 and press Submit. And as you can see we have our feedback message. Thank you for your message and also you can just disable or show some icon where message is sent. and then enable it, but I'm not going to do it. So one more thing that I would like to highlight. This is not the good practice to store all these ids inside code. It would be better to create env local variable and local file and place all these variables inside this file I have created on. And now I can place my API key inside this variable and also my service ID inside and local file and Vite service ID. And also template ID inside my env file and save it. And now I can use import inside my JSX code, in my React code. I can import. And it will be inside meta. and provide my name. And for service we have Vite service ID. The project was created with Vite. And I'm going to copy paste it and change variables. For template ID I can provide with a template ID. For API key, I'm going to provide API key. OK. And why do we need it? We need it to keep our credentials inside our local file and to keep them privately and not share in code, public code repositories and this env local file will not be stored in GitHub and when you deploy your application you can specify some other local variables for your production build or test build. I don't know. So the main goal is to keep this variables privately and let's check what we have. I'm going to refresh the page and provide test2, test2@test.com. And a message. Hello. Again, and submit message. And as you can see, message was submitted and I can hide it and check my e-mail. OK, refresh and we have message from test one and that we sent previously and the message from test two that I sent just a few seconds ago and as you can see everything is working and I provide the links to the source code and to previous videos and to e-mail address in my video description. If you like the video please like and subscribe to my Dev Web App channel. And that's all that I have for today. Thank you for watching. Goodbye.
