1
00:00:00,060 --> 00:00:06,330
The section is about creating a fully functional Ajax contact form for your Web application, so we've

2
00:00:06,330 --> 00:00:07,680
got the contact form.

3
00:00:07,690 --> 00:00:15,150
So with HTML, we set up some input fields and email field a message areas using text tag, text area

4
00:00:15,150 --> 00:00:17,580
tag and then a button to send the content.

5
00:00:17,760 --> 00:00:20,490
So this is still running on our local machine.

6
00:00:20,670 --> 00:00:28,870
And when we send and do a submission of the data, it sends the data over and it adds it into a spreadsheet.

7
00:00:28,870 --> 00:00:33,150
So whatever content we had within the fields there is added into the spreadsheet.

8
00:00:33,360 --> 00:00:37,750
In addition, we also get an email being sent to us when we submit the data.

9
00:00:37,950 --> 00:00:39,720
So let's try that one more time.

10
00:00:40,440 --> 00:00:51,270
And this time I'll just use Tester and test email and for the message to Hello World and send that over.

11
00:00:51,840 --> 00:00:57,690
And then we've got the sending so that test information deposited into the spreadsheet.

12
00:00:57,990 --> 00:01:01,680
And as well, we got an email when that submission was completed.

13
00:01:01,920 --> 00:01:07,860
It's also going to check to make sure that we've got the proper content structure.

14
00:01:08,280 --> 00:01:14,820
So we're doing some validation to make sure that it is a valid email address as well as the name needs

15
00:01:14,820 --> 00:01:21,030
to have at least five characters, so used to be at least five characters, and also that this needs

16
00:01:21,030 --> 00:01:23,640
to be within a valid email type format.

17
00:01:23,880 --> 00:01:30,090
And once it is, then it will send the message and that means that we receive it within the sheets.

18
00:01:30,360 --> 00:01:32,760
So we are going to be using Google Apps script.

19
00:01:32,970 --> 00:01:38,310
And if you're not familiar with Google Apps script, this is modern a JavaScript within the cloud.

20
00:01:38,310 --> 00:01:44,240
It allows you to connect the Google services together and you are going to need to have a Google account.

21
00:01:44,240 --> 00:01:46,590
So I'm just using my regular Gmail account.

22
00:01:47,190 --> 00:01:52,080
So you are going to need to have a Google account in order to access and create a spreadsheet and then

23
00:01:52,080 --> 00:01:58,830
also access app scripts running within your Google account so you can as well copy and paste the code

24
00:01:58,980 --> 00:02:04,680
that we currently are going to be providing for the app script and just accept the permissions, deploy

25
00:02:04,680 --> 00:02:07,350
the app and it will run the same way.

26
00:02:07,350 --> 00:02:13,590
You will need to update your EITE for the spreadsheet and as well, your end point is going to be different

27
00:02:13,590 --> 00:02:14,790
for the Web application.

28
00:02:15,000 --> 00:02:21,120
So when you do deploy it, you can select and within the managed deployments you can select as well

29
00:02:21,120 --> 00:02:21,990
the endpoint.

30
00:02:22,200 --> 00:02:23,970
So it is a fairly long address.

31
00:02:24,090 --> 00:02:29,580
Its script, dot Google dot com forward slash macros for its large library and then a whole bunch of

32
00:02:29,580 --> 00:02:30,540
unique characters.

33
00:02:30,660 --> 00:02:33,590
And at the end it's going to say X E.

34
00:02:33,840 --> 00:02:37,200
So that's the executable version of the endpoint.

35
00:02:37,710 --> 00:02:44,070
And then that endpoint is what we're going to copy into the JavaScript project that we're building.

36
00:02:44,080 --> 00:02:50,820
So there's the endpoint there that I've been using and most of the staling we've done with each HTML

37
00:02:50,830 --> 00:02:51,930
and see us.

38
00:02:52,140 --> 00:02:58,560
So we've structured the input fields, added them all, hardcoded them as an input form and then applied

39
00:02:58,560 --> 00:02:59,610
some styling to them.

40
00:02:59,940 --> 00:03:05,160
And then within the JavaScript we're selecting the form object and then we're doing a submission.

41
00:03:05,430 --> 00:03:12,120
And this, of course, is going to be a fetch request using the post method string of flying all of

42
00:03:12,120 --> 00:03:15,930
the input field content and sending it over to the server.

43
00:03:16,710 --> 00:03:23,040
And then as well, we do our getting the response back from the server so you can customize this as

44
00:03:23,040 --> 00:03:23,490
needed.

45
00:03:24,330 --> 00:03:28,380
So if you do have any questions or comments, I'm always happy to hear from you.

46
00:03:29,430 --> 00:03:32,180
So let's get started building this exciting project from scratch.