1
00:00:00,720 --> 00:00:08,100
In this lesson, we are going to be setting up basic contact form, so sending input fields and we're

2
00:00:08,100 --> 00:00:12,410
going to be submitting it to an end point and that's what we're going to be setting up in the next lesson.

3
00:00:12,690 --> 00:00:18,090
So this lesson we're constructing, the JSON object that we're going to be sending over.

4
00:00:18,210 --> 00:00:23,040
And right now it's just sending to the regular page as the end point as we're going to be constructing

5
00:00:23,040 --> 00:00:24,280
the endpoint afterwards.

6
00:00:24,690 --> 00:00:28,370
So this form also does have some validations.

7
00:00:28,620 --> 00:00:35,250
So we're checking to see if they're valid emails and as well as if we've got a length of more than five

8
00:00:35,250 --> 00:00:37,150
characters within the name field.

9
00:00:37,380 --> 00:00:42,660
So once those do get adjusted, it always does the check before it actually sends the email.

10
00:00:42,870 --> 00:00:48,420
So it's not sending the email until it sees at least five characters in the name field username field

11
00:00:48,570 --> 00:00:52,090
and at least a valid email within the email field.

12
00:00:53,940 --> 00:00:59,790
So let's go ahead and open up the editor to create the contact form to send the AJAX request to the

13
00:00:59,790 --> 00:01:00,240
server.

14
00:01:00,570 --> 00:01:04,260
So I've got the standard HTML file indexed HTML.

15
00:01:04,440 --> 00:01:11,130
Nothing for styling yet and we've got a main div container with a class of container form with an ID

16
00:01:11,130 --> 00:01:17,370
of sign up and then several inputs here for the name and also for the email address.

17
00:01:17,580 --> 00:01:22,850
There's a text area to pick up the information contained for our message area.

18
00:01:23,040 --> 00:01:26,520
And then also lastly, there's an input and this is a submit button.

19
00:01:26,730 --> 00:01:33,330
So submitting this form will, what we want to do is send the AJAX requests, so picking it up with

20
00:01:33,330 --> 00:01:40,350
the FETCH request and then processing the data, getting the data from the form and then sending it

21
00:01:40,350 --> 00:01:42,790
over to the server within a JSON format.

22
00:01:43,260 --> 00:01:48,580
So going into the code, first of all, let's go ahead and will select our form.

23
00:01:49,410 --> 00:01:51,540
So just give it a name of my form.

24
00:01:51,750 --> 00:02:00,090
And then using the document object and query selector, we're going to select the elements with ID of

25
00:02:00,090 --> 00:02:00,700
sign up.

26
00:02:01,260 --> 00:02:04,390
So it's our main sign up form that we're going to be selecting.

27
00:02:04,830 --> 00:02:10,950
I'm also going to update The View to toggle the Wardrop so that we can see the full content of the text

28
00:02:10,950 --> 00:02:11,520
that we're writing.

29
00:02:11,760 --> 00:02:15,400
Next up, that's add the event listener on that form object.

30
00:02:15,420 --> 00:02:22,140
So my form object and because this is a submit button, we can add an event listener and listen for

31
00:02:22,140 --> 00:02:24,720
the submit action on the form itself.

32
00:02:25,140 --> 00:02:29,730
And we're passing over the event object because what we want to do, because this is going to be an

33
00:02:29,730 --> 00:02:33,000
AJAX request, we're going to be using the prevent default.

34
00:02:33,030 --> 00:02:35,210
So that's e prevent default.

35
00:02:35,430 --> 00:02:39,330
And what that does is that's going to prevent the default action of the form submission.

36
00:02:39,690 --> 00:02:45,920
So as before, we saw when we clicked the send message that was actually passing in all of those parameters

37
00:02:45,930 --> 00:02:46,100
there.

38
00:02:46,140 --> 00:02:51,850
So if we commented out and if we hit send, we get the whole parameters there within the euro.

39
00:02:52,050 --> 00:02:57,960
So we don't actually want it to refresh the page or send any information as it's going to be taken care

