1
00:00:03,690 --> 00:00:10,230
So in this lesson, we're finalizing our input, Ajax's input form, supplying some styling to it and

2
00:00:10,230 --> 00:00:12,540
also just additional functionality.

3
00:00:12,750 --> 00:00:18,350
So this is the form that we have so far and it's going to have the error messages here.

4
00:00:18,660 --> 00:00:23,180
So name needs to be more than five.

5
00:00:23,190 --> 00:00:28,400
I'll just do a quick refresh, not a valid email address.

6
00:00:28,830 --> 00:00:31,800
So adding and make sure it's a valid email address.

7
00:00:31,920 --> 00:00:36,240
And now it write sending one, sending the message and clear the form data.

8
00:00:36,600 --> 00:00:43,200
So when I go over to my email there, I've got the message that was just sent to me and as well we're

9
00:00:43,200 --> 00:00:45,240
tracking it into our spreadsheet.

10
00:00:45,480 --> 00:00:49,990
So whatever data that we've got within the input field that's coming into the spreadsheet.

11
00:00:50,280 --> 00:00:55,500
And then also we'll also clear out your default values of the form content.

12
00:00:55,740 --> 00:00:58,160
So I just usually like to have them for testing.

13
00:00:58,620 --> 00:01:06,810
So once it's ready and once your application is ready, just clear out all of the form information and

14
00:01:06,810 --> 00:01:10,980
test it out a few times, make sure that it's working as expected.

15
00:01:10,990 --> 00:01:14,580
So there's a name, hello, world to Hello, World three.

16
00:01:14,820 --> 00:01:16,530
And here's our user.

17
00:01:16,530 --> 00:01:17,940
How the world to in the message.

18
00:01:17,940 --> 00:01:18,740
Hello, World three.

19
00:01:19,020 --> 00:01:27,810
So everything is working as expected and we're returning back the submitting the form contents within

20
00:01:27,810 --> 00:01:33,990
a JSON format and as well we're picking it up from the server side and then returning that information

21
00:01:33,990 --> 00:01:34,420
right back.

22
00:01:37,590 --> 00:01:46,830
So we've got our main contact form here and we can send content over to the server and that gets emailed

23
00:01:46,830 --> 00:01:48,330
to our email account.

24
00:01:48,360 --> 00:01:53,790
So let's do a quick test and you might want to test this through a few times just to make sure that

25
00:01:53,790 --> 00:01:58,230
everything is working as expected and that you're getting the emails.

26
00:01:58,230 --> 00:02:03,480
And if you're not getting the email saying you can go to sent and check to see if the emails are being

27
00:02:03,480 --> 00:02:04,680
sent from the account.

28
00:02:04,920 --> 00:02:07,740
And then as well, you can also go into all emails.

29
00:02:08,610 --> 00:02:13,770
They might sometimes they do get flight spam and then automatically removed to spam.

30
00:02:13,950 --> 00:02:20,520
So you want to make sure that the emails are actually coming in and you can then finalize the application.

31
00:02:20,700 --> 00:02:23,900
So to add some styling to the input fields.

32
00:02:24,330 --> 00:02:32,820
So for the input fields themselves, set it up as display and block so they each get their own line

33
00:02:32,820 --> 00:02:36,210
of code and sit with to 80 percent.

34
00:02:38,040 --> 00:02:41,190
And I'm actually going to apply for the main container.

35
00:02:44,430 --> 00:02:50,190
And this one I'm going to set to with 80 percent and then center that main container so we don't have

36
00:02:50,190 --> 00:02:52,940
to Sentara each one of the fields itself.

37
00:02:55,540 --> 00:03:00,640
So at the margin to order so it automatically centers on.

38
00:03:03,540 --> 00:03:07,950
And the input field with sort of to whatever.

39
00:03:07,990 --> 00:03:14,670
One hundred percent of the available spaces and this is also applied to text area so that we get both

40
00:03:14,670 --> 00:03:16,050
of them being applied there.

