1 00:00:01,780 --> 00:00:03,471 Hello everyone, it's Jonas 2 00:00:03,471 --> 00:00:06,782 and I'm back with another bonus lecture for this course. 3 00:00:06,782 --> 00:00:09,841 And I know that many students have been waiting for this one 4 00:00:09,841 --> 00:00:12,037 and because in this lecture 5 00:00:12,037 --> 00:00:14,844 we will finally make our contact form work 6 00:00:14,844 --> 00:00:17,004 using some very simple PHP 7 00:00:17,004 --> 00:00:20,171 that I will provide you along the way. 8 00:00:21,179 --> 00:00:23,104 So but first let's distinguish here 9 00:00:23,104 --> 00:00:27,225 between the client side and the server side code. 10 00:00:27,225 --> 00:00:31,832 So far we've been using HTML, CSS, and JavaScript 11 00:00:31,832 --> 00:00:34,477 which is code that runs in the browser. 12 00:00:34,477 --> 00:00:37,518 Which means that it's client side code. 13 00:00:37,518 --> 00:00:39,066 Now, on the other hand, 14 00:00:39,066 --> 00:00:43,349 we have server side code such as PHP, Microsoft.NET, 15 00:00:43,349 --> 00:00:46,228 or the Ruby and Rails framework 16 00:00:46,228 --> 00:00:49,018 which is code that is executed on the server. 17 00:00:49,018 --> 00:00:53,714 Client side then interacts with the server side. 18 00:00:53,714 --> 00:00:57,311 In our example that we will work on in this lecture 19 00:00:57,311 --> 00:00:59,920 the browser will send our form data 20 00:00:59,920 --> 00:01:03,645 to the PHP script, which is on the server. 21 00:01:03,645 --> 00:01:05,823 This script will then send an email 22 00:01:05,823 --> 00:01:08,972 and return a success code to the browser. 23 00:01:08,972 --> 00:01:11,114 So this means that this will only work 24 00:01:11,114 --> 00:01:13,399 if you already have your website hosted 25 00:01:13,399 --> 00:01:15,756 on a web server in the internet. 26 00:01:15,756 --> 00:01:19,949 So this will really not work on your local computer. 27 00:01:19,949 --> 00:01:22,163 So again, you need to have this online 28 00:01:22,163 --> 00:01:24,682 in order to make this work. 29 00:01:24,682 --> 00:01:26,914 So this is our HTML file 30 00:01:26,914 --> 00:01:29,487 and maybe you will notice here on this side 31 00:01:29,487 --> 00:01:31,430 I have these small icons now 32 00:01:31,430 --> 00:01:32,906 and they're really handy 33 00:01:32,906 --> 00:01:35,677 to distinguish between different file types 34 00:01:35,677 --> 00:01:38,827 and this is just a small brackets plugin, 35 00:01:38,827 --> 00:01:41,328 which is called brackets icons. 36 00:01:41,328 --> 00:01:42,983 So you can just install it 37 00:01:42,983 --> 00:01:46,650 and see if you like this kind of icons here. 38 00:01:47,554 --> 00:01:50,804 So let's just go down here to our form. 39 00:01:53,475 --> 00:01:55,142 Yeah, so here it is. 40 00:01:58,082 --> 00:02:02,689 So we will use a PHP file, which will be a script 41 00:02:02,689 --> 00:02:04,398 hosted on our server, 42 00:02:04,398 --> 00:02:07,547 which will be called mailer.php 43 00:02:07,547 --> 00:02:10,265 and this is a script that will be executed 44 00:02:10,265 --> 00:02:14,265 once the user clicks here on this submit button. 45 00:02:16,707 --> 00:02:19,910 So I will now take a look with you at this PHP script. 46 00:02:19,910 --> 00:02:23,293 I already wrote this and it's available for downloads 47 00:02:23,293 --> 00:02:24,715 right from this lecture. 48 00:02:24,715 --> 00:02:26,622 So as this is not a PHP course 49 00:02:26,622 --> 00:02:29,286 I will not teach you a step-by-step 50 00:02:29,286 --> 00:02:30,995 how to write this code 51 00:02:30,995 --> 00:02:34,019 but I will of course go with you through the script 52 00:02:34,019 --> 00:02:37,168 so that you understand the basics of it so how it works. 53 00:02:37,168 --> 00:02:41,901 So here in this first part we have three variables 54 00:02:41,901 --> 00:02:44,407 which will have the name that the user enters 55 00:02:44,407 --> 00:02:48,369 into the form, the email address, as well as the message. 56 00:02:48,369 --> 00:02:50,187 And these functions here 57 00:02:50,187 --> 00:02:53,120 they basically remove the HTML tags 58 00:02:53,120 --> 00:02:57,287 and wide space from the variables that the user enters. 59 00:02:58,446 --> 00:03:02,855 So and then next here these variables will be checked. 60 00:03:02,855 --> 00:03:06,185 So if the name that the user entered is empty 61 00:03:06,185 --> 00:03:08,110 or if the message is empty 62 00:03:08,110 --> 00:03:11,835 or if the email address is not valid 63 00:03:11,835 --> 00:03:15,252 then we will be redirected to our website 64 00:03:16,208 --> 00:03:20,581 with this success code here, minus one in this case, 65 00:03:20,581 --> 00:03:23,856 and we will see later in the lecture 66 00:03:23,856 --> 00:03:25,242 how to handle this. 67 00:03:25,242 --> 00:03:28,139 So we will handle this with an error message. 68 00:03:28,139 --> 00:03:30,784 And after that this script will be exited 69 00:03:30,784 --> 00:03:33,034 and that's it in this case. 70 00:03:33,880 --> 00:03:38,414 So this is what happens when there is an error. 71 00:03:38,414 --> 00:03:39,247 So in case they're not 72 00:03:39,247 --> 00:03:42,011 then the script will be executed further down. 73 00:03:42,011 --> 00:03:43,649 So we reach this point here 74 00:03:43,649 --> 00:03:46,114 we need to define the next variable 75 00:03:46,114 --> 00:03:50,281 which is the email address that we want email to be sent. 76 00:03:51,675 --> 00:03:53,798 In this case this is my email address 77 00:03:53,798 --> 00:03:56,533 hello@webdesigncourse.co 78 00:03:56,533 --> 00:04:00,510 and the next step will be to define the subject 79 00:04:00,510 --> 00:04:02,706 of the message that will be sent 80 00:04:02,706 --> 00:04:05,171 of the email that will be sent. 81 00:04:05,171 --> 00:04:07,367 And next just the simple content. 82 00:04:07,367 --> 00:04:10,336 So here we use these variables that we defined before, 83 00:04:10,336 --> 00:04:14,086 the name and the email and the actual message 84 00:04:15,159 --> 00:04:18,659 so that we can build a nice email from it. 85 00:04:19,568 --> 00:04:22,843 Next we need to define email headers. 86 00:04:22,843 --> 00:04:26,064 This is something that is part of every email. 87 00:04:26,064 --> 00:04:27,486 It's not visible to the user 88 00:04:27,486 --> 00:04:30,736 but it's part of an email that is sent. 89 00:04:32,056 --> 00:04:35,188 And then finally here is the most important PHP function 90 00:04:35,188 --> 00:04:36,355 which is mail. 91 00:04:37,221 --> 00:04:41,054 It takes the recipient, so our email address; 92 00:04:41,054 --> 00:04:44,743 the subject, the email content, which is this here; 93 00:04:44,743 --> 00:04:45,805 and the email header. 94 00:04:45,805 --> 00:04:49,044 So these four variables are used by this function 95 00:04:49,044 --> 00:04:52,877 and are then sent to hello@webdesigncourse.co. 96 00:04:53,846 --> 00:04:56,042 So you will of course update this 97 00:04:56,042 --> 00:04:57,194 to the email address 98 00:04:57,194 --> 00:05:00,611 that you want the form to send emails to. 99 00:05:03,309 --> 00:05:06,441 Actually back here, don't need this. 100 00:05:06,441 --> 00:05:10,238 And finally, after sending the email 101 00:05:10,238 --> 00:05:12,821 we will redirect to our website 102 00:05:14,341 --> 00:05:16,644 this time with the success code one. 103 00:05:16,644 --> 00:05:18,570 So this is the success code 104 00:05:18,570 --> 00:05:20,441 and not an error code. 105 00:05:20,441 --> 00:05:24,346 After that we have this little part here 106 00:05:24,346 --> 00:05:28,107 and what this does is to go directly to the place 107 00:05:28,107 --> 00:05:31,107 in the website which has an ID form. 108 00:05:33,380 --> 00:05:35,845 So let's just quickly add this one 109 00:05:35,845 --> 00:05:37,915 in the HTML file. 110 00:05:37,915 --> 00:05:40,415 So I'll put this ID right here 111 00:05:41,712 --> 00:05:44,462 where I want the code to go then. 112 00:05:45,473 --> 00:05:48,223 So probably here is a good place, 113 00:05:51,213 --> 00:05:54,057 no, maybe better here actually. 114 00:05:54,057 --> 00:05:56,807 So ID will be just four, alright? 115 00:06:00,051 --> 00:06:02,197 So as I'm still here on my computer 116 00:06:02,197 --> 00:06:03,883 and didn't upload anything yet 117 00:06:03,883 --> 00:06:06,466 I'm not able to test it so far. 118 00:06:07,350 --> 00:06:11,517 So I will now quickly make the success and the error boxes 119 00:06:13,174 --> 00:06:15,147 that I mentioned before 120 00:06:15,147 --> 00:06:17,714 so that we can give the user a nice feedback 121 00:06:17,714 --> 00:06:20,261 telling them that their mail was sent 122 00:06:20,261 --> 00:06:23,863 or that there was some kind of error. 123 00:06:23,863 --> 00:06:26,545 So now we'll do that right here 124 00:06:26,545 --> 00:06:29,795 at the beginning of the form, actually. 125 00:06:31,391 --> 00:06:33,641 So we use a simple div here 126 00:06:34,974 --> 00:06:36,974 and I will call this one 127 00:06:39,050 --> 00:06:40,217 form messages. 128 00:06:43,437 --> 00:06:47,766 And we will do separate classes for the success. 129 00:06:47,766 --> 00:06:49,835 So in this case, in the success case 130 00:06:49,835 --> 00:06:51,617 we can say something like, 131 00:06:51,617 --> 00:06:52,534 "Thank you! 132 00:06:54,179 --> 00:06:56,596 "Your message has been sent." 133 00:06:59,792 --> 00:07:03,298 And now we can just format this in CSS 134 00:07:03,298 --> 00:07:06,440 like you're already used to do. 135 00:07:06,440 --> 00:07:09,190 So form messages, messages sorry. 136 00:07:13,853 --> 00:07:16,861 Alright, so let's give it some width. 137 00:07:16,861 --> 00:07:20,028 Let's say for example 70% for now 138 00:07:22,304 --> 00:07:24,387 and we want to center it, 139 00:07:26,508 --> 00:07:28,258 margin zero and auto. 140 00:07:31,546 --> 00:07:35,213 One more thing that I noticed here right now 141 00:07:37,427 --> 00:07:39,630 is this red icon here, 142 00:07:39,630 --> 00:07:41,871 this is yet another brackets plugin, 143 00:07:41,871 --> 00:07:43,308 a very handy one. 144 00:07:43,308 --> 00:07:45,818 It's called the interactive linter. 145 00:07:45,818 --> 00:07:48,040 I will just show it to you 146 00:07:48,040 --> 00:07:49,572 so you can install it for yourself 147 00:07:49,572 --> 00:07:52,676 because I really recommend you to do it. 148 00:07:52,676 --> 00:07:55,741 It is this one, interactive linter. 149 00:07:55,741 --> 00:07:56,852 So you install it 150 00:07:56,852 --> 00:07:59,514 and it will help you avoid bugs in your code. 151 00:07:59,514 --> 00:08:02,943 So in this case it knows that I have some mistake here 152 00:08:02,943 --> 00:08:05,281 and so it puts this little icon here 153 00:08:05,281 --> 00:08:08,281 so I can immediately find the error. 154 00:08:10,089 --> 00:08:13,518 And it also gives me this warning icon down here. 155 00:08:13,518 --> 00:08:14,629 So this is really great. 156 00:08:14,629 --> 00:08:17,598 It's really helpful and it will help you 157 00:08:17,598 --> 00:08:20,181 making last mistakes basically. 158 00:08:21,638 --> 00:08:24,671 So again back to our code and now the icon is gone. 159 00:08:24,671 --> 00:08:26,490 Now everything's fine. 160 00:08:26,490 --> 00:08:29,657 So we can continue here with the code. 161 00:08:30,916 --> 00:08:33,597 Give it some padding like 10 pixels for now. 162 00:08:33,597 --> 00:08:36,854 As always, we design in the browser. 163 00:08:36,854 --> 00:08:39,344 We just do some default styling 164 00:08:39,344 --> 00:08:41,873 and then after that we see how it looks 165 00:08:41,873 --> 00:08:45,456 and then eventually change it if necessary. 166 00:08:46,662 --> 00:08:50,329 So we can have a nice border radius as well. 167 00:08:52,907 --> 00:08:54,824 Let's say three pixels. 168 00:08:59,765 --> 00:09:02,524 And then probably margin to the bottom of 169 00:09:02,524 --> 00:09:04,274 I will try 20 pixels. 170 00:09:07,236 --> 00:09:09,986 So let's take now a look at this. 171 00:09:13,979 --> 00:09:17,479 Alright, so all the website as we know it. 172 00:09:19,037 --> 00:09:20,780 And here's our little box. 173 00:09:20,780 --> 00:09:24,343 So something doesn't look so good here 174 00:09:24,343 --> 00:09:27,926 but let's take care of that later probably. 175 00:09:29,088 --> 00:09:32,651 So now I want some background color here. 176 00:09:32,651 --> 00:09:36,904 I will say that I want a green color for the success message 177 00:09:36,904 --> 00:09:40,487 and a red color for the error box, alright? 178 00:09:44,693 --> 00:09:47,860 So let's then define the success class 179 00:09:51,225 --> 00:09:55,267 and all we need here is actually the background color. 180 00:09:55,267 --> 00:09:56,517 Sorry, success. 181 00:09:59,711 --> 00:10:04,098 So the background color and we want a nice little green. 182 00:10:04,098 --> 00:10:05,265 So I will just 183 00:10:06,914 --> 00:10:11,857 some random color so that I can now hit Control + E, 184 00:10:11,857 --> 00:10:13,868 or Command + E on a Mac, 185 00:10:13,868 --> 00:10:16,118 to choose that green color. 186 00:10:18,427 --> 00:10:21,013 I should probably use one of the tools 187 00:10:21,013 --> 00:10:23,734 that I showed you before for choosing this color 188 00:10:23,734 --> 00:10:27,316 but right now I will just pick some green color 189 00:10:27,316 --> 00:10:29,566 from this color picker here 190 00:10:30,956 --> 00:10:35,400 and later if you want you can then adjust it for you, 191 00:10:35,400 --> 00:10:37,277 the green color that you like more 192 00:10:37,277 --> 00:10:41,444 or that is more suitable for your website, whatever. 193 00:10:42,622 --> 00:10:47,296 So let's just see how it looks like with this one. 194 00:10:47,296 --> 00:10:51,463 It look like anything at all here what's wrong here? 195 00:10:54,786 --> 00:10:56,203 Yeah, here it is. 196 00:10:57,334 --> 00:11:00,284 Of course, success was misspelled. 197 00:11:00,284 --> 00:11:02,487 So now it should work, alright. 198 00:11:02,487 --> 00:11:04,987 So it's a nice green box here. 199 00:11:08,042 --> 00:11:10,993 Maybe we could even make it transparent 200 00:11:10,993 --> 00:11:12,621 so that the map is still visible. 201 00:11:12,621 --> 00:11:14,575 Maybe this looks better. 202 00:11:14,575 --> 00:11:17,333 So again, I will hit Command + E 203 00:11:17,333 --> 00:11:20,590 and then down here I choose the transparency level, 204 00:11:20,590 --> 00:11:22,090 09 could be great. 205 00:11:24,230 --> 00:11:25,397 Maybe even 07, 206 00:11:28,637 --> 00:11:29,887 just look like. 207 00:11:31,076 --> 00:11:33,159 A little too much, so 08. 208 00:11:36,899 --> 00:11:39,773 Yeah, let's leave it at that. 209 00:11:39,773 --> 00:11:42,570 You can always change it if you feel like it. 210 00:11:42,570 --> 00:11:44,313 And now we need the same thing 211 00:11:44,313 --> 00:11:47,813 for the error, we'll just call this error. 212 00:11:50,462 --> 00:11:54,379 And then here we will use red background color. 213 00:12:00,040 --> 00:12:03,207 So again, just pick some random color. 214 00:12:04,849 --> 00:12:07,182 And then here some nice red. 215 00:12:10,730 --> 00:12:13,730 Alright, and then some transparency. 216 00:12:17,762 --> 00:12:20,762 And just to see how this looks like. 217 00:12:22,609 --> 00:12:26,026 Or we can actually put the same box below 218 00:12:29,409 --> 00:12:32,242 as we will need it later actually. 219 00:12:33,356 --> 00:12:35,689 So this could be like, oops. 220 00:12:42,148 --> 00:12:43,981 "Something went wrong. 221 00:12:45,156 --> 00:12:46,739 "Please try again." 222 00:12:49,658 --> 00:12:52,408 So let's take a look at that one. 223 00:12:53,393 --> 00:12:54,773 It looks nice actually 224 00:12:54,773 --> 00:12:58,523 but the text here should be a littler darker. 225 00:13:00,309 --> 00:13:02,991 Actually in both of them. 226 00:13:02,991 --> 00:13:05,074 Let's just add color 333, 227 00:13:06,535 --> 00:13:09,006 this is a very gray text. 228 00:13:09,006 --> 00:13:12,895 Usually this is the most dark text that I ever use. 229 00:13:12,895 --> 00:13:16,062 Usually never go darker than this one. 230 00:13:18,160 --> 00:13:20,327 Yeah, it looks better now. 231 00:13:21,756 --> 00:13:24,860 So now let's just hide one of these one 232 00:13:24,860 --> 00:13:29,649 and then we can change the height of this entire row here 233 00:13:29,649 --> 00:13:33,816 so that the contact form fits the height of this again. 234 00:13:39,476 --> 00:13:42,309 So I'll now comment this code here 235 00:13:46,219 --> 00:13:48,537 'cause we don't want to see it for now. 236 00:13:48,537 --> 00:13:52,704 And now we can go here to which would be the map box 237 00:13:53,805 --> 00:13:55,222 but I'm not sure. 238 00:13:56,200 --> 00:13:58,117 Yeah, it's the map box. 239 00:13:59,054 --> 00:14:02,234 So I will change the height of it. 240 00:14:02,234 --> 00:14:04,234 Let's say to 600 pixels. 241 00:14:08,096 --> 00:14:12,770 And then again I will have to change all of these. 242 00:14:12,770 --> 00:14:16,141 But we already see that it's not high enough. 243 00:14:16,141 --> 00:14:19,641 So let's change it to 650 pixels, alright. 244 00:14:21,505 --> 00:14:24,005 And, yeah it looks better now. 245 00:14:25,164 --> 00:14:27,581 So let's now increase the map 246 00:14:29,574 --> 00:14:30,657 to 650 pixels 247 00:14:32,237 --> 00:14:36,070 as well as the form box to 650 pixels as well. 248 00:14:39,497 --> 00:14:41,796 Now it looks better. 249 00:14:41,796 --> 00:14:46,412 Now let's just for a second look at what's happening here. 250 00:14:46,412 --> 00:14:50,052 And probably we should just put this message here 251 00:14:50,052 --> 00:14:52,025 into its own row 252 00:14:52,025 --> 00:14:56,431 such as we did with each of these elements here. 253 00:14:56,431 --> 00:14:59,228 So we have a row for this, for this, for this, 254 00:14:59,228 --> 00:15:01,431 and we will now use a row for this one 255 00:15:01,431 --> 00:15:05,014 and this will hopefully solve this problem. 256 00:15:13,803 --> 00:15:15,779 This, yeah, of course. 257 00:15:15,779 --> 00:15:18,946 It should of course not be in this row 258 00:15:20,358 --> 00:15:23,608 but instead it should have its own row. 259 00:15:30,338 --> 00:15:33,505 And of course this one goes also here. 260 00:15:41,334 --> 00:15:44,307 And here we go, it looks much better. 261 00:15:44,307 --> 00:15:47,474 And now we have this weird space here. 262 00:15:48,847 --> 00:15:50,372 I think it would be best 263 00:15:50,372 --> 00:15:52,594 if we actually increased the margin 264 00:15:52,594 --> 00:15:54,677 of this message box here. 265 00:15:59,835 --> 00:16:02,002 So, let's say to 30 pixels 266 00:16:05,026 --> 00:16:07,210 and this was probably a little bit too much. 267 00:16:07,210 --> 00:16:09,701 I will increase it just 20 pixels 268 00:16:09,701 --> 00:16:12,451 and then take another look at it. 269 00:16:15,347 --> 00:16:17,430 Yeah, so now it's better. 270 00:16:19,082 --> 00:16:23,165 Now the next step will be to show these two boxes 271 00:16:24,235 --> 00:16:27,318 according to the success or the error 272 00:16:28,297 --> 00:16:30,380 of the mailer.php script. 273 00:16:33,182 --> 00:16:36,017 So if you remember in here 274 00:16:36,017 --> 00:16:37,932 we passed this code. 275 00:16:37,932 --> 00:16:39,829 This is a variable called success 276 00:16:39,829 --> 00:16:43,449 and we define it as minus one if there's an error 277 00:16:43,449 --> 00:16:46,032 and as one if there is success. 278 00:16:47,530 --> 00:16:50,154 Now what we got to do is to include PHP 279 00:16:50,154 --> 00:16:52,817 right into our HTML file 280 00:16:52,817 --> 00:16:55,067 and then work with PHP here 281 00:16:56,342 --> 00:16:58,621 and how do we do this? 282 00:16:58,621 --> 00:17:00,882 We just write like this, 283 00:17:00,882 --> 00:17:03,382 PHP and then here we close it. 284 00:17:06,265 --> 00:17:08,755 And brackets doesn't like this 285 00:17:08,755 --> 00:17:10,288 and it's actually right 286 00:17:10,288 --> 00:17:11,973 because now what we have to do 287 00:17:11,973 --> 00:17:14,473 is to save this as a PHP file. 288 00:17:17,663 --> 00:17:20,019 So as long as you have a piece of PHP 289 00:17:20,019 --> 00:17:22,816 inside of your HTML document 290 00:17:22,816 --> 00:17:25,316 we need to call it a PHP file. 291 00:17:26,168 --> 00:17:30,268 Alright, so the rest of this is still HTML of course 292 00:17:30,268 --> 00:17:33,851 but now we have a little piece of PHP here. 293 00:17:36,475 --> 00:17:38,409 So now these comments are no longer valid 294 00:17:38,409 --> 00:17:41,647 because these are HTML comments 295 00:17:41,647 --> 00:17:43,397 and not PHP comments. 296 00:17:45,114 --> 00:17:46,551 Alright, so what do we do here? 297 00:17:46,551 --> 00:17:49,961 We say that if the success is one 298 00:17:49,961 --> 00:17:52,374 then we want this message here to show 299 00:17:52,374 --> 00:17:54,654 and if the success is minus one 300 00:17:54,654 --> 00:17:57,872 we want this message to show. 301 00:17:57,872 --> 00:17:58,944 So how do we do that? 302 00:17:58,944 --> 00:18:00,027 We just write 303 00:18:03,044 --> 00:18:03,877 "If 304 00:18:06,613 --> 00:18:07,446 get 305 00:18:09,649 --> 00:18:10,982 success is one." 306 00:18:15,300 --> 00:18:17,254 so again, I will not worry here 307 00:18:17,254 --> 00:18:18,837 about syntax things 308 00:18:19,820 --> 00:18:23,987 because that is not my goal with this course for you. 309 00:18:24,877 --> 00:18:28,191 Alright, so I will just show you how to do this. 310 00:18:28,191 --> 00:18:32,358 And to display packs with PHP we used the echo function 311 00:18:34,149 --> 00:18:38,316 and now inside of this echo we will put all of this text. 312 00:18:47,225 --> 00:18:51,554 And all of this text needs to be in quotes 313 00:18:51,554 --> 00:18:53,776 and then a semicolon after it. 314 00:18:53,776 --> 00:18:56,075 Since we also have to quotes here 315 00:18:56,075 --> 00:18:57,435 we have to escape it, 316 00:18:57,435 --> 00:18:59,657 this is how it calls in PHP, 317 00:18:59,657 --> 00:19:02,240 and for that we use this slash. 318 00:19:04,561 --> 00:19:08,728 So this way PHP doesn't interpret it as a real quote. 319 00:19:12,531 --> 00:19:14,561 So if the success is one 320 00:19:14,561 --> 00:19:18,728 then this HTML line will be outputted by the code. 321 00:19:25,021 --> 00:19:28,086 And now we just have to do the same thing 322 00:19:28,086 --> 00:19:30,557 for the minus one part. 323 00:19:30,557 --> 00:19:32,338 So if it's minus one 324 00:19:32,338 --> 00:19:34,255 then we want this text. 325 00:19:38,832 --> 00:19:41,749 And here we need to change to error 326 00:19:53,372 --> 00:19:54,955 from a code nicely. 327 00:19:59,464 --> 00:20:01,533 And yeah, that should be it probably. 328 00:20:01,533 --> 00:20:03,616 So I will now upload this 329 00:20:05,613 --> 00:20:09,195 with this extension that I showed you before 330 00:20:09,195 --> 00:20:12,695 and now we just need to wait a little bit. 331 00:20:14,578 --> 00:20:16,073 Alright, here we go, 332 00:20:16,073 --> 00:20:18,850 and now I'm ready to open it. 333 00:20:18,850 --> 00:20:19,767 Here we go. 334 00:20:24,750 --> 00:20:27,701 So now it's time to test the thing. 335 00:20:27,701 --> 00:20:29,674 So something is wrong here 336 00:20:29,674 --> 00:20:32,049 and there's actually a good reason for it. 337 00:20:32,049 --> 00:20:34,731 Because what we want to do now, 338 00:20:34,731 --> 00:20:36,608 what we want to open here, 339 00:20:36,608 --> 00:20:38,441 is the index.php file. 340 00:20:40,305 --> 00:20:44,367 The problem here is that they are both .php 341 00:20:44,367 --> 00:20:46,570 and the .html file on the server 342 00:20:46,570 --> 00:20:48,753 so now we would need to go ahead 343 00:20:48,753 --> 00:20:51,170 and delete the old .html file 344 00:20:53,198 --> 00:20:55,324 and then everything will just work fine. 345 00:20:55,324 --> 00:20:57,067 I will not do that now. 346 00:20:57,067 --> 00:20:59,749 I will just open it like this 347 00:20:59,749 --> 00:21:03,619 so I directly opened the index.php file 348 00:21:03,619 --> 00:21:04,902 that I want. 349 00:21:04,902 --> 00:21:06,971 And everything looks the same of course 350 00:21:06,971 --> 00:21:09,721 but now down here it looks great. 351 00:21:10,822 --> 00:21:15,515 So this bug that you had before is now no longer here. 352 00:21:15,515 --> 00:21:18,465 So that's just try this out. 353 00:21:18,465 --> 00:21:21,722 So here just some random email 354 00:21:21,722 --> 00:21:23,055 and, "Hey test." 355 00:21:27,239 --> 00:21:30,323 And now there is actually some bug in the code 356 00:21:30,323 --> 00:21:31,779 as we can obviously see. 357 00:21:31,779 --> 00:21:33,216 So nothing's happening. 358 00:21:33,216 --> 00:21:36,973 So I will just go back and check my, 359 00:21:36,973 --> 00:21:39,640 I'm sorry, and check my PHP file 360 00:21:42,088 --> 00:21:45,440 and yeah, what I immediately see that here 361 00:21:45,440 --> 00:21:47,523 is the semicolon missing. 362 00:21:50,364 --> 00:21:54,531 So now I will just load this again, and here we go. 363 00:21:55,747 --> 00:21:57,413 So let's test the thing now 364 00:21:57,413 --> 00:22:01,580 and hopefully everything will work just fine right now. 365 00:22:05,574 --> 00:22:07,491 So, "Hey test message." 366 00:22:12,355 --> 00:22:15,765 Alright, so this message got sent. 367 00:22:15,765 --> 00:22:19,932 So no error here and everything worked as expected. 368 00:22:21,071 --> 00:22:23,654 So down here we have our email. 369 00:22:25,133 --> 00:22:27,891 So name Jonas, email testedtest 370 00:22:27,891 --> 00:22:30,228 and message, hey test message. 371 00:22:30,228 --> 00:22:34,060 This is exactly the text that we put here 372 00:22:34,060 --> 00:22:35,227 in our script. 373 00:22:37,620 --> 00:22:40,220 You see the subject is new contact from name, 374 00:22:40,220 --> 00:22:42,887 which is Jonas, and then we have 375 00:22:43,764 --> 00:22:47,212 the name, the email, the message 376 00:22:47,212 --> 00:22:51,120 exactly as we have here in the script. 377 00:22:51,120 --> 00:22:54,338 So, I hope you can make this work for you now. 378 00:22:54,338 --> 00:22:57,231 I know that this was an important part 379 00:22:57,231 --> 00:22:58,481 for many of you 380 00:22:59,434 --> 00:23:02,461 so you had a great website and a good looking form 381 00:23:02,461 --> 00:23:04,127 but it didn't work, 382 00:23:04,127 --> 00:23:05,813 and now you can make it work. 383 00:23:05,813 --> 00:23:08,208 So if you have any questions about that 384 00:23:08,208 --> 00:23:11,637 or if anything doesn't work or, I don't know, 385 00:23:11,637 --> 00:23:14,549 if you face some kind of problem 386 00:23:14,549 --> 00:23:16,426 please just let me know in the comments 387 00:23:16,426 --> 00:23:17,824 and post in the discussion 388 00:23:17,824 --> 00:23:20,372 and I will try to help you as always. 389 00:23:20,372 --> 00:23:23,954 And I hope you like this bonus lecture 390 00:23:23,954 --> 00:23:26,621 and see you in the course forum.