Hello Ed, can u please make a project with NextJs 13? I want to see how would you approach it after the new features that were added to NextJs. And thanks for this amazing video ❤️
Thank you Ed for this tutorial!, I was saying to myself that I wanted to learn how to build forms in React from scratch (Which I would still learn for basic knowledge), but for doing a Job fast, using formik and yup is extremely helpful, thanks for also showing a small example of how to use framer motion and the useRouter hook in NextJS. This was really an insightful video
I tried following your tutorial but it was really complicated to have the css colors work! The tutorial is just amazing but unfortunately that tailwind config was a bit complicated and many of the color animations, to not say all of them were impossible to follow until now. I will continue learning from you, of course but if you may have thought about it, maybe you could have a video of common issues that happen to people since I saw online this happens to many of us. Thanks much dude!
So use Formik with Yup for small forms or use react-hook-forms and Zod for bigger more complex forms since react-hook-forms minimises the amount of re-renders when interacting with the form for better performance :-)
All these cool libs make me feel that we're in the golden era of coding, yes we need to get familiar with a lot of stuff but it does make our life ridiculously easier.
You are a legend, thanks for this great content, just a quick question, how could you send the information collected by the form to send to my prisma backend to save that data?
Hey. I am confused. The UI & UX is great but the form data is not really getting submitted anywhere. The user data is getting saved yes but NOT sent to any email address (recipient) of our choice. How to do that part?
There are separate libraries for doing so. If you are building a contact form where the users can contact you, services like web3forms and formspree come in handy (both are free). On the other hand, if you want to send an email to someone using this, there are libraries such as Nodemailer that can be used to do so. [SORRY FOR BEING 6 MONTHS LATE💀]
Formvalidation is supereasy in plain HTML actually. Use the pattern-tag, like pattern="[a-z]{1,15}" (normal regex) and then you just make a HTMLSelectElement.checkValidity() . And checkValidity() also checks for min and maxlength etc ofcourse. And thanks to css you can make the fields not meeting the critiera have a red border automaticly without a single of extra code. (yes I hate frameworks and libraries :D
i think the main issue with doing it with plain html is that anyone with little programming knowledge could easily inspect the website and edit the html code
@@philipjamesajagabos2519 yes agree that it should be on server side aswell. But funny thing is that when I check code I often see people use jquery for form validation on clientside.
Hello! I'm using Vite instead of Next js, I'm looking for something similar to the next js push, do you guys suggest anything to validate the form and send the information in the same button?
How do i use formik submit after validation to go to the next page? If i use NavLink it would go through but ignore all form validation. Though I used npx create react app. Curious
What if the dropdown was using fetched data from an api, instead of a hardcoded json object? How would I pass that data from the api into my dropdown using formik?
So first you use good design principles and you get rid of all that style="margin:10px; color: black;" and then use a good CSS framework like Tailwind, using modern stuff like class="margin10px colorBlack". Is that how it works? :D
Good evening, I have an error in the code focus:border-teal-500 focus:ring-teal-500 is not getting the focus with the color correctly. The border is obtained but not the focus. What could it be...?
Hello bro! I have a problem please help when I import useRouter from next/router shows blank page white screen in console says Uncaught ReferenceError: process is has-base-path.ts:3 not defined
Hi Ed, I purchased your HTML course and I am enjoying it, but I wanted to let you know this link: drive.google.com/drive/folders/15uNyS0zwm3L_sjqX-WUiFdFCVDBet3PI?usp=sharing is broken. It's under the Full Course Download I hope you fix it soon. Thanks,
Hello Ed, can u please make a project with NextJs 13? I want to see how would you approach it after the new features that were added to NextJs. And thanks for this amazing video ❤️
Thank you Ed for this tutorial!, I was saying to myself that I wanted to learn how to build forms in React from scratch (Which I would still learn for basic knowledge), but for doing a Job fast, using formik and yup is extremely helpful, thanks for also showing a small example of how to use framer motion and the useRouter hook in NextJS. This was really an insightful video
This was super helpful :D The formik documentation is clear too, but i prefer when this is explained in video
I tried following your tutorial but it was really complicated to have the css colors work!
The tutorial is just amazing but unfortunately that tailwind config was a bit complicated and many of the color animations, to not say all of them were impossible to follow until now.
I will continue learning from you, of course but if you may have thought about it, maybe you could have a video of common issues that happen to people since I saw online this happens to many of us.
Thanks much dude!
Never thought I'd learn Forms in React from Floki. Thanks!
Thank you for the tutorial, it was really amazing. As someone just starting React, I really do appreciate this. Massive props!
Ed, amazing tut. Exactly what I was looking for as a beginner. Much love!
🌟DM for help/support👆
You don't know Ed what good you are doing to our whole web developer brethren. Bless You.
@user-of8gq4tf4l Why you do this?
thanks Ed, would you kindly do a Redux-toolkit with RTK-query tutorial.Thank again.
you can use
yarn create next-app --example with-tailwindcss
this will do all of your work
eith tailwind setup
Maaaan such a nice vibe from you)) thanks for the mood and knowledge sharing!!!!
Anytime I think about you...BOOM you post😁... loving the consistency
A great guide for me as a starter in react. Thanks , subscribing to your channel with much ❤
So use Formik with Yup for small forms or use react-hook-forms and Zod for bigger more complex forms since react-hook-forms minimises the amount of re-renders when interacting with the form for better performance :-)
Thank you for including accessibility 🙏
This tutorial was so thoroughly satisfying. Thank you!
🌟DM for help/support👆
I hope your health is fine. Bless you brother.
All these cool libs make me feel that we're in the golden era of coding, yes we need to get familiar with a lot of stuff but it does make our life ridiculously easier.
Thanks for making react easy for us.
You resemble the guy from CameraConspiracies a lot
This tutorial is Amazing! I love formik!
you are so calm
Thank you for the tutorial.
I've saved it to my playlist I'll visit it
Formik and Yup are cool and whatever, but I was looking for a vanilla JS tutorial on forms. Great tutorial nevertheless my friend. Thanks.
Hey Ed, What extensions are you rocking. Please share or maybe you have a video for it
I'm gorgeous today
You are a legend, thanks for this great content, just a quick question, how could you send the information collected by the form to send to my prisma backend to save that data?
Another great tutorial. Thanks so much !
great video. I prefer react-hook-form though
Hi! Great tutorial!
Which extension do you use?
38:15 Instead of writing a tertiary operator, a ? a : b can be written as a || b. And a ? b : "" can be written as a && b.
Hey. I am confused. The UI & UX is great but the form data is not really getting submitted anywhere.
The user data is getting saved yes but NOT sent to any email address (recipient) of our choice.
How to do that part?
There are separate libraries for doing so. If you are building a contact form where the users can contact you, services like web3forms and formspree come in handy (both are free). On the other hand, if you want to send an email to someone using this, there are libraries such as Nodemailer that can be used to do so. [SORRY FOR BEING 6 MONTHS LATE💀]
Hello Ed, may i know what font do you use?
How did you add the emoji after the Let's get started heading ??
so what's front-end developer job? not only designing pages? should also do "validations" on forms? that is not back end's job?
well... yes, Front end also involves JavaScript which is a little more complicated than CSS and HTML.
@@Mwtorres89 where i can Find what front end dev do?
@@Davyyd1 front end mentor
Thanks Ed you rock
make a tutorial on api integration and backend intraction
Formvalidation is supereasy in plain HTML actually. Use the pattern-tag, like pattern="[a-z]{1,15}" (normal regex) and then you just make a HTMLSelectElement.checkValidity() . And checkValidity() also checks for min and maxlength etc ofcourse. And thanks to css you can make the fields not meeting the critiera have a red border automaticly without a single of extra code. (yes I hate frameworks and libraries :D
i think the main issue with doing it with plain html is that anyone with little programming knowledge could easily inspect the website and edit the html code
@@loogie5679 Exactly my thoughts. A complete validation should be both at the client and server side.
@@loogie5679 its definitely easier that way but quite hacky, forms and validation are a pain in general
Hell no
@@philipjamesajagabos2519 yes agree that it should be on server side aswell. But funny thing is that when I check code I often see people use jquery for form validation on clientside.
Very helpful video!
Hello! I'm using Vite instead of Next js, I'm looking for something similar to the next js push, do you guys suggest anything to validate the form and send the information in the same button?
Really helpful !
Thanks Ed, that is what I need 😊
Thanks sir, Thanks from india :)
How do i use formik submit after validation to go to the next page? If i use NavLink it would go through but ignore all form validation. Though I used npx create react app. Curious
Would you cover react-forms on the tanstack?
What if the dropdown was using fetched data from an api, instead of a hardcoded json object? How would I pass that data from the api into my dropdown using formik?
Cheers Ed, you da man!
So first you use good design principles and you get rid of all that style="margin:10px; color: black;" and then use a good CSS framework like Tailwind, using modern stuff like class="margin10px colorBlack". Is that how it works? :D
please what is the emoji plugin you used.. thank you
This is incredible! I had a lesson to learn from everything you did.
Thank you.
🌟DM for help/support👆
Hmmmm, I'm a noob, learning react and tailwind atm. Can i use this tutorial or are there next.js specific things in here?
🌟DM for help/support👆
Oh, also, can you do a drag and drop in Next 13? Thanks.
Initial 24 mins is HTML-CSS, skip to 24 for react.
30 minutes I was going insane because the Country field had the label of Email.....
Good evening, I have an error in the code focus:border-teal-500 focus:ring-teal-500 is not getting the focus with the color correctly. The border is obtained but not the focus. What could it be...?
🌟DM for help/support👆
Hello bro! I have a problem please help when I import useRouter from next/router shows blank page white screen in console says Uncaught ReferenceError: process is has-base-path.ts:3 not defined
Helluuo
me too, please if it worked for you let me know how to fix it
How would this work in Next 13? Thanks.
27:46 useForm
Great
Why does this project need Next?
nice tut but the Tailwind css config often didn't work,
"let go to the tutorial" 🤔
So wait, it's next not react?
like your content :)
8:40
formik is slow actually
react-hook-form is faster and more popular
Rhf?
@@Sifsif__ma react-hook-form, i mean
is it a react forms tutorial or a css tutorial? :/
u said react but u used next js , i had to change the video , sorry u disapointed
Finally first comment 😂
First 😊
Bruh, start using typescript. Javascript is pretty much dead nowadays.
why introduce so many dependencies to your projects? you can code it easily with vanilla react/js/ts
Do not reinvent the wheel
{2023-03-05}
Hi Ed, I purchased your HTML course and I am enjoying it, but I wanted to let you know this link: drive.google.com/drive/folders/15uNyS0zwm3L_sjqX-WUiFdFCVDBet3PI?usp=sharing is broken. It's under the Full Course Download I hope you fix it soon. Thanks,
Great