Hello everyone. First, I apologize for the
delay after part one and part number two,
uh, creating a responsible website using
bootstrap and Dreamweaver.
In part number one, we created a bare
bones structure of a responsive website. In
part number two, we stylized using CSS. In
part number three today, we're going to
complete the contact page using PHP file.
So, uh, please download the other source
code files from the link I provided in
my description, so those are code we're
going to use today. And if you haven't
watched my first two videos, please watch
them first, uh, and so we can, uh, just keep
working together. Please don't forget to
subscribe my channel, hit the like button,
and set the alarm for my latest video.
Then let's get started.
Okay, so this is where we stopped in part
number two. Uh, in part number one, we
created the one responsive
website, uh, using the bootstrap and Dreamweaver.
And in part number two, we
stylized like this, with some background
color, and then on the logos, and then on
the different text colors, and so on. And
also we made a link to each page. About,
volunteer, adopt and contact, and
everything's responsive. And this
bootstrap, I mean the hamburger button,
was working fine.
It brings us wherever we are, and still
the carousel is working. Okay, so we're
going to
open this contact dot html, in Dreamweaver, to
make the, um, the contact form.
So, let me open the file, uh, from my root
folder. I'm going to open my contact dot html
in Dreamweaver. Open with the Adobe
Dreamweaver.
Okay, so first, I don't want to keep, uh,
this, the other three columns.
Um, and then the volunteer, adopt and
donate, and also I don't want to keep
this coding information part. So,
in my dom panel, under container, uh, the
row, that's the one where I have these
three columns of info, so let me just
delete the whole thing.
And also,
I don't want to keep this accordion,
so delete it.
Okay, and also I just need to keep just
the one VR, the, uh, the um, break line tag.
Okay, so after contact us, the title, I
want to have some kind of a subtitle, so
please open,
um,
the file I provided. Please open this one
first, the form HTML code dot txt. So, um,
contact us today and get reply within
one to two business days.
So, we're gonna have that as a kind of
subtitle under contact us title. So, let
me copy this.
Back to Dreamweaver. Make sure
you're selecting the text, this center
contact us, choose that tab, and then open,
insert menu in HTML category.
I'm gonna insert in the paragraph.
Paragraph. After contact us title, after.
And let me center
the text, and then I'm going to just
paste
the text I copied.
So, contact us today and get reply with
the next one to two business days. Okay.
Let me save it. No, I don't want to save
it, I will just keep going. Okay, so after
that, now I want to have, uh, uh, the form.
Okay. So, please open
this again, and then, please
select all these lines,
and copy,
and back to Dreamweaver.
And then, in the code area after this
paragraph, uh, contact us today we just
pasted.
To break the line,
and we're going to just paste it here.
Control, click and paste it.
Okay, now,
we have a form,
which is not pretty.
Okay, now we're going to stylize it using
the style dot css. Remember that , yeah in the
files tab, we already created a style dot css
here. Okay, so please open the file
is here. Now,
open this time form CSS code. This one.
Then, from the very top line, I'm gonna
copy the whole thing. Highlight
everything.
Copy, oops, sorry.
Copy this and back to style dot css.
After the last bracket I'm gonna give
some space.
Hit the return key several times and let
me paste it.
Container.
Okay. And then
highlight
this container,
that thing,
and paste, copy, this line,
and then go to your contact dot html.
See, it is already applied. And then, in
your contact form,
contact form, you see the form ID is
contact, and the class. So, in this section,
the class name is gonna be that
container. So, let me paste it.
Container.
Okay.
So, it looks good. It looks much better now.
So, let me save my styles first.
Also, let me save my contact dot html.
And let me preview it.
Refresh. See?
I already have it.
And then this is the fully responsive,
which is pretty cool.
Okay, and then, so the visually it is okay.
But now I, we need to, uh, assign the, uh,
the actual function, so we can
communicate with people.
So, I can email, uh, or give, uh, other people,
they can email us.
So, that is the PHP. But the one thing is,
the PHP is the server side language.
Since we weren't working on the
offline things, offline status, so it's
not going to be working. But, um, once we
complete this instruction, this tutorial,
uh, and then once you have your, the
actual live server, then you can just
upload everything on your server. Then it
should work. So now, next step is, go back
to here. We're going to create a one new
file.
In your files tab
choose anything,
volunteer dot html with a style dot css, and hold
down the control or right click. Click
somewhere. We're going to create a new
file. This time this file's name is gonna
be,
contact
form dot PHP.
Contact form dot php.
Okay, now open
PHP code dot txt.
Copy this whole thing.
Copy, and now,
back to
contact.
Open this contact form dot php. Open it.
It will ask you,
uh, since we don't have a live server for
now, I would say no, and no.
Then,
select the whole thing,
and paste it.
The ph form we we just copied.
And then now we just need to change the
value here.
So, first thing is, that is the last thing,
the submit button. So, go to your
contact dot html.
Select your submit button. So buttons
name is a submit.
I'm going to highlight this.
Let me copy.
I can type people, just to make sure I'm
going to copy and paste it, and go back
to our contact form dot php
in the post section.
Paste it.
Okay, so what we're doing now is, we copy
and paste the form, each form field name,
to their respective sections.
Okay.
Though, so I will repeat the same thing.
Next thing is that the, uh, the name.
So, back to our contact.
So, uh, name.
That is this. Input name is name.
So, let me copy this.
And contact form.
Name.
Paste it.
Next thing is a subject. So, um, subject
input name, subject, here.
That is a subject.
Copy, contact form,
and paste it.
Next thing is the, um, made from.
Your email address here, that is email,
that's the input name.
Copy,
contact form,
and
paste it.
Next.
Message.
Input name here
as a message.
Oops, let me highlight again.
Copy and contact form dot php.
Message is message.
Okay, so we are getting in there. Now, mail
two.
That's gonna be email address.
Your email address, or your business
email address, or your personal email
address. So, since we're, uh, we don't have a
live server for now, I'm just going to
type that kind of, uh the uh, made up, uh, the
email address, New Hampshire Humane
Society, uh, at
let's say at gmail dot com.
So, this is the, uh, you're the recipient's
email address. Okay. And the next thing is,
uh, scroll down, you're gonna see that, uh,
location after send page.
So, highlight this text right before this
question mark. So, we're gonna type here
the page URL to be redirected to the
after submitting the form.
So, in this case, since we are not in, uh,
we're not in the live server, we're not
online, but let's say that,
um,
HTTPS
slash www dot, uh, New Hampshire Humane
Society
dot org,
slash,
contact,
dot HTML,
slash.
So, that's going to be the URL. So, after
hitting the submitting button, and then, um,
your website will be direct, redirected
to this URL.
Okay. So,
let me save it.
And then,
let me go back to a contact dot html. So, uh,
in their contact form,
we
made a link to on this container and
class name, and then action is fill.
We're going to make a link to those, that
PHP file, which is a contact form dot php.
So, I'm going to just type it.
Contact.
it already, uh, shows me, form dot php.
And save it.
So, we are all done. So, let's
view it
online. Let me refresh.
So, in my home page, this is my home.
About us page.
Volunteer.
Adopt.
And contact here.
if I click on submit it, it asks me this,
please fill out this field. So, we can
just type it.
Okay. So, again, for now it's not working,
but once you have your live server, and
once you upload everything online, uh,
including your style dot css and then your
contact form, that PHP file together, it
should work.
So, that's it. So, I hope you have this,
you have the series of tutorials, uh, help you
to build up the your the first website.
And then, um, thanks for watching, and I
will see you next time.