All language subtitles for 3. Using PHP to make our form work

Hello everyone, it's Jonas
2

and I'm back with another bonus lecture for this course.
3

And I know that many students have been waiting for this one
4

and because in this lecture
5

we will finally make our contact form work
6

using some very simple PHP
7

that I will provide you along the way.
8

So but first let's distinguish here
9

between the client side and the server side code.
10

So far we've been using HTML, CSS, and JavaScript
11

which is code that runs in the browser.
12

Which means that it's client side code.
13

Now, on the other hand,
14

we have server side code such as PHP, Microsoft.NET,
15

or the Ruby and Rails framework
16

which is code that is executed on the server.
17

Client side then interacts with the server side.
18

In our example that we will work on in this lecture
19

the browser will send our form data
20

to the PHP script, which is on the server.
21

This script will then send an email
22

and return a success code to the browser.
23

So this means that this will only work
24

if you already have your website hosted
25

on a web server in the internet.
26

So this will really not work on your local computer.
27

So again, you need to have this online
28

in order to make this work.
29

So this is our HTML file
30

and maybe you will notice here on this side
31

I have these small icons now
32

and they're really handy
33

to distinguish between different file types
34

and this is just a small brackets plugin,
35

which is called brackets icons.
36

So you can just install it
37

and see if you like this kind of icons here.
38

So let's just go down here to our form.
39

Yeah, so here it is.
40

So we will use a PHP file, which will be a script
41

hosted on our server,
42

which will be called mailer.php
43

and this is a script that will be executed
44

once the user clicks here on this submit button.
45

So I will now take a look with you at this PHP script.
46

I already wrote this and it's available for downloads
47

right from this lecture.
48

So as this is not a PHP course
49

I will not teach you a step-by-step
50

how to write this code
51

but I will of course go with you through the script
52

so that you understand the basics of it so how it works.
53

So here in this first part we have three variables
54

which will have the name that the user enters
55

into the form, the email address, as well as the message.
56

And these functions here
57

they basically remove the HTML tags
58

and wide space from the variables that the user enters.
59

So and then next here these variables will be checked.
60

So if the name that the user entered is empty
61

or if the message is empty
62

or if the email address is not valid
63

then we will be redirected to our website
64

with this success code here, minus one in this case,
65

and we will see later in the lecture
66

how to handle this.
67

So we will handle this with an error message.
68

And after that this script will be exited
69

and that's it in this case.
70

So this is what happens when there is an error.
71

So in case they're not
72

then the script will be executed further down.
73

So we reach this point here
74

we need to define the next variable
75

which is the email address that we want email to be sent.
76

In this case this is my email address
77

hello@webdesigncourse.co
78

and the next step will be to define the subject
79

of the message that will be sent
80

of the email that will be sent.
81

And next just the simple content.
82

So here we use these variables that we defined before,
83

the name and the email and the actual message
84

so that we can build a nice email from it.
85

Next we need to define email headers.
86

This is something that is part of every email.
87

It's not visible to the user
88

but it's part of an email that is sent.
89

And then finally here is the most important PHP function
90

which is mail.
91

It takes the recipient, so our email address;
92

the subject, the email content, which is this here;
93

and the email header.
94

So these four variables are used by this function
95

and are then sent to hello@webdesigncourse.co.
96

So you will of course update this
97

to the email address
98

that you want the form to send emails to.
99

Actually back here, don't need this.
100

And finally, after sending the email
101

we will redirect to our website
102

this time with the success code one.
103

So this is the success code
104

and not an error code.
105

After that we have this little part here
106

and what this does is to go directly to the place
107

in the website which has an ID form.
108

So let's just quickly add this one
109

in the HTML file.
110

So I'll put this ID right here
111

where I want the code to go then.
112

So probably here is a good place,
113

no, maybe better here actually.
114

So ID will be just four, alright?
115

So as I'm still here on my computer
116

and didn't upload anything yet
117

I'm not able to test it so far.
118

So I will now quickly make the success and the error boxes
119

that I mentioned before
120

so that we can give the user a nice feedback
121

telling them that their mail was sent
122

or that there was some kind of error.
123

So now we'll do that right here
124

at the beginning of the form, actually.
125

So we use a simple div here
126

and I will call this one
127

form messages.
128