40
00:02:57,960 --> 00:03:00,680
of with our AJAX request.

41
00:03:00,960 --> 00:03:06,420
So that's why we're including the prevent default so the default action doesn't happen and within the

42
00:03:06,420 --> 00:03:07,110
console.

43
00:03:10,700 --> 00:03:18,440
And we'll just sending data, so that's what we want to do whenever the form is hit submitted that we

44
00:03:18,440 --> 00:03:19,290
want to send the data.

45
00:03:19,310 --> 00:03:25,340
So we want to get all of the form contents so all of the elements from the form itself.

46
00:03:25,700 --> 00:03:27,730
And there's a few ways to do that.

47
00:03:27,740 --> 00:03:32,380
We've seen some of the ways that we can create and get form data.

48
00:03:32,900 --> 00:03:38,090
So you don't necessarily need to do that if you want to go through each one of them and pick up and

49
00:03:38,240 --> 00:03:39,970
do some vetting of the content.

50
00:03:40,160 --> 00:03:46,610
So make sure that the email is an actual valid email and we are using HTML five, so it will flag that

51
00:03:46,610 --> 00:03:48,310
this is an email type.

52
00:03:48,320 --> 00:03:50,360
So it should be formatted as an email.

53
00:03:50,810 --> 00:03:53,060
So that will be flagged by the browser.

54
00:03:53,540 --> 00:03:58,220
But there's also just if you want to check, to see the length of the content and so on, you can do

55
00:03:58,220 --> 00:04:00,690
that before you actually submit it to the server.

56
00:04:01,070 --> 00:04:09,080
So let's loop through all of the elements, all of the elements, all of the form inputs, and we can

57
00:04:09,080 --> 00:04:10,820
do that with my form.

58
00:04:12,070 --> 00:04:15,970
Object and listing out all of the elements.

59
00:04:19,180 --> 00:04:24,280
So if we can't so log out and that actually should just be elements.

60
00:04:27,450 --> 00:04:34,120
The editor sometimes adds an extra method's, so we just want to get all of the elements.

61
00:04:36,010 --> 00:04:42,520
So let's set all of the elements so we've got the two inputs, text area, and then this last one as

62
00:04:42,520 --> 00:04:43,810
well is there.

63
00:04:45,010 --> 00:04:48,160
So let's out the four different elements on the page.

64
00:04:49,210 --> 00:04:52,140
So we want to loop through all of the elements.

65
00:04:52,480 --> 00:04:57,870
So we have the form elements, but we're not able to actually iterate through them.

66
00:04:58,420 --> 00:05:00,250
So we need to select it.

67
00:05:00,250 --> 00:05:03,620
And this is because this is in a similar form controls collection.

68
00:05:03,910 --> 00:05:09,850
So this is different and you can't use the iteration for the for each, but we can use the for loop

69
00:05:09,850 --> 00:05:12,960
in order to pick up the information that's contained within each element.

70
00:05:13,300 --> 00:05:18,510
So as we iterate through the elements, we can check the content that's contained within the elements.

71
00:05:19,030 --> 00:05:21,990
So just select the URL and we do have a length value.

72
00:05:22,390 --> 00:05:30,910
So that's where we can use the for loop increment I plus one and within the console, let's output each

73
00:05:30,910 --> 00:05:35,640
individual element using the index value as we're looping through it.

74
00:05:37,510 --> 00:05:42,240
So hit the send and that gives us each one of those elements.

75
00:05:44,260 --> 00:05:50,170
I don't want to pick up the information that's contained within the submit button, so let's break that

76
00:05:50,170 --> 00:05:54,040
apart and only add and we're going to create an object.

77
00:05:54,040 --> 00:05:57,190
So just create a temporary holder object.

78
00:05:58,630 --> 00:06:05,020
And then within this object we're going to add to the holder, depending on what the name of the element

79
00:06:05,020 --> 00:06:08,200
is, and also then associating the value.

