1
00:00:07,970 --> 00:00:15,160
Hey, everyone, in this video, we are going to put this contact form to work, and for this we won't

2
00:00:15,160 --> 00:00:20,440
be writing any JavaScript, actually, we are not going to be doing any coding.

3
00:00:20,680 --> 00:00:25,930
We just need to adjust our e-mail a little bit and this is going to work.

4
00:00:26,140 --> 00:00:32,470
But the reason why I have included this in this project is because this is something very common and

5
00:00:32,470 --> 00:00:33,610
very useful.

6
00:00:33,790 --> 00:00:41,020
If you have your own website or you're doing websites for other people, it's very likely that you have

7
00:00:41,020 --> 00:00:42,390
to do something like this.

8
00:00:42,700 --> 00:00:46,360
So I just wanted to show you a simple way of doing it.

9
00:00:46,840 --> 00:00:52,360
If you want to build a contact form from scratch and do your own code.

10
00:00:52,570 --> 00:00:54,790
This is going to be a bit more complicated.

11
00:00:54,970 --> 00:01:02,670
You won't be able to do it in JavaScript in the front, and you will need a back and language like page

12
00:01:02,770 --> 00:01:04,270
B or C sharp.

13
00:01:04,660 --> 00:01:08,520
If you want to do it in JavaScript, you will need something like no jass.

14
00:01:08,890 --> 00:01:14,750
So this is a bit more complicated, but I thought it would be interesting to show you an easy way.

15
00:01:15,160 --> 00:01:23,230
So for this, we are going to use a service called Post Mail so you can go to post Mayodan in votes

16
00:01:23,230 --> 00:01:24,010
dot com.

17
00:01:25,150 --> 00:01:31,840
This service is going to do all the backend work for us, so we won't have to worry about anything.

18
00:01:32,080 --> 00:01:37,880
Just one thing that I need to tell you before we get started, as this is a free service.

19
00:01:37,900 --> 00:01:40,880
Don't expect this to be very safe.

20
00:01:40,900 --> 00:01:43,600
Don't expect this to be very reliable.

21
00:01:43,600 --> 00:01:46,060
Sometimes this is just not working.

22
00:01:46,370 --> 00:01:54,190
So if you are doing this for a website that we have many contact requests per day, maybe this is not

23
00:01:54,190 --> 00:01:55,420
the best option.

24
00:01:55,810 --> 00:02:02,830
But if you have a website with just a few people contacting you like two or three times a week, then

25
00:02:02,830 --> 00:02:06,590
I think this service is going to work really well for you.

26
00:02:07,000 --> 00:02:13,510
So to get started, we just need to inform our e-mail and we will get an access token.

27
00:02:14,080 --> 00:02:15,190
So let's do this.

28
00:02:20,150 --> 00:02:23,900
So I just put my email and if I go to my email.

29
00:02:26,700 --> 00:02:30,510
I've just received an access token pretty good.

30
00:02:31,660 --> 00:02:33,010
Let me copy this.

31
00:02:34,290 --> 00:02:40,980
And now going back to the page, like I said, we won't have to write any JavaScript, we just need

32
00:02:40,980 --> 00:02:43,510
to go to the actual HTML form.

33
00:02:43,920 --> 00:02:50,760
So going to Visual Studio, let's go to the HTML file and let's find this form.

34
00:02:53,490 --> 00:02:59,400
So here it is, here's the contact form, I'm just going to zoom this out a little bit so we can see

35
00:02:59,400 --> 00:03:00,000
it better.

36
00:03:01,120 --> 00:03:06,160
I think this is good now I'm just going to leave this.

37
00:03:07,520 --> 00:03:09,020
Access token here.

38
00:03:13,270 --> 00:03:16,650
So let's go back there to see how we can set this up.

39
00:03:17,940 --> 00:03:25,320
So I'm just going back to the start page again, and as you can see, all we need to do is just copying

40
00:03:25,320 --> 00:03:26,070
their form.

41
00:03:31,240 --> 00:03:38,020
So they have a few hidden feuds, I'm going to talk about them in a minute, let's just copy this and

42
00:03:38,020 --> 00:03:39,520
take it to our code.

