Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #26

Aug 15, 2023

Designing the /contact FrontEnd Page | NextJs Tutorial for Beginners #26

All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here:    / @programmingwithharry
►Instagram: www.instagram.com/codewithharry

python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist:    • Coding CheatSheets 🧾 by CodeWithHarry

►Learn in One Video[++]:
Python[15 Hr] -    • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] -    • Python Programming Course in Hindi (A…
Python[1 Hr] -    • Learn Python In Hindi In One Video - …
Python[2 Hr] -    • Python Tutorial In Hindi 🔥
Python[15 Min] -   • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] -    • JavaScript Tutorial
C[1.3 Hr]-   • C Programming Tutorial For Beginners:…
php[1 Hr] -    • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] -   • Php Tutorial for Beginners in Hindi w…
php[Project]-    • Login And Registration Form Using Php…
HTML[30 Min] -   • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] -   • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] -   • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] -   • How To Make a WordPress Website | Wor…
Angular[2 Hr] -   • Angular Tutorial in Hindi
Java[2.3 Hr] -   • Java tutorial in hindi 🔥
Web Scraping[1 Hr] -   • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] -   • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] -   • Numpy Tutorial in Hindi
Android Dev[12 Hr]-    • Android Development Tutorial For Begi…
Linux[1 Hr] -   • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] -   • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] -   • Git \u0026 GitHub Tutorial For Beginners I…

►Complete course [playlist]:
React -    • React Js Tutorials in Hindi
Python-   • Python Tutorials For Absolute Beginne…
OOP Python-   • Object Oriented Programming Tutorials…
Java -   • Java Tutorials For Beginners In Hindi
JavaScript-    • JavaScript Tutorials In Hindi
PHP-   • PHP Tutorials in Hindi
C-   • C Language Tutorials In Hindi
C++-   • C++ Tutorials In Hindi
Git \u0026 GitHub-   • Git and GitHub Tutorials In Hindi
Android Dev-    • Android Development Tutorials in Hindi
Python GUI-    • Python GUI: Tkinter Tutorial In Hindi…
Web Development-    • Web Development Tutorials For Beginne…
Python Django -   • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript-    • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo -   • Data Structures and Algorithms Course…

Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉

Content

0 -> We made a contact API

2.113 -> which means we have an endpoint that can accept data,

5.862 -> our so-called database which is a file system,

9.357 -> so the data goes to the database.

11.047 -> Today we'll see how we can make a frontend form

15.05 -> which will work on the basis of user input.

18.348 -> That means using this API will be facilitated in frontend.

21.533 -> Let's go to the computer screen

22.969 -> and see how we can use this API

26.662 -> to get a frontend form filled by users.

29.334 -> [MUSIC]

38.501 -> We made contact API in the last video.

40.699 -> I'll come to Hunting Coder and write yarn dev here.

46.818 -> My keyboard has a lot of dust, no worries, we'll adjust.

53.191 -> If we go to our blog, it looks like this.

56.32 -> We have to do one thing, make a contact form here.

59.166 -> Our contact API is ready.

61.166 -> To do that, first I'll add some basic styles.

65.339 -> Understand the whole development process.

67.903 -> module.css

70.524 -> I've made styles for the contact form.

73.427 -> I'll write h1 and in that, I'll write contact us.

81.714 -> Ensure that you've selected JavaScript React here.

86.281 -> And with that, of your JavaScript React is selected,

91.103 -> then you'll see emmet, that's the suggestions I can see.

95.812 -> After writing contact us, I'll put in a div

100.436 -> and see where I bring the HTML structure from.

104.214 -> You'll ask where are you going, we aren't using bootstrap,

109.092 -> why are you going to bootstrap? You'll get to know why..

112.609 -> Here I'll not go to examples, I'll go to docs

114.926 -> and here in the separate forms section,

121.723 -> I'll go to overview and the form will open.

126.855 -> I'll pick up a basic form from here, you may ask why.