80
00:06:08,440 --> 00:06:10,480
So for each one that we loop through.

81
00:06:16,390 --> 00:06:25,360
Let's select each element and I'll give it a name, El, and this is going to be we're referring to

82
00:06:25,360 --> 00:06:31,440
that particular element object as we're iterating through and then Forell itself.

83
00:06:33,480 --> 00:06:35,130
Using the console log.

84
00:06:38,520 --> 00:06:39,390
You can get.

85
00:06:43,980 --> 00:06:51,360
And get the attribute type for want, and the reason I'm listening that is that so that we can select

86
00:06:51,360 --> 00:06:56,970
and we can check to see if the type is going to be a submit type.

87
00:06:56,970 --> 00:06:58,880
And if it is, then we know we can skip it.

88
00:06:59,550 --> 00:07:06,870
So text, email and all are OK, but we need to track and not actually track the data that's within

89
00:07:06,870 --> 00:07:07,400
the segment.

90
00:07:08,190 --> 00:07:19,270
So if that L type is not equal to submit, then we want to add it to our object.

91
00:07:20,160 --> 00:07:28,350
So let's now output into the console, log the elements and we'll just get the name of the element.

92
00:07:34,210 --> 00:07:37,030
And we can also use the get attribute, get name.

93
00:07:39,220 --> 00:07:42,540
So name is name here, name is email, name message.

94
00:07:43,120 --> 00:07:47,080
So just double check and make sure that you're able to pull the information out.

95
00:07:47,590 --> 00:07:52,500
And as well, you could also just use the get attribute type as well.

96
00:07:52,780 --> 00:07:54,850
So those are both values within the object.

97
00:07:56,410 --> 00:07:59,840
And also, let's get the value that's contained within it.

98
00:08:01,900 --> 00:08:12,100
So as we loop through and there we've got the values that are contained within it and with each HTML,

99
00:08:12,100 --> 00:08:14,150
you can add the required field.

100
00:08:14,190 --> 00:08:21,430
So for this case, we do want to make sure that the email does have a required field for the email so

101
00:08:21,430 --> 00:08:29,110
you can add in within the HTML just required and also if you want to set the name to required.

102
00:08:29,470 --> 00:08:33,190
And what this will do is this is just a function of HTML.

103
00:08:33,220 --> 00:08:36,940
So now if we try to submit, we get please fill out form.

104
00:08:37,120 --> 00:08:44,140
And this is going to be the same flagging that since this is an email type input, the browser itself

105
00:08:44,140 --> 00:08:46,350
is going to be flagging those input values.

106
00:08:47,170 --> 00:08:53,080
So it's going to flag it that this isn't a proper email, that these two fields are required.

107
00:08:53,260 --> 00:08:56,310
So we're not actually able to do any of the submitting.

108
00:08:56,320 --> 00:09:01,570
So it's not getting even to the JavaScript as it's caught within the browser of the HTML when we're

109
00:09:01,570 --> 00:09:02,420
trying to submit it.

110
00:09:03,880 --> 00:09:06,070
So that's just setting it as required.

111
00:09:06,260 --> 00:09:09,190
I'm going to just set a default value of it.

112
00:09:13,770 --> 00:09:20,470
And that's just one of my email addresses that I'm going to be using, so I'd send the email address.

113
00:09:21,690 --> 00:09:25,770
So now when we submit we're still submitting, everything is still back.

114
00:09:26,490 --> 00:09:31,780
As expected, we're able to submit a comment to some of these cons. messages.

115
00:09:32,220 --> 00:09:37,850
So right now, we're just getting the property name that we want to use and the value property value

116
00:09:37,850 --> 00:09:39,230
of property and value.

117
00:09:39,540 --> 00:09:42,560
So let's add that into our holder object.

118
00:09:43,260 --> 00:09:52,440
So for within the holder using the bracket notation, we're going to set the property name and then

119
00:09:52,440 --> 00:10:00,390
here we can assign the value to that property and I'll just cancel these because we don't need them

