hello everyone first I apologize for the
delay after part one and part number two
uh creating a responsible website using
bootstrap and dreamyver
in part number one we created a bare
bone structure of 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 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 other one responsible
website uh using the Boost Tribune
remover 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.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.html
and remover con open with the Adobe
remover
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 recording the 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.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 the form
okay so please open
this again and then please
select all these lines
and copy
and back to dreamiver
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.css remember that yeah in the
files tab we already created a style.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.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.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 looks much better now
so let me save my Styles first
also let me save my contact.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 there were the other
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 they weren't working on their kind
of offline things offline status so it's
not going to be working but um once we
completed this instruction this tutorial
uh and then once you have your the
actual live server then you can just
upload everything on your server that 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.html with a style.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.php
okay now open
PHP code.txt
copy this whole thing
copy and now
back to
contact
open this contact form.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 reform 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.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.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.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 we don't have a
live server for now I'm just going to
type that kind of uh the made up of the
email address New Hampshire Human
Society at
let's say gmail.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
HTTP s
slash www dot uh uh New Hampshire human
Society
.org
slash
contact
HTML
slash
so that's going to be the URL so after
hitting the submitting button and then
your website will be direct redirected
to this URL
Okay so
let me save it
and then
let me go back to a contact.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
are PHP file which is a contact form.php
so I'm going to just type it
contact
it also already assures me form.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 my 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.css and then your
contact form that PHP file together it
should work
so that's it so I hope you have this
here 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