Voiceover: Hello everyone, it's Jonas 2 2
and I'm back with another bonus lecture for this course. 3 3
And I know that many students have been waiting for this one 4 4
and because in this lecture 5 5
we will finally make our contact form work 6 6
using some very simple PHP 7 7
that I will provide you along the way. 8 8
So but first let's distinguish here 9 9
between the client side and the server side code. 10 10
So far we've been using HTML, CSS, and JavaScript 11 11
which is code that runs in the browser. 12 12
Which means that it's client side code. 13 13
Now, on the other hand, 14 14
we have server side code such as PHP, Microsoft.NET, 15 15
or the Ruby and Rails framework 16 16
which is code that is executed on the server. 17 17
Client side then interacts with the server side. 18 18
In our example that we will work on in this lecture 19 19
the browser will send our form data 20 20
to the PHP script, which is on the server. 21 21
This script will then send an email 22 22
and return a success code to the browser. 23 23
So this means that this will only work 24 24
if you already have your website hosted 25 25
on a web server in the internet. 26 26
So this will really not work on your local computer. 27 27
So again, you need to have this online 28 28
in order to make this work. 29 29
So this is our HTML file 30 30
and maybe you will notice here on this side 31 31
I have these small icons now 32 32
and they're really handy 33 33
to distinguish between different file types 34 34
and this is just a small brackets plugin, 35 35
which is called brackets icons. 36 36
So you can just install it 37 37
and see if you like this kind of icons here. 38 38
So let's just go down here to our form. 39 39
Yeah, so here it is. 40 40
So we will use a PHP file, which will be a script 41 41
hosted on our server, 42 42
which will be called mailer.php 43 43
and this is a script that will be executed 44 44
once the user clicks here on this submit button. 45 45
So I will now take a look with you at this PHP script. 46 46
I already wrote this and it's available for downloads 47 47
right from this lecture. 48 48
So as this is not a PHP course 49 49
I will not teach you a step-by-step 50 50
how to write this code 51 51
but I will of course go with you through the script 52 52
so that you understand the basics of it so how it works. 53 53
So here in this first part we have three variables 54 54
which will have the name that the user enters 55 55
into the form, the email address, as well as the message. 56 56
And these functions here 57 57
they basically remove the HTML tags 58 58
and wide space from the variables that the user enters. 59 59
So and then next here these variables will be checked. 60 60
So if the name that the user entered is empty 61 61
or if the message is empty 62 62
or if the email address is not valid 63 63
then we will be redirected to our website 64 64
with this success code here, minus one in this case, 65 65
and we will see later in the lecture 66 66
how to handle this. 67 67
So we will handle this with an error message. 68 68
And after that this script will be exited 69 69
and that's it in this case. 70 70
So this is what happens when there is an error. 71 71
So in case they're not 72 72
then the script will be executed further down. 73 73
So we reach this point here 74 74
we need to define the next variable 75 75
which is the email address that we want email to be sent. 76 76
In this case this is my email address 77 77
hello@webdesigncourse.co 78 78
and the next step will be to define the subject 79 79
of the message that will be sent 80 80
of the email that will be sent. 81 81
And next just the simple content. 82 82
So here we use these variables that we defined before, 83 83
the name and the email and the actual message 84 84
so that we can build a nice email from it. 85 85
Next we need to define email headers. 86 86
This is something that is part of every email. 87 87
It's not visible to the user 88 88
but it's part of an email that is sent. 89 89
And then finally here is the most important PHP function 90 90
which is mail. 91 91
It takes the recipient, so our email address; 92 92
the subject, the email content, which is this here; 93 93
and the email header. 94 94
So these four variables are used by this function 95 95
and are then sent to hello@webdesigncourse.co. 96 96
So you will of course update this 97 97
to the email address 98 98
that you want the form to send emails to. 99 99
Actually back here, don't need this. 100 100
And finally, after sending the email 101 101
we will redirect to our website 102 102
this time with the success code one. 103 103
So this is the success code 104 104
and not an error code. 105 105
After that we have this little part here 106 106
and what this does is to go directly to the place 107 107
in the website which has an ID form. 108 108
So let's just quickly add this one 109 109
in the HTML file. 110 110
So I'll put this ID right here 111 111
where I want the code to go then. 112 112
So probably here is a good place, 113 113
no, maybe better here actually. 114 114
So ID will be just four, alright? 115 115
So as I'm still here on my computer 116 116
and didn't upload anything yet 117 117
I'm not able to test it so far. 118 118
So I will now quickly make the success and the error boxes 119 119
that I mentioned before 120 120
so that we can give the user a nice feedback 121 121
telling them that their mail was sent 122 122
or that there was some kind of error. 123 123
So now we'll do that right here 124 124
at the beginning of the form, actually. 125 125
So we use a simple div here 126 126
and I will call this one 127 127
form messages. 128 128
And we will do separate classes for the success. 129 129
So in this case, in the success case 130 130
we can say something like, 131 131
"Thank you! 132 132
"Your message has been sent." 133 133
And now we can just format this in CSS 134 134
like you're already used to do. 135 135
So form messages, messages sorry. 136 136
Alright, so let's give it some width. 137 137
Let's say for example 70% for now 138 138
and we want to center it, 139 139
margin zero and auto. 140 140
One more thing that I noticed here right now 141 141
is this red icon here, 142 142
this is yet another brackets plugin, 143 143
a very handy one. 144 144
It's called the interactive linter. 145 145
I will just show it to you 146 146
so you can install it for yourself 147 147
because I really recommend you to do it. 148 148
It is this one, interactive linter. 149 149
So you install it 150 150
and it will help you avoid bugs in your code. 151 151
So in this case it knows that I have some mistake here 152 152
and so it puts this little icon here 153 153
so I can immediately find the error. 154 154
And it also gives me this warning icon down here. 155 155
So this is really great. 156 156
It's really helpful and it will help you 157 157
making last mistakes basically. 158 158
So again back to our code and now the icon is gone. 159 159
Now everything's fine. 160 160
So we can continue here with the code. 161 161
Give it some padding like 10 pixels for now. 162 162
As always, we design in the browser. 163 163
We just do some default styling 164 164
and then after that we see how it looks 165 165
and then eventually change it if necessary. 166 166
So we can have a nice border radius as well. 167 167
Let's say three pixels. 168 168
And then probably margin to the bottom of 169 169
I will try 20 pixels. 170 170
So let's take now a look at this. 171 171
Alright, so all the website as we know it. 172 172
And here's our little box. 173 173
So something doesn't look so good here 174 174
but let's take care of that later probably. 175 175
So now I want some background color here. 176 176
I will say that I want a green color for the success message 177 177
and a red color for the error box, alright? 178 178
So let's then define the success class 179 179
and all we need here is actually the background color. 180 180
Sorry, success. 181 181
So the background color and we want a nice little green. 182 182
So I will just 183 183
some random color so that I can now hit Control + E, 184 184
or Command + E on a Mac, 185 185
to choose that green color. 186 186
I should probably use one of the tools 187 187
that I showed you before for choosing this color 188 188
but right now I will just pick some green color 189 189
from this color picker here 190 190
and later if you want you can then adjust it for you, 191 191
the green color that you like more 192 192
or that is more suitable for your website, whatever. 193 193
So let's just see how it looks like with this one. 194 194
It look like anything at all here what's wrong here? 195 195
Yeah, here it is. 196 196
Of course, success was misspelled. 197 197
So now it should work, alright. 198 198
So it's a nice green box here. 199 199
Maybe we could even make it transparent 200 200
so that the map is still visible. 201 201
Maybe this looks better. 202 202
So again, I will hit Command + E 203 203
and then down here I choose the transparency level, 204 204
09 could be great. 205 205
Maybe even 07, 206 206
just look like. 207 207
A little too much, so 08. 208 208
Yeah, let's leave it at that. 209 209
You can always change it if you feel like it. 210 210
And now we need the same thing 211 211
for the error, we'll just call this error. 212 212
And then here we will use red background color. 213 213
So again, just pick some random color. 214 214
And then here some nice red. 215 215
Alright, and then some transparency. 216 216
And just to see how this looks like. 217 217
Or we can actually put the same box below 218 218
as we will need it later actually. 219 219
So this could be like, oops. 220 220
"Something went wrong. 221 221
"Please try again." 222 222
So let's take a look at that one. 223 223
It looks nice actually 224 224
but the text here should be a littler darker. 225 225
Actually in both of them. 226 226
Let's just add color 333, 227 227
this is a very gray text. 228 228
Usually this is the most dark text that I ever use. 229 229
Usually never go darker than this one. 230 230
Yeah, it looks better now. 231 231
So now let's just hide one of these one 232 232
and then we can change the height of this entire row here 233 233
so that the contact form fits the height of this again. 234 234
So I'll now comment this code here 235 235
'cause we don't want to see it for now. 236 236
And now we can go here to which would be the map box 237 237
but I'm not sure. 238 238
Yeah, it's the map box. 239 239
So I will change the height of it. 240 240
Let's say to 600 pixels. 241 241
And then again I will have to change all of these. 242 242
But we already see that it's not high enough. 243 243
So let's change it to 650 pixels, alright. 244 244
And, yeah it looks better now. 245 245
So let's now increase the map 246 246
to 650 pixels 247 247
as well as the form box to 650 pixels as well. 248 248
Now it looks better. 249 249
Now let's just for a second look at what's happening here. 250 250
And probably we should just put this message here 251 251
into its own row 252 252
such as we did with each of these elements here. 253 253
So we have a row for this, for this, for this, 254 254
and we will now use a row for this one 255 255
and this will hopefully solve this problem. 256 256
This, yeah, of course. 257 257
It should of course not be in this row 258 258
but instead it should have its own row. 259 259
And of course this one goes also here. 260 260
And here we go, it looks much better. 261 261
And now we have this weird space here. 262 262
I think it would be best 263 263
if we actually increased the margin 264 264
of this message box here. 265 265
So, let's say to 30 pixels 266 266
and this was probably a little bit too much. 267 267
I will increase it just 20 pixels 268 268
and then take another look at it. 269 269
Yeah, so now it's better. 270 270
Now the next step will be to show these two boxes 271 271
according to the success or the error 272 272
of the mailer.php script. 273 273
So if you remember in here 274 274
we passed this code. 275 275
This is a variable called success 276 276
and we define it as minus one if there's an error 277 277
and as one if there is success. 278 278
Now what we got to do is to include PHP 279 279
right into our HTML file 280 280
and then work with PHP here 281 281
and how do we do this? 282 282
We just write like this, 283 283
PHP and then here we close it. 284 284
And brackets doesn't like this 285 285
and it's actually right 286 286
because now what we have to do 287 287
is to save this as a PHP file. 288 288
So as long as you have a piece of PHP 289 289
inside of your HTML document 290 290
we need to call it a PHP file. 291 291
Alright, so the rest of this is still HTML of course 292 292
but now we have a little piece of PHP here. 293 293
So now these comments are no longer valid 294 294
because these are HTML comments 295 295
and not PHP comments. 296 296
Alright, so what do we do here? 297 297
We say that if the success is one 298 298
then we want this message here to show 299 299
and if the success is minus one 300 300
we want this message to show. 301 301
So how do we do that? 302 302
We just write 303 303
"If 304 304
get 305 305
success is one." 306 306
so again, I will not worry here 307 307
about syntax things 308 308
because that is not my goal with this course for you. 309 309
Alright, so I will just show you how to do this. 310 310
And to display packs with PHP we used the echo function 311 311
and now inside of this echo we will put all of this text. 312 312
And all of this text needs to be in quotes 313 313
and then a semicolon after it. 314 314
Since we also have to quotes here 315 315
we have to escape it, 316 316
this is how it calls in PHP, 317 317
and for that we use this slash. 318 318
So this way PHP doesn't interpret it as a real quote. 319 319
So if the success is one 320 320
then this HTML line will be outputted by the code. 321 321
And now we just have to do the same thing 322 322
for the minus one part. 323 323
So if it's minus one 324 324
then we want this text. 325 325
And here we need to change to error 326 326
from a code nicely. 327 327
And yeah, that should be it probably. 328 328
So I will now upload this 329 329
with this extension that I showed you before 330 330
and now we just need to wait a little bit. 331 331
Alright, here we go, 332 332
and now I'm ready to open it. 333 333
Here we go. 334 334
So now it's time to test the thing. 335 335
So something is wrong here 336 336
and there's actually a good reason for it. 337 337
Because what we want to do now, 338 338
what we want to open here, 339 339
is the index.php file. 340 340
The problem here is that they are both .php 341 341
and the .html file on the server 342 342
so now we would need to go ahead 343 343
and delete the old .html file 344 344
and then everything will just work fine. 345 345
I will not do that now. 346 346
I will just open it like this 347 347
so I directly opened the index.php file 348 348
that I want. 349 349
And everything looks the same of course 350 350
but now down here it looks great. 351 351
So this bug that you had before is now no longer here. 352 352
So that's just try this out. 353 353
So here just some random email 354 354
and, "Hey test." 355 355
And now there is actually some bug in the code 356 356
as we can obviously see. 357 357
So nothing's happening. 358 358
So I will just go back and check my, 359 359
I'm sorry, and check my PHP file 360 360
and yeah, what I immediately see that here 361 361
is the semicolon missing. 362 362
So now I will just load this again, and here we go. 363 363
So let's test the thing now 364 364
and hopefully everything will work just fine right now. 365 365
So, "Hey test message." 366 366
Alright, so this message got sent. 367 367
So no error here and everything worked as expected. 368 368
So down here we have our email. 369 369
So name Jonas, email testedtest 370 370
and message, hey test message. 371 371
This is exactly the text that we put here 372 372
in our script. 373 373
You see the subject is new contact from name, 374 374
which is Jonas, and then we have 375 375
the name, the email, the message 376 376
exactly as we have here in the script. 377 377
So, I hope you can make this work for you now. 378 378
I know that this was an important part 379 379
for many of you 380 380
so you had a great website and a good looking form 381 381
but it didn't work, 382 382
and now you can make it work. 383 383
So if you have any questions about that 384 384
or if anything doesn't work or, I don't know, 385 385
if you face some kind of problem 386 386
please just let me know in the comments 387 387
and post in the discussion 388 388
and I will try to help you as always. 389 389
And I hope you like this bonus lecture 390 390
and see you in the course forum.