120
00:10:00,390 --> 00:10:00,760
anymore.

121
00:10:01,740 --> 00:10:08,310
And once we finish looping through within the console, we'll output the value of Holder.

122
00:10:10,560 --> 00:10:19,020
So that constructs JSON object that we can send over to the server and in order to do the submission

123
00:10:19,020 --> 00:10:19,940
of the content.

124
00:10:20,610 --> 00:10:27,060
So also, while we're looping through here, we can check to check the different conditions as well

125
00:10:27,870 --> 00:10:35,480
so we can check to see if the name is equal to the name, which is the user name.

126
00:10:36,300 --> 00:10:39,420
And I'm just going to actually update this instead of name.

127
00:10:39,990 --> 00:10:44,070
Let's put a user to avoid any of the confusion.

128
00:10:45,990 --> 00:10:47,640
So now we've got the user.

129
00:10:51,410 --> 00:10:55,850
And actually not putting the value, so I need to update that to make sure that I'm actually setting

130
00:10:55,850 --> 00:10:57,410
the value instead of the property name.

131
00:10:58,490 --> 00:11:01,130
So there's all of that JSON constructed.

132
00:11:01,610 --> 00:11:08,240
So let's do a check to see if and we're going to check to see if aliments.

133
00:11:10,810 --> 00:11:23,500
Name is equal to the user, and if it is, then we want to check in, get the flag to see if it's one

134
00:11:23,500 --> 00:11:24,310
that we want to add.

135
00:11:24,580 --> 00:11:30,540
So let's construct an array and then this can serve as our error array.

136
00:11:30,940 --> 00:11:41,970
And if at the end, if the error length is equal to zero, then we can actually submit the form content.

137
00:11:42,430 --> 00:11:44,720
So we're going to be updating it, adding to the error.

138
00:11:45,010 --> 00:11:50,260
So just before we finalize and submit it, we're going to be adding and checking to see if the error

139
00:11:50,260 --> 00:11:51,080
length is OK.

140
00:11:52,930 --> 00:12:01,310
So as we loop through each one of the elements, we're checking to see if the attribute type is submit.

141
00:12:02,710 --> 00:12:06,040
So we'll create another variable and we'll just call it Val.

142
00:12:06,520 --> 00:12:09,310
And so this is going to be whether it's valid or not.

143
00:12:09,850 --> 00:12:15,370
So we can use this as a control variable to check to see if we're actually adding it into the holder

144
00:12:15,370 --> 00:12:15,720
array.

145
00:12:16,510 --> 00:12:20,480
And then if we are throwing any errors, then we're going to add and append to the error array.

146
00:12:20,830 --> 00:12:30,850
So let's set the valid to true and just before we add it, and this will just clean up the code a little

147
00:12:30,850 --> 00:12:32,720
bit, you can also test them with him.

148
00:12:33,430 --> 00:12:35,380
So it's checking to see if it's not submit.

149
00:12:35,810 --> 00:12:40,810
So you could have these with in here or you could separate them out and check to see if it is submit

150
00:12:40,810 --> 00:12:42,940
and then we would set the valid to false.

151
00:12:43,480 --> 00:12:45,940
So now we checked to see valid.

152
00:12:46,690 --> 00:12:52,210
And if it is valid, if it's still valid, then we added into the holder.

153
00:12:55,300 --> 00:13:02,950
And if it's is equal to submit, then Val is going to be false.

154
00:13:05,590 --> 00:13:13,780
So that is false and this way we could have some conditions, so for the user, let's say we want to

155
00:13:13,780 --> 00:13:22,330
have a minimum length for the user, a value of five characters, and then you can set different parameters

156
00:13:22,330 --> 00:13:22,690
as well.

157
00:13:22,690 --> 00:13:27,310
And you can also do a regular expression to check, to see if it's a valid email and so on.

158
00:13:27,820 --> 00:13:35,880
So let's select the user and check to see if the URL so we'll have another condition.

159
00:13:36,970 --> 00:13:38,590
So if Al.

