Create Contact Form with Validation in React.js App | Send Emails with Email.js
HTML-код
- Опубликовано: 6 июл 2024
- You can learn how to create a Contact Form with Browser Validation in React and send emails with Email.js to your Gmail by watching this Contact Us Form Tutorial!
📂 Resources:
Source code:github.com/DzmitryUr/portfoli...
Email.js site: www.emailjs.com/
Video Create a Simple Portfolio App with React Router: • Create a Simple Portfo...
Video Add Icons to Project: • How to Add Icons to Yo...
🕒 Timestamps:
0:00 Design of the Contact Form Project
2:14 Install Email.js npm package
3:10 Add ContactForm functional component to React Project
4:30 JSX for Contact Form with two inputs, textarea, and button
8:23 Styling the Contact Form with CSS
14:40 Store the form data into state variable with useState React hook
17:20 Event Handling for submitting the Contact Form
19:20 Emails.js docs, create Service and Template for emails
21:50 Send email from React code using Email.js
24:01 Conditional rendering to show message after sending the email
25:33 Using Environment Variables to store Keys
27:40 Testing the Contact Form Application
Don't forget to like, comment, and subscribe for more coding tutorials and challenges!
Happy coding! 🚀
#ReactJS #ContactForm #CodingChallenge #ReactTutorial #WebDevelopment
🕒 Timestamps:
2:14 Install Email.js npm package
3:10 Add ContactForm functional component to React Project
4:30 JSX for Contact Form with two inputs, textarea, and button
8:23 Styling the Contact Form with CSS
14:40 Store the form data into state variable with useState React hook
17:20 Event Handling for submitting the Contact Form
19:20 Emails.js docs, create Service and Template for emails
21:50 Send email from React code using Email.js
24:01 Conditional rendering to show message after sending the email
25:33 Using Environment Variables to store Keys
27:40 Testing the Contact Form Application
Browser validation or client side validation? 🙃
Browser validation is used in the form.
HTML attributes `required` and ``