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 :-)
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💀]
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
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?
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.
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?
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?
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
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.
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
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 ❤️
This was super helpful :D The formik documentation is clear too, but i prefer when this is explained in 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!
Never thought I'd learn Forms in React from Floki. Thanks!
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 :-)
Ed, amazing tut. Exactly what I was looking for as a beginner. Much love!
🌟DM for help/support👆
Hey Ed, What extensions are you rocking. Please share or maybe you have a video for it
Maaaan such a nice vibe from you)) thanks for the mood and knowledge sharing!!!!
you can use
yarn create next-app --example with-tailwindcss
this will do all of your work
eith tailwind setup
Thank you for the tutorial, it was really amazing. As someone just starting React, I really do appreciate this. Massive props!
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💀]
thanks Ed, would you kindly do a Redux-toolkit with RTK-query tutorial.Thank again.
Anytime I think about you...BOOM you post😁... loving the consistency
You don't know Ed what good you are doing to our whole web developer brethren. Bless You.
@user-of8gq4tf4l Why you do this?
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
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?
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.
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?
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
Hi! Great tutorial!
Which extension do you use?
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👆
You resemble the guy from CameraConspiracies a lot
A great guide for me as a starter in react. Thanks , subscribing to your channel with much ❤
This tutorial was so thoroughly satisfying. Thank you!
🌟DM for help/support👆
Hello Ed, may i know what font do you use?
Formik and Yup are cool and whatever, but I was looking for a vanilla JS tutorial on forms. Great tutorial nevertheless my friend. Thanks.
Thank you for including accessibility 🙏
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?
This tutorial is Amazing! I love formik!
please what is the emoji plugin you used.. thank you
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
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.
I hope your health is fine. Bless you brother.
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.
How would this work in Next 13? Thanks.
Thanks for making react easy for us.
Another great tutorial. Thanks so much !
I'm gorgeous today
great video. I prefer react-hook-form though
Would you cover react-forms on the tanstack?
Thank you for the tutorial.
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
make a tutorial on api integration and backend intraction
I've saved it to my playlist I'll visit it
you are so calm
Very helpful video!
Oh, also, can you do a drag and drop in Next 13? Thanks.
Thanks Ed, that is what I need 😊
Thanks Ed you rock
Really helpful !
Cheers Ed, you da man!
Thanks sir, Thanks from india :)
30 minutes I was going insane because the Country field had the label of Email.....
Initial 24 mins is HTML-CSS, skip to 24 for react.
Why does this project need Next?
27:46 useForm
This is incredible! I had a lesson to learn from everything you did.
Thank you.
🌟DM for help/support👆
So wait, it's next not react?
Great
is it a react forms tutorial or a css tutorial? :/
nice tut but the Tailwind css config often didn't work,
u said react but u used next js , i had to change the video , sorry u disapointed
like your content :)
8:40
"let go to the tutorial" 🤔
formik is slow actually
react-hook-form is faster and more popular
Rhf?
@@abdousifelhak4486 react-hook-form, i mean
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