41
00:03:17,160 --> 00:03:20,130
Let's also add some margin between them.

42
00:03:21,720 --> 00:03:33,110
So top and bottom margin and that one can just be a regular font size.

43
00:03:33,120 --> 00:03:40,260
One point he just makes it slightly larger and then also for the main container.

44
00:03:43,170 --> 00:03:44,660
Woodside background.

45
00:03:47,350 --> 00:03:50,490
So other states background color to it.

46
00:03:53,720 --> 00:03:55,820
And also do some padding

47
00:03:59,270 --> 00:04:05,540
and also do a border radius, so that's slightly rounded, save that.

48
00:04:11,860 --> 00:04:19,600
And I'm also going to do a border radius to the fields and just a slight rounding of the fields.

49
00:04:24,540 --> 00:04:32,100
And also maybe a little bit of padding, so it's spaced slightly, a little bit more for the button

50
00:04:32,100 --> 00:04:36,870
itself, and that actually is going to be input type button.

51
00:04:37,170 --> 00:04:39,660
So let's select the button directly.

52
00:04:42,040 --> 00:04:44,230
So that's input type submit.

53
00:04:46,780 --> 00:04:52,630
And you can always do a square bracket in order to the selection, and you can also use this with an

54
00:04:52,780 --> 00:04:53,690
Querrey selector.

55
00:04:54,010 --> 00:04:55,690
So this is selecting the button.

56
00:04:58,350 --> 00:05:04,410
So maybe add a background color and I'll do a black and white type scheme

57
00:05:07,140 --> 00:05:20,280
and set the color to be white, so there's their sun message button and when we hover over it, so do

58
00:05:20,280 --> 00:05:21,420
the pseudo class.

59
00:05:23,070 --> 00:05:25,320
And I usually like to set the opacity.

60
00:05:26,250 --> 00:05:29,430
So there's that hover type effect to the button.

61
00:05:29,800 --> 00:05:36,510
You could also update the background color and say, well, let's add the cursor to your pointer.

62
00:05:44,130 --> 00:05:52,050
And we should also for the message area, so that's where we're getting any of the errors being output

63
00:05:53,040 --> 00:05:54,430
into the output area.

64
00:05:55,110 --> 00:05:56,870
So let's update the output area.

65
00:06:00,210 --> 00:06:03,010
So this is where all of our error messages will go.

66
00:06:04,500 --> 00:06:10,770
And let's do a background color of white and a bunch of padding to it.

67
00:06:10,800 --> 00:06:17,010
Twenty five pics and text online so you can send her a line.

68
00:06:17,010 --> 00:06:20,760
The text also to border.

69
00:06:23,950 --> 00:06:29,050
And I'll do a solid black border or maybe we'll do a solid red border.

70
00:06:33,530 --> 00:06:41,600
So there's our output field and also let's by default, we'll take output and apply the style.

71
00:06:45,310 --> 00:06:54,770
Of display and set that to none and only when we want to output the message that we want to show it.

72
00:06:56,620 --> 00:07:01,090
So just hide that and then we'll want to output a message.

73
00:07:02,770 --> 00:07:05,400
And that's being done over here within the output.

74
00:07:06,730 --> 00:07:12,160
So have the output display and turn it back to block.

75
00:07:14,360 --> 00:07:15,380
So save that.

76
00:07:17,450 --> 00:07:20,960
And so now if we get any content in there.

77
00:07:25,440 --> 00:07:35,180
And Ford family, in addition, we can wrap this with Divx and then apply styling to the d'Hiv as well

78
00:07:36,690 --> 00:07:47,250
and then close the diff so that way we can have some spacing between the ears so the output and any

79
00:07:47,250 --> 00:07:49,200
device that are within output.

80
00:07:51,090 --> 00:07:52,500
So just some margin.

81
00:08:05,420 --> 00:08:12,770
So it shows up as the message there and you can customize this as needed.

