Bootstrap in Dreamweaver for beginners (Part 3). Contact Form with free source code.

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