43
00:03:43,950 --> 00:03:53,670
So this is the form I'm just going to leave this here, so shift out a to comment all this and I'm just

44
00:03:53,670 --> 00:03:56,100
going to use their form instead.

45
00:04:01,540 --> 00:04:07,150
So if you're doing this in your own project, just be a bit careful, because, as you can see, I'm

46
00:04:07,150 --> 00:04:09,670
already using the same ideas as them.

47
00:04:09,670 --> 00:04:13,290
So my success is not going to be affected.

48
00:04:13,510 --> 00:04:17,160
The form is still going to render very well on the page.

49
00:04:17,440 --> 00:04:19,720
So just be a bit careful with this.

50
00:04:21,180 --> 00:04:27,870
And now a just base to this and this forum is a bit different from the one we had, as you can see,

51
00:04:27,870 --> 00:04:34,710
we had full name, email and message, and this one has only message and subject.

52
00:04:34,890 --> 00:04:37,670
But we are going to adjust this in a minute.

53
00:04:37,860 --> 00:04:44,420
So the first thing we need to do is using the actual access token.

54
00:04:44,430 --> 00:04:45,820
So here it is.

55
00:04:46,080 --> 00:04:48,570
So here we have a hidden feud.

56
00:04:49,580 --> 00:04:57,200
With the name of axis token, we just need to change its value to the axis, so can we received pretty

57
00:04:57,200 --> 00:04:59,390
good and that's it.

58
00:04:59,870 --> 00:05:04,210
If we wanted to use these fields, that's all we need to do.

59
00:05:04,220 --> 00:05:06,440
So I'm just going to save this.

60
00:05:07,510 --> 00:05:14,650
And now going back to our page, I'm going to refresh this so as you can see, the success is OK because

61
00:05:14,650 --> 00:05:17,040
I'm using the same I.D. I had before.

62
00:05:17,560 --> 00:05:19,210
So let's test this out.

63
00:05:19,570 --> 00:05:28,630
I'm just going to send a test email for myself since I used my email address to get this access token.

64
00:05:28,960 --> 00:05:31,840
This is where they are going to send this message to.

65
00:05:31,870 --> 00:05:36,340
So just going to write testing in votes.

66
00:05:37,240 --> 00:05:38,830
I'm going to hit send.

67
00:05:41,560 --> 00:05:48,250
And now I just got an error message here, something just went wrong with the service and like I said,

68
00:05:48,250 --> 00:05:51,910
there are a few downsides of using a free service.

69
00:05:52,240 --> 00:05:59,910
But what I've realized is that sometimes they just do not update that code on the front page.

70
00:06:00,070 --> 00:06:01,830
So let me just go back here.

71
00:06:02,050 --> 00:06:10,240
If you see that error, what you can do instead of getting this form here, you can go to your email,

72
00:06:11,050 --> 00:06:18,880
go to the email where you received the access token and go to this link at the bottom.

73
00:06:21,350 --> 00:06:29,480
So here you can make a few changes to your account, so here you have the code.

74
00:06:30,980 --> 00:06:39,200
For the contact form already with the axis token, so let's just get this, and this is actually a bit

75
00:06:39,200 --> 00:06:39,800
better.

76
00:06:41,190 --> 00:06:45,030
Because this is going to come with a few commented.

77
00:06:46,610 --> 00:06:55,100
Fuds here, where you can change a few things like their reply to email or other things, so we can

78
00:06:55,100 --> 00:06:57,830
just copy this, as you can see.

79
00:06:57,860 --> 00:07:00,810
There's also a JavaScript, but this is optional.

80
00:07:00,830 --> 00:07:02,470
We don't have to use it for now.

81
00:07:02,480 --> 00:07:07,340
I'm just going to copy this and I'm going to use this form instead.

82
00:07:07,760 --> 00:07:11,720
If you use the one from the front page and it worked, that's fine.

83
00:07:12,080 --> 00:07:18,040
If not, if you got the same error as I did, you can just go here and try this other one.

84
00:07:18,500 --> 00:07:20,200
So I just copy this.

85
00:07:20,450 --> 00:07:23,870
Let me go back there and now let's replace the form.