82
00:08:23,610 --> 00:08:30,570
So we also once we submit the form and we get a response back, we want to clear the form contents.

83
00:08:35,440 --> 00:08:41,520
So just as we loop through all of the four elements, we can clear the contents contained within them.

84
00:08:44,930 --> 00:08:47,270
And we'll just create a function in order to handle that.

85
00:08:48,870 --> 00:08:51,120
So function clear form.

86
00:08:55,050 --> 00:09:00,300
And that's just going to be selecting all of the form elements and the same way that we loop through

87
00:09:00,300 --> 00:09:03,860
each one of these, we're just going to set the value.

88
00:09:06,090 --> 00:09:06,900
So take the.

89
00:09:09,170 --> 00:09:17,630
Elements with an index value of eye and value and clear all the values.

90
00:09:20,930 --> 00:09:28,000
So run the function, if we're successfully returning back data, then we can clear the form.

91
00:09:29,820 --> 00:09:34,410
So that clears out all of the form contents and the one that we actually don't want to clear out is

92
00:09:34,410 --> 00:09:37,090
the one that's got the name of submit.

93
00:09:39,900 --> 00:09:55,160
So if elements I name is not equal to submit and if it is, then we want to leave that content.

94
00:09:57,330 --> 00:09:59,910
And actually, it should be a type of summit.

95
00:10:01,340 --> 00:10:02,360
Because we don't have the.

96
00:10:08,910 --> 00:10:15,900
So the same way as we did it before, where if the elements I.

97
00:10:19,110 --> 00:10:23,160
Attribute type is not equal to submit.

98
00:10:24,560 --> 00:10:30,270
Then we can clear the value, so that will clear out all the fields.

99
00:10:33,380 --> 00:10:43,580
In addition, we're also going to reset the output and display that to none and within here when we

100
00:10:43,580 --> 00:10:44,960
do submit the form.

101
00:10:46,760 --> 00:10:56,960
So display it as block and then I would put in our HTML is going to say sending.

102
00:10:59,720 --> 00:11:08,240
And then once we submit it and we want to do a display none, which is also clear the form here at this

103
00:11:08,240 --> 00:11:08,540
point.

104
00:11:11,480 --> 00:11:17,230
So once we get a valid email address, send the form it's sending and then that will all disappear.

105
00:11:18,320 --> 00:11:22,550
So that will actually send the content over to the server side.

106
00:11:22,580 --> 00:11:27,890
So whatever the input field information that we had and right now from the server, we're just responding

107
00:11:27,890 --> 00:11:30,140
back with the same JSON object.

108
00:11:30,350 --> 00:11:33,830
So we don't have to actually respond back or you don't have to output into the console.

109
00:11:33,980 --> 00:11:37,230
So it's up to you what you do with the data that's being returned back.

110
00:11:37,430 --> 00:11:43,550
So if you just want to do a post, then you don't actually need to wait for the response object and

111
00:11:43,550 --> 00:11:47,850
you can just do fetch and do a method post to the endpoint.

112
00:11:50,030 --> 00:11:57,060
And this way you can create and construct a form that's going to track to the data, to a spreadsheet.

113
00:11:57,530 --> 00:12:03,620
In addition, it's going to actually send the emails to you from the input form and you can use this

114
00:12:03,620 --> 00:12:04,790
on your websites as well.

115
00:12:05,060 --> 00:12:06,950
And of course, style it as needed.

116
00:12:10,560 --> 00:12:16,380
Final task for this lesson are to try out the application, make sure it's sending the data from the

117
00:12:16,380 --> 00:12:23,040
input fields, from the form, and that you're able to receive the proper form information within the

118
00:12:23,040 --> 00:12:26,580
spreadsheet or just within the email, depending on how you set it up.

119
00:12:26,700 --> 00:12:33,960
Apply the styling to the web form as needed and also make sure that the user has the proper messaging

120
00:12:33,960 --> 00:12:39,300
so that they know what is happening with the form and the data is being sent and the status information.