Voiceover: Hello everyone, it's Jonas
and I'm back with another bonus lecture for this course.
And I know that many students have been waiting for this one
and because in this lecture
we will finally make our contact form work
using some very simple PHP
that I will provide you along the way.
So but first let's distinguish here
between the client side and the server side code.
So far we've been using HTML, CSS, and JavaScript
which is code that runs in the browser.
Which means that it's client side code.
Now, on the other hand,
we have server side code such as PHP, Microsoft.NET,
or the Ruby and Rails framework
which is code that is executed on the server.
Client side then interacts with the server side.
In our example that we will work on in this lecture
the browser will send our form data
to the PHP script, which is on the server.
This script will then send an email
and return a success code to the browser.
So this means that this will only work
if you already have your website hosted
on a web server in the internet.
So this will really not work on your local computer.
So again, you need to have this online
in order to make this work.
So this is our HTML file
and maybe you will notice here on this side
I have these small icons now
and they're really handy
to distinguish between different file types
and this is just a small brackets plugin,
which is called brackets icons.
So you can just install it
and see if you like this kind of icons here.
So let's just go down here to our form.
Yeah, so here it is.
So we will use a PHP file, which will be a script
hosted on our server,
which will be called mailer.php
and this is a script that will be executed
once the user clicks here on this submit button.
So I will now take a look with you at this PHP script.
I already wrote this and it's available for downloads
right from this lecture.
So as this is not a PHP course
I will not teach you a step-by-step
how to write this code
but I will of course go with you through the script
so that you understand the basics of it so how it works.
So here in this first part we have three variables
which will have the name that the user enters
into the form, the email address, as well as the message.
And these functions here
they basically remove the HTML tags
and wide space from the variables that the user enters.
So and then next here these variables will be checked.
So if the name that the user entered is empty
or if the message is empty
or if the email address is not valid
then we will be redirected to our website
with this success code here, minus one in this case,
and we will see later in the lecture
how to handle this.
So we will handle this with an error message.
And after that this script will be exited
and that's it in this case.
So this is what happens when there is an error.
So in case they're not
then the script will be executed further down.
So we reach this point here
we need to define the next variable
which is the email address that we want email to be sent.
In this case this is my email address
hello@webdesigncourse.co
and the next step will be to define the subject
of the message that will be sent
of the email that will be sent.
And next just the simple content.
So here we use these variables that we defined before,
the name and the email and the actual message
so that we can build a nice email from it.
Next we need to define email headers.
This is something that is part of every email.
It's not visible to the user
but it's part of an email that is sent.
And then finally here is the most important PHP function
which is mail.
It takes the recipient, so our email address;
the subject, the email content, which is this here;
and the email header.
So these four variables are used by this function
and are then sent to hello@webdesigncourse.co.
So you will of course update this
to the email address
that you want the form to send emails to.
Actually back here, don't need this.
And finally, after sending the email
we will redirect to our website
this time with the success code one.
So this is the success code
and not an error code.
After that we have this little part here
and what this does is to go directly to the place
in the website which has an ID form.
So let's just quickly add this one
in the HTML file.
So I'll put this ID right here
where I want the code to go then.
So probably here is a good place,
no, maybe better here actually.
So ID will be just four, alright?
So as I'm still here on my computer
and didn't upload anything yet
I'm not able to test it so far.
So I will now quickly make the success and the error boxes
that I mentioned before
so that we can give the user a nice feedback
telling them that their mail was sent
or that there was some kind of error.
So now we'll do that right here
at the beginning of the form, actually.
So we use a simple div here
and I will call this one
form messages.
And we will do separate classes for the success.
So in this case, in the success case
we can say something like,
"Thank you!
"Your message has been sent."
And now we can just format this in CSS
like you're already used to do.
So form messages, messages sorry.
Alright, so let's give it some width.
Let's say for example 70% for now
and we want to center it,
margin zero and auto.
One more thing that I noticed here right now
is this red icon here,
this is yet another brackets plugin,
a very handy one.
It's called the interactive linter.
I will just show it to you
so you can install it for yourself
because I really recommend you to do it.
It is this one, interactive linter.
So you install it
and it will help you avoid bugs in your code.
So in this case it knows that I have some mistake here
and so it puts this little icon here
so I can immediately find the error.
And it also gives me this warning icon down here.
So this is really great.
It's really helpful and it will help you
making last mistakes basically.
So again back to our code and now the icon is gone.
Now everything's fine.
So we can continue here with the code.
Give it some padding like 10 pixels for now.
As always, we design in the browser.
We just do some default styling
and then after that we see how it looks
and then eventually change it if necessary.
So we can have a nice border radius as well.
Let's say three pixels.
And then probably margin to the bottom of
I will try 20 pixels.
So let's take now a look at this.
Alright, so all the website as we know it.
And here's our little box.
So something doesn't look so good here
but let's take care of that later probably.
So now I want some background color here.
I will say that I want a green color for the success message
and a red color for the error box, alright?
So let's then define the success class
and all we need here is actually the background color.
Sorry, success.
So the background color and we want a nice little green.
So I will just
some random color so that I can now hit Control + E,
or Command + E on a Mac,
to choose that green color.
I should probably use one of the tools
that I showed you before for choosing this color
but right now I will just pick some green color
from this color picker here
and later if you want you can then adjust it for you,
the green color that you like more
or that is more suitable for your website, whatever.
So let's just see how it looks like with this one.
It look like anything at all here what's wrong here?
Yeah, here it is.
Of course, success was misspelled.
So now it should work, alright.
So it's a nice green box here.
Maybe we could even make it transparent
so that the map is still visible.
Maybe this looks better.
So again, I will hit Command + E
and then down here I choose the transparency level,
09 could be great.
Maybe even 07,
just look like.
A little too much, so 08.
Yeah, let's leave it at that.
You can always change it if you feel like it.
And now we need the same thing
for the error, we'll just call this error.
And then here we will use red background color.
So again, just pick some random color.
And then here some nice red.
Alright, and then some transparency.
And just to see how this looks like.
Or we can actually put the same box below
as we will need it later actually.
So this could be like, oops.
"Something went wrong.
"Please try again."
So let's take a look at that one.
It looks nice actually
but the text here should be a littler darker.
Actually in both of them.
Let's just add color 333,
this is a very gray text.
Usually this is the most dark text that I ever use.
Usually never go darker than this one.
Yeah, it looks better now.
So now let's just hide one of these one
and then we can change the height of this entire row here
so that the contact form fits the height of this again.
So I'll now comment this code here
'cause we don't want to see it for now.
And now we can go here to which would be the map box
but I'm not sure.
Yeah, it's the map box.
So I will change the height of it.
Let's say to 600 pixels.
And then again I will have to change all of these.
But we already see that it's not high enough.
So let's change it to 650 pixels, alright.
And, yeah it looks better now.
So let's now increase the map
to 650 pixels
as well as the form box to 650 pixels as well.
Now it looks better.
Now let's just for a second look at what's happening here.
And probably we should just put this message here
into its own row
such as we did with each of these elements here.
So we have a row for this, for this, for this,
and we will now use a row for this one
and this will hopefully solve this problem.
This, yeah, of course.
It should of course not be in this row
but instead it should have its own row.
And of course this one goes also here.
And here we go, it looks much better.
And now we have this weird space here.
I think it would be best
if we actually increased the margin
of this message box here.
So, let's say to 30 pixels
and this was probably a little bit too much.
I will increase it just 20 pixels
and then take another look at it.
Yeah, so now it's better.
Now the next step will be to show these two boxes
according to the success or the error
of the mailer.php script.
So if you remember in here
we passed this code.
This is a variable called success
and we define it as minus one if there's an error
and as one if there is success.
Now what we got to do is to include PHP
right into our HTML file
and then work with PHP here
and how do we do this?
We just write like this,
PHP and then here we close it.
And brackets doesn't like this
and it's actually right
because now what we have to do
is to save this as a PHP file.
So as long as you have a piece of PHP
inside of your HTML document
we need to call it a PHP file.
Alright, so the rest of this is still HTML of course
but now we have a little piece of PHP here.
So now these comments are no longer valid
because these are HTML comments
and not PHP comments.
Alright, so what do we do here?
We say that if the success is one
then we want this message here to show
and if the success is minus one
we want this message to show.
So how do we do that?
We just write
"If
get
success is one."
so again, I will not worry here
about syntax things
because that is not my goal with this course for you.
Alright, so I will just show you how to do this.
And to display packs with PHP we used the echo function
and now inside of this echo we will put all of this text.
And all of this text needs to be in quotes
and then a semicolon after it.
Since we also have to quotes here
we have to escape it,
this is how it calls in PHP,
and for that we use this slash.
So this way PHP doesn't interpret it as a real quote.
So if the success is one
then this HTML line will be outputted by the code.
And now we just have to do the same thing
for the minus one part.
So if it's minus one
then we want this text.
And here we need to change to error
from a code nicely.
And yeah, that should be it probably.
So I will now upload this
with this extension that I showed you before
and now we just need to wait a little bit.
Alright, here we go,
and now I'm ready to open it.
Here we go.
So now it's time to test the thing.
So something is wrong here
and there's actually a good reason for it.
Because what we want to do now,
what we want to open here,
is the index.php file.
The problem here is that they are both .php
and the .html file on the server
so now we would need to go ahead
and delete the old .html file
and then everything will just work fine.
I will not do that now.
I will just open it like this
so I directly opened the index.php file
that I want.
And everything looks the same of course
but now down here it looks great.
So this bug that you had before is now no longer here.
So that's just try this out.
So here just some random email
and, "Hey test."
And now there is actually some bug in the code
as we can obviously see.
So nothing's happening.
So I will just go back and check my,
I'm sorry, and check my PHP file
and yeah, what I immediately see that here
is the semicolon missing.
So now I will just load this again, and here we go.
So let's test the thing now
and hopefully everything will work just fine right now.
So, "Hey test message."
Alright, so this message got sent.
So no error here and everything worked as expected.
So down here we have our email.
So name Jonas, email testedtest
and message, hey test message.
This is exactly the text that we put here
in our script.
You see the subject is new contact from name,
which is Jonas, and then we have
the name, the email, the message
exactly as we have here in the script.
So, I hope you can make this work for you now.
I know that this was an important part
for many of you
so you had a great website and a good looking form
but it didn't work,
and now you can make it work.
So if you have any questions about that
or if anything doesn't work or, I don't know,
if you face some kind of problem
please just let me know in the comments
and post in the discussion
and I will try to help you as always.
And I hope you like this bonus lecture
and see you in the course forum.