And we will do separate classes for the success.
129

So in this case, in the success case
130

we can say something like,
131

"Thank you!
132

"Your message has been sent."
133

And now we can just format this in CSS
134

like you're already used to do.
135

So form messages, messages sorry.
136

Alright, so let's give it some width.
137

Let's say for example 70% for now
138

and we want to center it,
139

margin zero and auto.
140

One more thing that I noticed here right now
141

is this red icon here,
142

this is yet another brackets plugin,
143

a very handy one.
144

It's called the interactive linter.
145

I will just show it to you
146

so you can install it for yourself
147

because I really recommend you to do it.
148

It is this one, interactive linter.
149

So you install it
150

and it will help you avoid bugs in your code.
151

So in this case it knows that I have some mistake here
152

and so it puts this little icon here
153

so I can immediately find the error.
154

And it also gives me this warning icon down here.
155

So this is really great.
156

It's really helpful and it will help you
157

making last mistakes basically.
158

So again back to our code and now the icon is gone.
159

Now everything's fine.
160

So we can continue here with the code.
161

Give it some padding like 10 pixels for now.
162

As always, we design in the browser.
163

We just do some default styling
164

and then after that we see how it looks
165

and then eventually change it if necessary.
166

So we can have a nice border radius as well.
167

Let's say three pixels.
168

And then probably margin to the bottom of
169

I will try 20 pixels.
170

So let's take now a look at this.
171

Alright, so all the website as we know it.
172

And here's our little box.
173

So something doesn't look so good here
174

but let's take care of that later probably.
175

So now I want some background color here.
176

I will say that I want a green color for the success message
177

and a red color for the error box, alright?
178

So let's then define the success class
179

and all we need here is actually the background color.
180

Sorry, success.
181

So the background color and we want a nice little green.
182

So I will just
183

some random color so that I can now hit Control + E,
184

or Command + E on a Mac,
185

to choose that green color.
186

I should probably use one of the tools
187

that I showed you before for choosing this color
188

but right now I will just pick some green color
189

from this color picker here
190

and later if you want you can then adjust it for you,
191

the green color that you like more
192

or that is more suitable for your website, whatever.
193

So let's just see how it looks like with this one.
194

It look like anything at all here what's wrong here?
195

Yeah, here it is.
196

Of course, success was misspelled.
197

So now it should work, alright.
198

So it's a nice green box here.
199

Maybe we could even make it transparent
200

so that the map is still visible.
201

Maybe this looks better.
202

So again, I will hit Command + E
203

and then down here I choose the transparency level,
204

09 could be great.
205

Maybe even 07,
206

just look like.
207

A little too much, so 08.
208

Yeah, let's leave it at that.
209

You can always change it if you feel like it.
210

And now we need the same thing
211

for the error, we'll just call this error.
212

And then here we will use red background color.
213

So again, just pick some random color.
214

And then here some nice red.
215

Alright, and then some transparency.
216

And just to see how this looks like.
217

Or we can actually put the same box below
218

as we will need it later actually.
219

So this could be like, oops.
220

"Something went wrong.
221

"Please try again."
222

So let's take a look at that one.
223

It looks nice actually
224

but the text here should be a littler darker.
225

Actually in both of them.
226

Let's just add color 333,
227

this is a very gray text.
228

Usually this is the most dark text that I ever use.
229

Usually never go darker than this one.
230

Yeah, it looks better now.
231

So now let's just hide one of these one
232

and then we can change the height of this entire row here
233

so that the contact form fits the height of this again.
234

So I'll now comment this code here
235

'cause we don't want to see it for now.
236

And now we can go here to which would be the map box
237

but I'm not sure.
238

Yeah, it's the map box.
239

So I will change the height of it.
240

Let's say to 600 pixels.
241

And then again I will have to change all of these.
242

But we already see that it's not high enough.
243

So let's change it to 650 pixels, alright.
244

And, yeah it looks better now.
245

So let's now increase the map
246

to 650 pixels
247

as well as the form box to 650 pixels as well.
248

Now it looks better.
249

Now let's just for a second look at what's happening here.
250

And probably we should just put this message here
251

into its own row
252

such as we did with each of these elements here.
253

So we have a row for this, for this, for this,
254

and we will now use a row for this one
255

