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 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.