86
00:07:25,640 --> 00:07:32,360
Now, I have another one that's a bit bigger, let's just organize the indentation here a little bit.

87
00:07:38,200 --> 00:07:39,700
All right, this is batter.

88
00:07:41,720 --> 00:07:46,730
So now, again, subject message, let's try again, I'm just going to save this.

89
00:07:49,280 --> 00:07:56,390
Now, refreshing the page, let's try again so the subject is going to be test, just going to ride

90
00:07:56,390 --> 00:07:57,140
testing.

91
00:08:01,640 --> 00:08:02,540
Post e-mail.

92
00:08:04,970 --> 00:08:06,650
I'm just going to click send.

93
00:08:10,050 --> 00:08:12,150
And now this is working.

94
00:08:14,650 --> 00:08:23,230
If I go to my email now, you can see that I've successfully received the message sent from the website,

95
00:08:23,410 --> 00:08:31,120
but now we need to adjust a few things because we don't want to go to their front page after we send

96
00:08:31,120 --> 00:08:32,000
the message.

97
00:08:32,380 --> 00:08:35,920
So let's go back here, going to the code.

98
00:08:35,930 --> 00:08:37,280
Let's also remove this.

99
00:08:37,300 --> 00:08:40,180
So going back to our code.

100
00:08:41,180 --> 00:08:46,250
So here's the form, so here's the powered by message.

101
00:08:48,300 --> 00:08:53,160
If you want to keep it, you can keep it, it's as you can see here, this is not required, but if

102
00:08:53,160 --> 00:08:55,580
you want to help them out, you can just leave it there.

103
00:09:00,760 --> 00:09:09,370
So here's where the user is going to be redirected in case of success, so if the message is successfully

104
00:09:09,370 --> 00:09:09,910
send.

105
00:09:10,900 --> 00:09:18,010
You can just go back to your front page, to the front page of your website, and if there's an error,

106
00:09:18,400 --> 00:09:20,320
you can also show a.

107
00:09:21,600 --> 00:09:30,240
Specific error message, so the user knows that the message wasn't sent in our case, we won't be able

108
00:09:30,240 --> 00:09:38,730
to use this because this must use a website that's published online and our project is just hosted in

109
00:09:38,730 --> 00:09:39,540
our computer.

110
00:09:39,720 --> 00:09:46,650
So just to make a test, so you see how this works, we're just going to use Google's website, so.

111
00:09:48,210 --> 00:09:49,740
ETOPS.

112
00:09:51,320 --> 00:09:58,460
Calling forward slash, forward slash, let's just ride Google's front page here, so Google dot com.

113
00:10:05,110 --> 00:10:13,840
Let's use the same one for the error message, so if you were doing this for a real website, all you

114
00:10:13,840 --> 00:10:17,230
had to do was just put in the address.

115
00:10:17,230 --> 00:10:25,780
You want to redirect the person if the email was sent successfully and if you want a specific, you

116
00:10:25,780 --> 00:10:27,760
are all for the error message.

117
00:10:27,760 --> 00:10:29,580
You can also set one here.

118
00:10:29,590 --> 00:10:33,070
So, for example, let's use Google and let's see if this is better.

119
00:10:37,730 --> 00:10:39,290
Refreshing the page.

120
00:10:39,320 --> 00:10:40,400
Let's try again.

121
00:10:40,430 --> 00:10:41,960
So test to.

122
00:10:45,490 --> 00:10:47,300
Redirect to Google.

123
00:10:47,740 --> 00:10:50,020
I'm just going to send this message.

124
00:10:51,160 --> 00:10:54,260
And now it seems that everything went well.

125
00:10:54,400 --> 00:11:01,210
We were just redirected to Google, and if we go to our mailbox, we can see that we are getting the

126
00:11:01,210 --> 00:11:02,520
messages correctly.

127
00:11:03,070 --> 00:11:04,090
So this is fine.

128
00:11:04,120 --> 00:11:05,110
This one is done.

129
00:11:05,350 --> 00:11:12,790
I just want to show you that, as I said, we have a few other things that we can do with this so we