and this will hopefully solve this problem.
256

This, yeah, of course.
257

It should of course not be in this row
258

but instead it should have its own row.
259

And of course this one goes also here.
260

And here we go, it looks much better.
261

And now we have this weird space here.
262

I think it would be best
263

if we actually increased the margin
264

of this message box here.
265

So, let's say to 30 pixels
266

and this was probably a little bit too much.
267

I will increase it just 20 pixels
268

and then take another look at it.
269

Yeah, so now it's better.
270

Now the next step will be to show these two boxes
271

according to the success or the error
272

of the mailer.php script.
273

So if you remember in here
274

we passed this code.
275

This is a variable called success
276

and we define it as minus one if there's an error
277

and as one if there is success.
278

Now what we got to do is to include PHP
279

right into our HTML file
280

and then work with PHP here
281

and how do we do this?
282

We just write like this,
283

PHP and then here we close it.
284

And brackets doesn't like this
285

and it's actually right
286

because now what we have to do
287

is to save this as a PHP file.
288

So as long as you have a piece of PHP
289

inside of your HTML document
290

we need to call it a PHP file.
291

Alright, so the rest of this is still HTML of course
292

but now we have a little piece of PHP here.
293

So now these comments are no longer valid
294

because these are HTML comments
295

and not PHP comments.
296

Alright, so what do we do here?
297

We say that if the success is one
298

then we want this message here to show
299

and if the success is minus one
300

we want this message to show.
301

So how do we do that?
302

We just write
303

"If
304

get
305

success is one."
306

so again, I will not worry here
307

about syntax things
308

because that is not my goal with this course for you.
309

Alright, so I will just show you how to do this.
310

And to display packs with PHP we used the echo function
311

and now inside of this echo we will put all of this text.
312

And all of this text needs to be in quotes
313

and then a semicolon after it.
314

Since we also have to quotes here
315

we have to escape it,
316

this is how it calls in PHP,
317

and for that we use this slash.
318

So this way PHP doesn't interpret it as a real quote.
319

So if the success is one
320

then this HTML line will be outputted by the code.
321

And now we just have to do the same thing
322

for the minus one part.
323

So if it's minus one
324

then we want this text.
325

And here we need to change to error
326

from a code nicely.
327

And yeah, that should be it probably.
328

So I will now upload this
329

with this extension that I showed you before
330

and now we just need to wait a little bit.
331

Alright, here we go,
332

and now I'm ready to open it.
333

Here we go.
334

So now it's time to test the thing.
335

So something is wrong here
336

and there's actually a good reason for it.
337

Because what we want to do now,
338

what we want to open here,
339

is the index.php file.
340

The problem here is that they are both .php
341

and the .html file on the server
342

so now we would need to go ahead
343

and delete the old .html file
344

and then everything will just work fine.
345

I will not do that now.
346

I will just open it like this
347

so I directly opened the index.php file
348

that I want.
349

And everything looks the same of course
350

but now down here it looks great.
351

So this bug that you had before is now no longer here.
352

So that's just try this out.
353

So here just some random email
354

and, "Hey test."
355

And now there is actually some bug in the code
356

as we can obviously see.
357

So nothing's happening.
358

So I will just go back and check my,
359

I'm sorry, and check my PHP file
360

and yeah, what I immediately see that here
361

is the semicolon missing.
362

So now I will just load this again, and here we go.
363

So let's test the thing now
364

and hopefully everything will work just fine right now.
365

So, "Hey test message."
366

Alright, so this message got sent.
367

So no error here and everything worked as expected.
368

So down here we have our email.
369

So name Jonas, email testedtest
370

and message, hey test message.
371

This is exactly the text that we put here
372

in our script.
373

You see the subject is new contact from name,
374

which is Jonas, and then we have
375

the name, the email, the message
376

exactly as we have here in the script.
377

So, I hope you can make this work for you now.
378

I know that this was an important part
379

for many of you
380

so you had a great website and a good looking form
381

but it didn't work,
382

and now you can make it work.
383

So if you have any questions about that
384

or if anything doesn't work or, I don't know,
385

if you face some kind of problem
386

please just let me know in the comments
387

and post in the discussion
388

and I will try to help you as always.
389

And I hope you like this bonus lecture
390

and see you in the course forum.