131.366 -> To be honest, I'm saved from typing the whole thing.

134.833 -> Now I'll face some issues, why?

136.946 -> You'll face issues because this is react and in react,

140.978 -> there are some elements that'll cause issues like input.

143.514 -> You'll have to add a closing tag in input like this.

148.73 -> And when you want to contact someone here,

152.835 -> we'll quickly import this style

156.471 -> like we imported a style to the blog.

158.922 -> This is the API blog, I'll close all the jsons.

163.151 -> I'll open blog.js and after that,

168.565 -> I'll import my styles from contact this time?

173.358 -> Try to understand what I'm doing.

176.233 -> I'm importing styles from contact.module.css

181.732 -> so that I can add it to my div.

184.72 -> I'll write className = styles.container.

192.166 -> I'll make a container too, don't worry about it.

196.254 -> And see here contact is written, I made a from.

200.511 -> I can right-click and format document as well.

203.47 -> And if I save it, my form looks like this.

206.937 -> If I contact someone, what will I ask them for?

211.9 -> If I talk about that, I'll come to API, postcontact.js,

216.806 -> I'll see it from here.

218.806 -> Whatever json it gets, it shows it as it is.

221.596 -> In my thunder client, I'd added a body to my postcontact.

226.248 -> Name, phone, descriptions, email, it takes those 4 things.

232.48 -> So, I'll make all the 4 fields here.

234.395 -> The email field is already here.

236.677 -> I've to make one for name, phone.

239.665 -> Name here and enter your name.

245.587 -> Name, phone, description, email, I'll turn on word wrap

249.816 -> so that there's no issue, it's always good to turn it on

252.832 -> because you'll be able to see all the text I'm writing here.

256.102 -> You can see that for =name and I'll make its id name.

260.754 -> And I'll remove the text saying we'll not share your email.

264.616 -> This is name and I'll also add name = name.

271.24 -> So that I can identify it.

273.466 -> I'll do the same thing, after name it was phone,

276.905 -> then description then email.

278.651 -> After name we'll take email and then phone.

280.905 -> for = email, I'll make this email.

283.864 -> type = email, id = email, name = email.

289.786 -> And here we'll never share your email with anyone else.

293.564 -> Then here, for = phone, type = phone.

300 -> The id will be phone, it should match with this for.

305.499 -> And then I'll add a name here, name = phone.

312 -> Then I want a text area here, so I'll remove the input.

315.975 -> I'll remove this and bring text area, again from bootstrap.

320.007 -> Text area, it'll be there somewhere.

324 -> If it's not here, I'll need an example.

327.213 -> Text area, some good example of it.

334.01 -> Come on bootstrap, give me a good example.

336 -> I'm turning off dark mode.

337.492 -> This is a good example of text area.

340 -> And here comments, no not comments. What do I want?

345.724 -> I'll take this one. I am not using bootstrap anyway.

350.517 -> So, I'll replace check me out with this.

355.762 -> class = mb 3

358.834 -> I haven't used mb 3 but I'll implement it here.

364.53 -> I added textarea, class = form control,

368.025 -> and placeholder = leave a review here.

376.035 -> I'll make it write your concern here.

378.938 -> And I'll make id = desc, you may ask what that is.

383.731 -> It's the description of the text that the user wants to give.

388.186 -> Let's see what Hunting Coder looks like, not bad.

391.654 -> It didn't look amazing before anyway, it looks fine.

395.347 -> Now I want to remove this comments.

398.052 -> I don't want to label it right now.

401.209 -> I will bring this line up where it says label

405.297 -> so that I can write my concern here.

410.824 -> Elaborate your concern.

417.085 -> I'll implement styles.container after writing .container class.

423.966 -> The first thing I'm going to write in .container class is

429.295 -> margin auto and min width, sorry max width.

434.794 -> Max width will be 45 pw and margin will be auto.

439.305 -> Will it be centered? Yes, it will.

442.941 -> After that, in class = mb 3, I'll replace mb 3.