160
00:13:44,640 --> 00:13:53,220
Value and or checking to see if the length of the value and using the string methods in JavaScript,

161
00:13:53,230 --> 00:13:57,110
so every string is going to have a length, just as we saw with the race.

162
00:13:57,900 --> 00:14:01,200
So if we make sure that it's larger than four.

163
00:14:01,740 --> 00:14:03,470
So five would be OK.

164
00:14:03,810 --> 00:14:06,370
Or you could do a large greater than or equal to.

165
00:14:08,070 --> 00:14:11,360
So as long as it's larger than four, then it's OK.

166
00:14:11,790 --> 00:14:20,130
And if it's actually going to be less than five, then we're going to flag it and update Val, set that

167
00:14:20,130 --> 00:14:27,270
to false and then also take the error and push to the error.

168
00:14:28,250 --> 00:14:38,640
And it's going to give us some error messages and error message name it needs to be.

169
00:14:41,170 --> 00:14:42,520
Five plus.

170
00:14:44,760 --> 00:14:55,140
Or more so that will just push the air and then we can also check for email addresses and so on, so

171
00:14:55,140 --> 00:14:56,670
if we do get errors.

172
00:14:58,640 --> 00:15:01,670
Then we can take the error and for each error.

173
00:15:04,450 --> 00:15:11,980
We can output the air contents to the console and eventually we're going to provide those air details

174
00:15:11,980 --> 00:15:12,670
to the user.

175
00:15:15,820 --> 00:15:19,060
Let's make it shorter, so make it four characters.

176
00:15:21,960 --> 00:15:28,920
And I'm going to just update this to be a fair length is greater than zero, so needs to be five or

177
00:15:28,920 --> 00:15:32,130
more, so it's still building the Holder object.

178
00:15:32,710 --> 00:15:38,340
But in this case, if there are any if the air length is greater than zero, then we're not going to

179
00:15:38,340 --> 00:15:39,360
be doing the submission.

180
00:15:39,690 --> 00:15:42,920
And if it's not, then we can do the form submission.

181
00:15:46,530 --> 00:15:50,960
So that's if we haven't caught any of the errors or if there haven't been any errors thrown.

182
00:15:54,580 --> 00:16:00,730
So another one that you could do is to check, to see if it's a valid email so you can use a regular

183
00:16:00,730 --> 00:16:02,000
expression for that.

184
00:16:02,530 --> 00:16:03,640
So let's create a function.

185
00:16:03,640 --> 00:16:11,210
And there's a number of functions online that you could search out and valid validate email.

186
00:16:11,350 --> 00:16:17,560
So past the email object and then we'll do a regular expression to check to see if it's valid.

187
00:16:18,490 --> 00:16:24,370
So this is the one that I typically will use and we'll just use the JavaScript test.

188
00:16:25,030 --> 00:16:35,220
So the regular expression is going to check to see if there's an end sign content, a dot and more content.

189
00:16:35,560 --> 00:16:41,230
So it's going to just do a quick check and then do a return of the tested value.

190
00:16:41,260 --> 00:16:46,950
So this is going to return back a boolean value of testing the email within this regular expression.

191
00:16:47,230 --> 00:16:50,350
So be either true or false for the valid email.

192
00:16:51,490 --> 00:17:00,640
So let's also have that condition where if and this is going to be it only if it's an email address.

193
00:17:02,530 --> 00:17:13,270
So if my name is email, then we'll do the condition, whether it's a valid email and we can also set

194
00:17:13,270 --> 00:17:14,050
this to false.

195
00:17:17,550 --> 00:17:25,910
So if we validate email and I'll create a variable for that so that we can log that into the console,

196
00:17:26,970 --> 00:17:29,160
so we'll see what gets returned back from the function.

197
00:17:30,300 --> 00:17:31,440
Now, you don't have to do this.

198
00:17:31,440 --> 00:17:33,350
You could just do this within the one statement.