130
00:11:12,790 --> 00:11:15,730
can set the reply to email.

131
00:11:16,270 --> 00:11:20,860
And here they are explaining that we can add more fuds.

132
00:11:20,860 --> 00:11:24,880
So if you want to add a phone number, you can do it.

133
00:11:24,880 --> 00:11:32,440
In our case, we had some different fields like full name and email, and we didn't have a subject.

134
00:11:33,010 --> 00:11:38,440
So for this example, let's just add the full name and email to our form.

135
00:11:38,440 --> 00:11:43,480
So let's get this example feud that they are giving us.

136
00:11:49,520 --> 00:11:55,550
So we have the subject, let's leave the subject, let's just add the full name.

137
00:11:57,540 --> 00:12:01,560
And the emails, so let's change the name to.

138
00:12:04,820 --> 00:12:09,100
Full name and the place holder as well.

139
00:12:10,360 --> 00:12:14,710
Full name and let's do the same thing for the email address.

140
00:12:25,750 --> 00:12:26,890
So email.

141
00:12:33,370 --> 00:12:36,590
And email address, let's save this.

142
00:12:36,610 --> 00:12:38,820
Let's see if this is still working.

143
00:12:41,540 --> 00:12:48,500
Going back to our page now, we have a bigger form, so let's test subject.

144
00:12:49,520 --> 00:12:51,560
Of message, full name.

145
00:12:51,920 --> 00:12:55,580
I'm just going to write my name, email address.

146
00:12:58,400 --> 00:13:02,030
And the text message quickly send.

147
00:13:03,550 --> 00:13:12,400
The redirect worked correctly, if I go to the inbox, you see that the subject is here and inside the

148
00:13:12,400 --> 00:13:13,210
message.

149
00:13:17,160 --> 00:13:18,670
This is still not working.

150
00:13:18,690 --> 00:13:22,610
We are just getting the message, so let's see why is this happening?

151
00:13:27,620 --> 00:13:33,050
All right, so as you can see, we need to use the extra prefix.

152
00:13:34,470 --> 00:13:36,540
So let's use this extra.

153
00:13:39,890 --> 00:13:48,020
Before the names of the feud's, so for the email, let's use extra email and for the full name, extra

154
00:13:48,020 --> 00:13:48,740
for name.

155
00:13:50,060 --> 00:13:53,320
Let's save this and let's try again.

156
00:14:04,640 --> 00:14:06,200
So now, again, my name.

157
00:14:18,970 --> 00:14:20,070
Let's send it again.

158
00:14:23,740 --> 00:14:31,090
Now, let's check if the feud's were included and now, as you can see, we have the test message and

159
00:14:31,090 --> 00:14:34,390
the two extra fuds we have included are here.

160
00:14:34,510 --> 00:14:38,100
So we have the full name and the email of the person.

161
00:14:38,620 --> 00:14:39,570
So pretty good.

162
00:14:40,480 --> 00:14:45,070
So as you can see very easily, we just put this contact form to work.

163
00:14:45,070 --> 00:14:49,300
Of course, the code that they had on the front page did not work.

164
00:14:49,300 --> 00:14:51,370
We just had to go to the link.

165
00:14:51,370 --> 00:14:52,630
They sent the email.

166
00:14:52,870 --> 00:14:55,860
So this is the downside of using a free service.

167
00:14:56,140 --> 00:14:59,650
Sometimes things like this happen, but that's fine.

168
00:14:59,770 --> 00:15:01,120
We just put it to work.

169
00:15:01,210 --> 00:15:05,350
And like I said, sometimes this is just not going to work.

170
00:15:05,710 --> 00:15:14,400
The service may be down for a few minutes, but if you have a website with only a few contact attempts

171
00:15:14,410 --> 00:15:18,440
per week, I think this service is a very good option.

172
00:15:18,460 --> 00:15:26,050
So this part is done and we just have a very simple thing to do to end this first project, which is

173
00:15:26,590 --> 00:15:30,240
the year in this copyright message.

174
00:15:31,120 --> 00:15:33,640
So we are going to do this in the next video.

175
00:15:33,640 --> 00:15:34,420
I'll see you then.