449.681 -> Replace, replace, change all occurrences.

453.797 -> I'll write mb 3 as styles.mb3.

460.368 -> And now I'll implement mb 3, I'll save it.

466.572 -> I'll write margin bottom here.

469.588 -> And 5 pixels, I know it's less but I'll increase it later.

474.833 -> I'll have to increase it a little, I'll increase this mb 3

483.915 -> and I'll increase it till it looks okay.

487.156 -> It looks fine, make margin bottom 21.

491.498 -> After doing that, what I'll do is

497.617 -> I'll give some space after email address.

499.899 -> This label says class = form control, form label sorry.

506.555 -> Form label, right-click, and change all occurrences.

510 -> I'll write it as styles.forms label

514.596 -> and I'll implement .form label in contact.

517.922 -> With this, the concerns stay separated.

520.627 -> Margin 0 px top bottom, 34 px left right

527.706 -> which I know is a lot. It didn't get applied, why?

531.794 -> I didn't save it, now it will be applied.

534.471 -> I knew it was a little too much.

536.217 -> So, I'll reduce it a little.

539.43 -> See, I'm not styling it a lot.

542.587 -> I'm not making this blog with design in mind.

546.365 -> If you want to learn design, you can go to my css course.

550.086 -> There I've made the design, I'll reload it now.

552.368 -> What's the issue? Okay, there's some issue here.

555.186 -> I'll have to replace class with className =

558.964 -> so change all occurrences of class =.

562.318 -> I'll have to change it to className =.

567.873 -> Where it's label for, in react we replace it with html for.

572.92 -> So let me change all occurrences of this as well.

578.757 -> There's a small mix up so I'll have to do this.

584.115 -> Are you having fun? You should. Reload, all errors vanish.

589.557 -> I know the form doesn't look good

591.389 -> but still, elaborate your concern and you've to write your concern here.

595.608 -> I'll write name Harry, email [email protected],

599.244 -> password something, elaborate your concern.

601.893 -> Suppose I write yu.

603.667 -> If I click on submit, my form should get submitted.

608.291 -> But nothing will happen, I'll show you.

610.912 -> I've written type email in enter your name by mistake.

613.956 -> I'll have to make type = text and it's okay now.

617.818 -> Even after that, if I submit my form now, see this.

621.37 -> It shows get request so the first thing I need to do is

625.204 -> I'll have to write a function to submit this.

628.22 -> See how it's done, watch what I do.

632.167 -> I'll make a function called handleSubmit

637.553 -> which is an arrow function.

639.384 -> I'll write e here and e.preventDefault here.

644.911 -> This will ensure the page doesn't reload,

646.544 -> the default state of form submission won't get triggered.

651.648 -> I'll write onSubmit = handleSubmit here.

656.159 -> This function will run. I'll make 3 state variables now.

659.51 -> useStateSnippet, one will be name, name, setname.

665.178 -> I'll make an email here.

670.225 -> One will be phone and the next will be desc.

675.611 -> Name, email, phone, desc, all 4 are made.

680.151 -> Now see what happens.

681.953 -> I'll remove second from everywhere.

687.226 -> I've made 4 state variables.

689.395 -> I'll write the value of this input as value =

697.856 -> name, its value is name

700.844 -> and what'll be the value for phone? Email for email.

709.87 -> Phone for phone. I'll write value = phone.

715.284 -> For the text area, I'll write value = desc.

722.335 -> So they'll have values now.

723.545 -> I'll make their default values blank.

727.012 -> I'll save it, there's no error, right?

729.012 -> There's an error, why won't there be?

731.746 -> React is there like police, make a mistake, it'll show error.

736.991 -> See this, I've fixed the error.

738.991 -> Now if I try to submit the form, one thing isn't happening.

743.474 -> At least the page isn't reloading, which is good news.

746.885 -> But I want that as, what happened now?

751.199 -> onChange handler, okay I'll fix that as well.