199
00:17:34,980 --> 00:17:38,940
So we're checking to see if this is going to be true or false.

200
00:17:39,600 --> 00:17:47,070
And depending on what the response here is, whether it is true or false, whether the check comes back

201
00:17:47,070 --> 00:17:50,490
true or false, then we can add to the false.

202
00:17:53,860 --> 00:17:59,740
So if Chuck comes back and it's false, this is just going to check to see if it's a valid email.

203
00:18:02,410 --> 00:18:14,980
Not a valid email, and I'm actually going to remove out the tape and update this to text, so that

204
00:18:14,980 --> 00:18:17,860
way the HTML5 isn't going to be checking for email.

205
00:18:18,350 --> 00:18:24,280
But if you are going live with it, I just keep your type and keep that as email so that you have the

206
00:18:24,280 --> 00:18:27,010
double check for the valid email address.

207
00:18:30,310 --> 00:18:31,990
So let's try this one.

208
00:18:34,410 --> 00:18:41,850
And email is not defined, and that's because we're passing in the email value, but we're not getting

209
00:18:42,150 --> 00:18:49,480
the full value from the input, so that should be our value and try that one more time.

210
00:18:50,130 --> 00:18:51,490
So not valid email.

211
00:18:51,540 --> 00:18:52,880
That's what we get return back.

212
00:18:53,790 --> 00:18:56,310
So false and we're pushing the errors.

213
00:18:56,310 --> 00:18:59,430
And so it also allows us to track multiple errors.

214
00:19:00,430 --> 00:19:07,350
So it needs to be five or more not valid email so we can output all of this message content to the user.

215
00:19:08,520 --> 00:19:10,980
So and we can add that into the output area.

216
00:19:11,100 --> 00:19:18,930
So let's select that output area using the documents and query selector, select the element with a

217
00:19:18,930 --> 00:19:25,740
class of output, and then within that output, let's update the contents of output.

218
00:19:27,390 --> 00:19:32,730
So take output in our HTML and we'll just set that to blank.

219
00:19:33,420 --> 00:19:39,750
And then as we loop through, take output and we'll just add to it.

220
00:19:39,760 --> 00:19:44,550
So add to the inner HTML of output the error value.

221
00:19:46,770 --> 00:19:55,140
So now if we're throwing any errors and let me just double check and we don't actually have an output

222
00:19:55,590 --> 00:19:59,370
content area, so let's update that div.

223
00:20:00,500 --> 00:20:08,810
Class of output, and that's where we can have the response message to the user, let's double check,

224
00:20:08,810 --> 00:20:09,880
see that it's working.

225
00:20:10,250 --> 00:20:11,870
So not valid email.

226
00:20:13,250 --> 00:20:17,240
And if we get both of them, so it outputs both of them to the page.

227
00:20:21,240 --> 00:20:24,570
And just add to it a line break.

228
00:20:27,690 --> 00:20:33,360
And double check, just make sure we get both of those name needs to be five or more characters, not

229
00:20:33,360 --> 00:20:40,170
valid email, and if we do get more characters, we only get the one error message.

230
00:20:40,380 --> 00:20:47,370
And if we don't have any errors, if it is a valid email, so if it does come with a valid email structure,

231
00:20:47,550 --> 00:20:52,750
then we are actually submitting the content and and this was where we can make the fetch request.

232
00:20:54,030 --> 00:21:01,570
So let's set up the Thach request to the server and pass the user email and message to the server.

233
00:21:02,340 --> 00:21:04,550
So this is where everything is valid.

234
00:21:04,740 --> 00:21:07,730
We've already got the data within the holder object.

235
00:21:08,490 --> 00:21:12,320
So from there we can take and we can do the Fach request.

236
00:21:12,870 --> 00:21:20,250
So let's set up just your URL and this is going to be wherever we're sending the email to.

237
00:21:21,120 --> 00:21:27,000
So right now we'll just send it to the same index page and then we're going to create the endpoints

238
00:21:27,000 --> 00:21:28,170
in the upcoming lessons.

