1
00:00:02,000 --> 00:00:04,000
So let's work on this contact page.

2
00:00:04,000 --> 00:00:07,000
There, I of course need to return some JSX code,

3
00:00:07,000 --> 00:00:09,000
but I'll again keep it simple

4
00:00:09,000 --> 00:00:11,000
and create a separate component

5
00:00:11,000 --> 00:00:15,000
which holds the actual content of this page.

6
00:00:15,000 --> 00:00:17,000
For this, in the components folder,

7
00:00:17,000 --> 00:00:20,000
I'll add a new subfolder, contact.

8
00:00:20,000 --> 00:00:24,000
And in there, I'll add a contact-form JS file,

9
00:00:24,000 --> 00:00:27,000
and attached you also find a styling file

10
00:00:27,000 --> 00:00:29,000
for this contact form page,

11
00:00:29,000 --> 00:00:32,000
for this contact form component, I mean.

12
00:00:32,000 --> 00:00:35,000
You find a contact form module CSS file,

13
00:00:35,000 --> 00:00:37,000
which you should add to that folder.

14
00:00:38,000 --> 00:00:40,000
Then, in contact form JS,

15
00:00:40,000 --> 00:00:44,000
we create our contact form functional component,

16
00:00:44,000 --> 00:00:47,000
just as we are used to, like this.

17
00:00:47,000 --> 00:00:50,000
And we can also import the styles already.

18
00:00:50,000 --> 00:00:55,000
Import classes from ./contact-form.module.css

19
00:00:59,000 --> 00:01:02,000
and then return our page content here.

20
00:01:02,000 --> 00:01:05,000
So return a section with a class name

21
00:01:05,000 --> 00:01:08,000
of "classes.contact" here.

22
00:01:08,000 --> 00:01:10,000
And then in that section, let's say a H1,

23
00:01:10,000 --> 00:01:13,000
not H2, but H1 tag,

24
00:01:13,000 --> 00:01:17,000
where we say something like, "How can I help you?"

25
00:01:17,000 --> 00:01:21,000
And then below that, the actual form.

26
00:01:21,000 --> 00:01:25,000
Now, that form will receive a class of "form".

27
00:01:25,000 --> 00:01:29,000
And then in there I came up with a certain structure

28
00:01:29,000 --> 00:01:32,000
which fits the styles I provided to you,

29
00:01:32,000 --> 00:01:37,000
where we have a div with a class of "controls".

30
00:01:38,000 --> 00:01:40,000
So plural.

31
00:01:40,000 --> 00:01:44,000
And in there, another div with a single form control

32
00:01:44,000 --> 00:01:47,000
and hence a class of "control".

33
00:01:47,000 --> 00:01:52,000
And then in there, a label with the htmlFor prop

34
00:01:52,000 --> 00:01:56,000
set to "email", where I say, "Your Email",

35
00:01:56,000 --> 00:01:59,000
because we're prompting the user for an email address.

36
00:01:59,000 --> 00:02:03,000
And below that, a input of type "email"

37
00:02:03,000 --> 00:02:07,000
with an ID of "email", which is required, like this.

38
00:02:08,000 --> 00:02:12,000
And then I'll replicate this control div here

39
00:02:12,000 --> 00:02:15,000
inside of that controls div still.

40
00:02:15,000 --> 00:02:19,000
So the two control divs are side by side here.

41
00:02:19,000 --> 00:02:21,000
And then here we have the name.

42
00:02:22,000 --> 00:02:26,000
And we change htmlFor to "name" and, whoops,

43
00:02:26,000 --> 00:02:29,000
and the ID to "name".

44
00:02:29,000 --> 00:02:33,000
And it's still required, but the type is set to "text".

45
00:02:33,000 --> 00:02:36,000
And then below that controls div,

46
00:02:36,000 --> 00:02:39,000
so not inside of it but below it,

47
00:02:39,000 --> 00:02:44,000
I'll add another div with a class name of "classes.control",

48
00:02:44,000 --> 00:02:47,000
so singular again,

49
00:02:47,000 --> 00:02:52,000
with another label with a htmlFor prop set to "message",

50
00:02:52,000 --> 00:02:55,000
where we say, "Your Message".

51
00:02:55,000 --> 00:02:59,000
And below that, a text area with an ID of "message"

52
00:02:59,000 --> 00:03:04,000
and rows set to "5", like this.

53
00:03:04,000 --> 00:03:07,000
And then below that, another div,

54
00:03:08,000 --> 00:03:11,000
where I set the class to "actions"

55
00:03:11,000 --> 00:03:14,000
where I wanna have my submit button.

56
00:03:14,000 --> 00:03:18,000
So a simple button where I say, "Send Message".

57
00:03:18,000 --> 00:03:19,000
That's my form here.

58
00:03:21,000 --> 00:03:24,000
Now we can use that in the contact page

59
00:03:24,000 --> 00:03:28,000
and output ContactForm like this.

60
00:03:28,000 --> 00:03:30,000
Make sure to import it, of course.

61
00:03:31,000 --> 00:03:34,000
And if you save all of that and reload that contact page,

62
00:03:34,000 --> 00:03:37,000
you should see that contact form here.

63
00:03:37,000 --> 00:03:39,000
Now, that's a basic form.

64
00:03:39,000 --> 00:03:43,000
The goal now is that when we send our form,

65
00:03:43,000 --> 00:03:46,000
we send it to an API route,

66
00:03:46,000 --> 00:03:49,000
and then there, we store it in a database.

67
00:03:49,000 --> 00:03:52,000
We don't directly talk to a database, as we learned,

68
00:03:52,000 --> 00:03:56,000
because if we would do so, if we would add code

69
00:03:56,000 --> 00:03:59,000
for talking to a database in the contact form component,

70
00:03:59,000 --> 00:04:03,000
then we would have to put our database credentials

71
00:04:03,000 --> 00:04:05,000
into this component as well.

72
00:04:05,000 --> 00:04:08,000
And we don't wanna do that for security reasons.

73
00:04:09,000 --> 00:04:12,000
Hence, we'll do it the other way and add our API route

74
00:04:12,000 --> 00:04:16,000
plus the code to talk to that API route in the next lecture.