753.594 -> Basically what's happening is, whenever I start typing

756.892 -> I won't be able to type, can you see it?

759.231 -> These are the basics of react by the way.

762.162 -> Wherever I've written value =

767.02 -> I'll write onChange = handleChange

771.023 -> which will be a function, I'll tell you how it runs.

774 -> I'll copy it and do this, value =, onChange = handleChange

780.74 -> The same here, what did I do?

783.728 -> I have to copy paste onChange = handleChange.

787.251 -> Why did I duplicate this input?

790.69 -> I made a mistake, I copied the wrong thing.

796.584 -> Copy, paste, paste, paste.

802.139 -> If I make mistakes in this, how will it work?

804.59 -> handleChange is not defined, I know that.

806.59 -> I'll replicate this and implement handleChange.

813.161 -> handleChange = e and here I'll write console.log e

818.261 -> and along with that, change.

821.841 -> Now see what I'll do, first I'll reload this.

824.546 -> If I write something, there's an event here.

828.944 -> Let's see what this event has.

831.48 -> There are many things but our interest is in event.target.

837.12 -> So if I write event.target.value here,

841.885 -> or there are many other things in event.target.

845.493 -> such as event.target.name.

850.061 -> What I'll do is, if event.target.name = phone,

860.751 -> then setphone e.value.

872.654 -> So nothing is happening here when I change values

876 -> which is a problem.

878 -> This is because I'll have to put all the functions here.

883.358 -> I defined state, after that.

885.922 -> So this setphone will start being used.

889.728 -> If I write something here, this changes, see?

892.123 -> If I reload and change something, there's an error.

897.17 -> It says a component is changing a controlled input to be uncontrolled.

900.129 -> This is likely caused by a value changing from a defined to undefined.

903.54 -> I should've written e.target.value, I'll do the same.

908.362 -> In the remaining, I'll write else if, again and once gain.

916.089 -> And here, other than phone I have email

920.12 -> so I'll make it set email.

923.023 -> setphone and setemail done, I'll write setdesc now.

929.171 -> After that, I forgot setname.

935.203 -> After this, we'll save it and see if the application works.

939.799 -> I'll reload and hopefully, our error will end

943.403 -> and nothing is happening as I type.

945.403 -> I can only type in password, nowhere else

948.532 -> which is a problem.

949.544 -> I did setphone, setemail.

952.391 -> Do this if name is email, do that for name desc

957.862 -> otherwise, make it setname, oh I didn't save this file.

961.301 -> I'll reload and I'm able to change everything.

965.756 -> But I'm not able to change this, why so?

971.763 -> I've written value = desc in textarea,

974.779 -> in fact, I'll not write the value like this, I'll show you what.

979.036 -> Instead of the value, I'll make textarea's content desc.

984.196 -> Its content is its value.

987.24 -> I'll write it as desc and then e.target.name.

991.638 -> If desc then I'll write setdesc e.target.Innertext.

1002 -> So you can see, I can write inside it.

1004.621 -> If I write 1234 in it and click submit, I'll [email protected] here

1013.841 -> and another thing, my handleSubmit.

1019.368 -> When my form is submitted, I'll lock 4 things.

1024.801 -> phone, name, email, desc.

1030.582 -> Before submission, I want to see if all values are set.

1034.472 -> I submitted, 3 1 [email protected].

1038.137 -> The value not setting is 4, I'll have to see to that.

1043.1 -> Why isn't it setting? My textarea value isn't setting.

1047.188 -> I have written desc, onChange = this, textarea, okay.

1053.731 -> Write your concern here, desc is here.

1056.747 -> I've taken its inner text.

1059.678 -> Whenever someone changes textarea, setdesc as this.

1065.431 -> So here setdesc, I can do one thing, I'll do this

1070.309 -> and I'll write value = desc and I'll remove this from here.

1080.573 -> I'll save it and nothing happens when I type

1084.068 -> because I've taken inner text, I'll make it value again.

1090.131 -> If I try to change it now, it doesn't change.