239
00:21:28,710 --> 00:21:37,140
So we're submitting the data to the server and this is where we can have our Futch request to the euro.

240
00:21:38,680 --> 00:21:45,100
And then passing in the options object and then within the then.

241
00:21:46,240 --> 00:21:52,790
We'll get our response back and we're going to set up the server to send a Jason response back.

242
00:21:53,740 --> 00:21:59,710
And then lastly, we'll get the data and put that into the console.

243
00:22:02,750 --> 00:22:07,700
So whatever we get back from the server, so right now we're not going to actually get anything back,

244
00:22:07,700 --> 00:22:17,510
but we're just setting up that we can make the request so set up within the parameters method and the

245
00:22:17,510 --> 00:22:20,180
method that we're going to be using is going to be post.

246
00:22:22,000 --> 00:22:31,420
And the body of the submission and we're not going to require any headers for this, so we can just

247
00:22:31,420 --> 00:22:34,270
string ify the contents of Holder.

248
00:22:38,160 --> 00:22:44,670
And that way we're setting our message, and right now we just get a four or five back because we're

249
00:22:44,790 --> 00:22:49,330
sending it over to our page so we're not actually able to do a post to this page.

250
00:22:50,130 --> 00:22:56,160
So coming up next, we'll set up doing and creating the post for the contact form.

251
00:22:56,640 --> 00:22:59,310
And The Post is going to be done with Google script.

252
00:22:59,340 --> 00:23:06,360
We're going to create an end point using Google Scripts Web app, and that will generate an endpoint

253
00:23:06,540 --> 00:23:11,070
that we can submit our form contents to and then eventually send an email.

254
00:23:11,250 --> 00:23:16,050
And that's going to be done with the backend code in Google Apps script and Google Apps script if you're

255
00:23:16,050 --> 00:23:17,070
not familiar with it.

256
00:23:17,100 --> 00:23:22,860
This is just like JavaScript in the cloud, just modern JavaScript and allows you to connect the Google

257
00:23:23,010 --> 00:23:25,830
services together with script.

258
00:23:25,830 --> 00:23:30,900
And it can function as a backend code if you don't have a backend server, if you don't have backend

259
00:23:30,900 --> 00:23:33,300
code to receive the email message.

260
00:23:33,630 --> 00:23:39,180
And as well, you can also, if you do have it set up, if you do do any other type of backend coding,

261
00:23:39,690 --> 00:23:42,210
you're sending over the JSON object.

262
00:23:42,390 --> 00:23:47,790
As long as you're receiving that data, then you can write the server code in order to send the email

263
00:23:47,790 --> 00:23:50,690
messages and or store the messages.

264
00:23:51,180 --> 00:23:56,370
So at that point, you can do what you need to do with the content and it's just being submitted.

265
00:23:59,260 --> 00:24:05,740
Thanks for this lesson or to create with HTML or with JavaScript, your contact form, so all the fields

266
00:24:05,740 --> 00:24:09,760
that you want to use, select the form data and add an event.

267
00:24:09,760 --> 00:24:12,280
LYSTER So when the form is submitted, add the event.

268
00:24:12,280 --> 00:24:15,100
Listener Don't forget to prevent the default action.

269
00:24:15,100 --> 00:24:21,850
So the event default action get form fields, names and values for each one of the fields, apply the

270
00:24:21,850 --> 00:24:27,880
conditions for the data, for the form to do a condition check, applying whatever conditions that are

271
00:24:27,880 --> 00:24:33,220
necessary for your input fields to make sure that the data that you're sending over is valid.

272
00:24:33,760 --> 00:24:40,780
Check and valid submission data create the JSON object from the input field data in order to send it

273
00:24:40,780 --> 00:24:43,420
using post method to an endpoint.

274
00:24:43,690 --> 00:24:49,540
Prepare the Thach request to the endpoint and you can be ready to move on to the next lesson.

275
00:24:49,720 --> 00:24:52,990
We're going to constructing the endpoint using Google subscript.