The Ultimate Guide To Forms In React Tutorial

Check out my courses to become a PRO 👇
developedbyed.com/
In today's episode we are going to cover how to make a really nice form in react using framer motion, formik and yup for form validation. I really wanted to put together a complete package and an easy go to for people who are looking to add forms inside a react project.
Get the code here ✨
github.com/developedbyed/reac...
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react

[@kove5762]

This was super helpful :D The formik documentation is clear too, but i prefer when this is explained in video

[@kingsleyzuze9949]

Thank you for the tutorial, it was really amazing. As someone just starting React, I really do appreciate this. Massive props!

[@vladislaviy]

Maaaan such a nice vibe from you)) thanks for the mood and knowledge sharing!!!!

[@junog5552]

Ed, amazing tut. Exactly what I was looking for as a beginner. Much love!

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@philipjamesajagabos2519]

A great guide for me as a starter in react. Thanks , subscribing to your channel with much ❤

[@anno96]

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 ❤️

[@BugMotoChannel]

This tutorial was so thoroughly satisfying. Thank you!

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@paulthomas1052]

Another great tutorial. Thanks so much !

[@dev_franqqi]

Anytime I think about you...BOOM you post😁... loving the consistency

[@yahayaoyinkansola8258]

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

[@misael5179]

This tutorial is Amazing! I love formik!

[@CarlosAponte-lm5le]

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!

[@Charlotte-jm3ce]

Thank you for including accessibility 🙏

[@belkocik]

Very helpful video!

[@ankushanand]

Hey Ed, What extensions are you rocking. Please share or maybe you have a video for it

[@blue_berry_pie64]

Thanks Ed, that is what I need 😊

[@alifyout]

You don't know Ed what good you are doing to our whole web developer brethren. Bless You.

[@tamalbiswas7593]

@user-of8gq4tf4l Why you do this?

[@thatsharepointdev]

Really helpful !

[@indrasen9617]

Thanks for making react easy for us.

[@lucassantos7623]

Thank you for the tutorial.

[@JoaoPedro-kp7zd]

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?

[@davique0]

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?

[@reflectivereveriemingle]

Thanks Ed you rock

[@johnurena2863]

Hi! Great tutorial! Which extension do you use?

[@newtojillo]

I've saved it to my playlist I'll visit it

[@oladapotaiwo3383]

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

[@mohaiminulislamshishir9361]

How did you add the emoji after the Let's get started heading ??

[@CarlWicker]

Cheers Ed, you da man!

[@bonfacenjuguna214]

thanks Ed, would you kindly do a Redux-toolkit with RTK-query tutorial.Thank again.

[@ChArham-bs1ne]

Formik and Yup are cool and whatever, but I was looking for a vanilla JS tutorial on forms. Great tutorial nevertheless my friend. Thanks.

[@haiderimam8977]

I hope your health is fine. Bless you brother.

[@chrisstucker1813]

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 :-)

[@mochamadhadyonosandi2085]

Hello Ed, may i know what font do you use?

[@koladechris]

This is incredible! I had a lesson to learn from everything you did. Thank you.

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@MarlonEnglemam]

great video. I prefer react-hook-form though

[@blacklight8318]

you can use yarn create next-app --example with-tailwindcss this will do all of your work eith tailwind setup

[@sibamuns]

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?

[@elhaambasheerch7058]

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.

[@damidelOK]

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

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@user-to9kf9xo2h]

please what is the emoji plugin you used.. thank you

[@manuelgoncalves4026]

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?

[@somerandomdude-hoyeaaaaa]

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💀]

[@thegauravsoni]

Thanks sir, Thanks from india :)

[@soltiscd]

Would you cover react-forms on the tanstack?

[@emmanuelsheshi961]

you are so calm

[@prathamshenoy9840]

You resemble the guy from CameraConspiracies a lot

[@thegauravsoni]

make a tutorial on api integration and backend intraction

[@plussminuss]

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

[@plussminuss]

Helluuo

[@jasmimounna]

me too, please if it worked for you let me know how to fix it

[@nikkoazz]

Hmmmm, I'm a noob, learning react and tailwind atm. Can i use this tutorial or are there next.js specific things in here?

[@Joshdevbox_my_Teleqram_id]

🌟DM for help/support👆

[@cyberducc]

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.

[@AndrewTSq]

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

[@loogie5679]

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]

@@loogie5679 Exactly my thoughts. A complete validation should be both at the client and server side.

[@kinstar]

@@loogie5679 its definitely easier that way but quite hacky, forms and validation are a pain in general

[@oscare123]

Hell no

[@AndrewTSq]

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

[@prasankumar4306]

Great

[@Davyyd1]

so what's front-end developer job? not only designing pages? should also do "validations" on forms? that is not back end's job?

[@Mwtorres89]

well... yes, Front end also involves JavaScript which is a little more complicated than CSS and HTML.

[@Davyyd1]

@@Mwtorres89 where i can Find what front end dev do?

[@Mwtorres89]

@@Davyyd1 front end mentor

[@EricOnYouTube]

Oh, also, can you do a drag and drop in Next 13? Thanks.

[@EricOnYouTube]

How would this work in Next 13? Thanks.

[@TobyWild]

30 minutes I was going insane because the Country field had the label of Email.....

[@Siderite]

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

[@VindexTOS]

27:46 useForm

[@TheAshokWB]

I'm gorgeous today

[@shivaansh98]

Initial 24 mins is HTML-CSS, skip to 24 for react.

[@Elderny]

like your content :)

[@javeriazaheer6970]

8:40

[@aliguliyev2122]

First 😊

[@beconfident5482]

Finally first comment 😂

[@darrenchen8912]

nice tut but the Tailwind css config often didn't work,

[@adamdurrant]

Why does this project need Next?

[@adamjamiu6764]

"let go to the tutorial" 🤔

[@simisanoo5382]

So wait, it's next not react?

[@cristianespinoza1438]

is it a react forms tutorial or a css tutorial? :/

[@user-vp7ht2fg1u]

formik is slow actually react-hook-form is faster and more popular

[@abdousifelhak4486]

Rhf?

[@user-vp7ht2fg1u]

@@abdousifelhak4486 react-hook-form, i mean

[@zuber696]

u said react but u used next js , i had to change the video , sorry u disapointed

[@Zagoorland]

Bruh, start using typescript. Javascript is pretty much dead nowadays.

[@sdmit2000]

why introduce so many dependencies to your projects? you can code it easily with vanilla react/js/ts

[@abdousifelhak4486]

Do not reinvent the wheel

[@Pareshbpatel]

{2023-03-05}

[@mariomacari4637]

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,

[@_tanzil_]

Great