1093.796 -> I'm just wondering why this isn't working.

1095.796 -> Okay, I haven't written name = desc which I should have.

1100.984 -> I'll write name=desc and reload it.

1105.693 -> I'll write 1,2,3, and 4 here.

1110.768 -> I'll submit it and all my values are here.

1113.812 -> So that can be done, now the next step is when I submit,

1118.436 -> I want my form to actually submit the data here

1124.809 -> that is, the jsons I've made like contact data,

1129.01 -> I want my data to be there.

1132.759 -> The first thing I'll do for this is that

1137.806 -> I'll have to talk to my API.

1142.769 -> That means I need a fetch API request, if I write it here

1149.34 -> I might find something, fetch api post request example.

1154.133 -> See, here's a post request implementation.

1157.205 -> It would be nice if I could find a simple example.

1161.519 -> Here fetch to post JSON encoded data, let's try it.

1166.284 -> So they've given data = this

1170.259 -> and I'll directly implement this in my handleSubmit.

1176.35 -> So our handleSubmit, I'll right-click, format document.

1180.748 -> So our handleSubmit, that'll do to our URL or API.

1186.472 -> I'll close this.

1188.952 -> I'll copy paste this and post request application JSON

1193.065 -> and our data, what will it be?

1195.573 -> Our data will be phone, name, email, desc.

1200.733 -> FYI, this will be an object where there'll be a corresponding value for phone key,

1205.837 -> a name value corresponding to name key,

1207.95 -> email value for email key and so on for desc.

1212.21 -> After all this, it should get submitted, let's try this out.

1218.471 -> Let's try this out, submit and on submitting,

1224.252 -> syntax error, unexpected end of JSON inout.

1229.215 -> JSON.stringify data, unexpected end of JSON input, why?

1238.184 -> Where is this error? response.json.

1241.03 -> So maybe my json is not giving a response to API.

1245.287 -> I'll make it response.text and if I submit it now,

1250.251 -> so see this shows success.

1252.336 -> Did a json file get created in contact data?

1254.646 -> Indeed yes, it did.

1257.069 -> I'll do another thing, as soon as my form is submitted,

1261.778 -> I know it's a very dirty way to do this, I'll show an alert.

1265.866 -> I'll write alert, thanks for contacting us.

1276.105 -> And I'll do another thing, I'll reset all the values.

1281.096 -> Here, I'll write setphone blank.

1285.889 -> I'll do the same for the other values.

1289.751 -> setname, setdesc,

1300.724 -> what else is left? Nmae, phone, email.

1304.784 -> When I submit this form, click on ok, all this goes blank.

1309.295 -> We'll never share your email with anyone else,

1311.295 -> style it according to you.

1314.113 -> I'll check if there's an error in the console by reloading.

1317.608 -> I'll submit the form properly, name, email,

1322.373 -> there's no password, there's phone.

1324.373 -> I put in 8788, remember that.

1328.122 -> Hi this is me, submit, okay.

1333.649 -> Let's see if the data I submitted is here.

1337.681 -> Yes, name, email, phone, dsc, all 4 are submitted.

1342.7 -> Now our Hunting Coder website lacks only in design.

1346.76 -> The design is not good but the contact form is working.

1350.566 -> Blog works too and images smiley.png image is missing.

1360.1 -> No worries, I'm going to change the content anyway.

1362.975 -> If I go to home, our home page is also fine.

1365.398 -> The about page needs a little work but that'll be done.

1370.473 -> Blog works well, I hope you're having fun in this course.

1373.771 -> If you haven't accessed the Next.js playlist, do it.

1377.154 -> Do it right now and also bookmark it.

1379.352 -> Because a lot is going to happen here.

1381.662 -> That's all for this video.

1383.154 -> Thank you so much guys for watching this video

1385.295 -> and I will see you next time.

1387.577 -> [MUSIC]

Source: https://www.youtube.com/watch?v=jp2lI31UUtw