April 1, 2020
Bootstrap one page scrolling site part 17

Bootstrap one page scrolling site part 17


hi guys and welcome to this video this
is another in our series of building a one page bootstrap scrolling site this
is Jamie from http://www.system22.net and http://web-design-and-tech-tips.com this will probably be our
last video in this series and what we’re gonna do in this video is we’re gonna
make our contact form work so it actually sends an email and we’re gonna
upload the site to a live server in fact we actually going to do it the other way
around because this form will not send or will
not work unless it’s on a live server so repeat after me this form will not work
unless it’s on a live server that’s it you’ve got it ok so let’s get started
what we’ve got to do to make this form work is add a PHP file now what I’ve
done I’m not gonna ask you to write PHP it’s a little beyond the scope of this
series of videos is I’ve created one for you and I’ll save it as a PDF and you’ll
have to create your own here’s the PDF that you’ll be able to download below
this video and looks like a bunch of mumbo jumbo it pretty much is welcome to
the world of PHP but I’ll show you how to create this then we’ll upload the
site to our live server and check that it works so let’s open our brackets
software our editing software get rid of this and start again and buckets is free
it’s great little text editor if you don’t have a text editor you can
download this one from the link below the video also so what you need to do is
download the PDF it’s called mail dot PDF as I say you can download it from
the link below select everything in it from that first symbol right there to make sure you get to that closing
head tag because this is the validation I’ll tell you all about that in a minute
so we’ve got everything copy it now open a new file and paste what you’ve just
copied into the file there it is at the moment is not PHP because we’ve not
saved it as PHP or is it all it’s seeing is text at the moment now we need to
save this file as a PHP file so we’re just going to hit save save as okay
here’s our web site there’s our index.html we want to save it in here
and we want to save it really important you must call it the same thing I’ll
tell you why in a minute SC in the slash mail dot PHP that’s
going to tell it that it’s a PHP file and we’ll save that and as you can see
this is now change color and it knows that it’s a PHP code what we’ve got here
I’ll just open up my index.html file here which if you’ve been following
along you’ll know is the one we’ve been working on for our whole site let’s go
down to the contact section and here it is now the reason I say you’ve got to
say this is send mail dot PHP is because this is what I’ve called it in the
action section of our form here obviously if you want to call it
something else that’s fine something else dot PHP but make sure you’ll have
to change it here in on for set line 417 and we’ve got our various form groups
here we’ve got our email and we got the subject and the message email subject
message now if we look at our send mail PHP email subject message and this is
going to send it now on line 9 between the two inverted
commas there this is where you want to put whatever email address you want the
forms to be sent to so your your email address just change this to you at your
email com whatever your email address is to have the forms from the site send to
that email and after that in between this set of inverted commas make sure
you don’t clip off those inverted commas just change the text that’s inside them
and the same with next door this is the message that will display in your email
it’ll say this message has come from the one page site and once somebody is sent
the form this below is gonna validate it’s gonna pop up with a little box
that’s gonna tell them your email has been sent
thank you you can change this text to say whatever you want here but again
make sure you don’t clip off those inverted commas you want to make sure
they stay there so as I say you can put whatever you want there and there make
sure you keep those inverted commas so you’ve created your send mail PHP file
now what we’re gonna do is upload it to our live server and when you saved your
file I don’t know if you notice but I’ll show you we’ve got to save it in the
root directory of our site so this is our site directory here with all our
site files in it and it saved it in there so it knows exactly where to look
for it now we’ve done that we’re going to upload it to our live server I’m
using I page for this particular demonstration you may be using a
different one with a cPanel if you’re using GoDaddy or something it’ll look
slightly different like this but they all have the same pretty much the same
features on their file manager is where you want to go but I say I’m using file
manager and I created a directory because I’ve got hundreds of sites in
mine so I just created a new new directory
I think I caught it one page it is if you’ve only got one website you won’t
have anything and it’ll probably be in your public HTML you’ll just create a
new folder and upload your site to it the good thing about bootstrap it’s not
like WordPress where you have to install things and set up databases and
what-have-you where bootstrap is just simply
drag-and-drop so I’m gonna open up FileZilla which again is a free bit of
software you can download it from a link below as well
okay so I’ve opened my FileZilla software here FTP client which is going
to enable me to upload all my bootstrap files to my server on the left hand side
here I’ve got my computer files this is our bootstrap files and I’ve just gone
through the folder and this is all our files where our bootstraps site resides
here and on this side this is our live server file and here’s the directory I
created one page there’s nothing in it at the moment because it’s just an empty
directory now all I’m gonna do select all these files from top to bottom drag
them over just left click and drag and it’ll start uploading them and that’s
how easy is upload a bootstrap site and that’s it it’s finished let’s just
check the site I’ve just got it as a subdirectory of one of my sites so let’s
just navigate to it one page I believe it was one page there it is there’s our
site live on the server itself just make sure it’s we’re working obviously you
would have yours pointing you purchase a domain and have
it pointing to whatever folder you put these site files into that’s the
external link for instance if I de bought one page com I’d have it in my
list of domains and I would point to what they call the pointers to whatever
file that I’d put these into in this case it’s one page if you’re not sure
just check with your service provider your hosting provider they’ve usually
got a live chat and they can take care of stuff like that real quick for you if
you’re confused by it but it’s very simple once you’ve done it once or twice
is absolutely nothing to it okay one thing that I believe I’ve forgotten to
do is put my correct email address in here because at the moment it’s sending
to you at email comm which I don’t think exists so I’m gonna put my email address
in and redo that one okay so I’ve updated my send mail PHP
here with my correct email address or at least one that I should be able to get
an email from I just refreshed that I’m gonna delete this file on the live
server I can overwrite it if I want to but I’d rather just delete it and out
load a fresh pull this new one across here that’s it
now let’s see if we can actually send an email
it’s just copy a bit of text from up here and go down to our contact form and fill
it out now they’ve got to put their email address in here because if they
don’t if you just put a word or nothing in there it’ll flag out it’ll give my
letter I’ll just show you when I try and send it say please include an act it
knows it’s not an email address they’ve put in there so there’s nothing to stop
them putting a false one in but if you’re collecting email addresses for an
email list it’s a great way of doing it so we’ll just put in a test email subject can be anything you like and paste in that bit of text that we copied
there now let’s try sending this and there we are we’ve got the message up
that says your email has been sent thank you remember in our PHP form
there’s that validation message and you can change it to what you like it just
don’t clip off those brackets there and just hit OK and it’ll take us back to
the top of the site there we go and I’m just gonna wait a minute or two and
hopefully that email should come through so it’s been about two minutes later and
sure enough here’s this email it’s come from the I page system their mail system
they’re from the one page site if we go back to our PHP form from one page site
that’s that message right there again you can put in whatever you want to put
in there but what don’t you want to do you don’t want to clip off those little
inverted commas and there’s the email address there’s the subject line there’s
the body of the text so there you have it your contact form is now working fine
and your site is live on the internet so I hope you’ve enjoyed this series of
building a one page bootstrap website videos if you have please subscribe to
our Channel we’ll be doing lots more web development videos in the future if
you’re interested in building websites please take one of our courses below
we’ve got a great bootstrap building course where you don’t actually have to
build them from scratch we will show you how to modify templates that are
available to you and you can build some great looking bootstrap sites really
fast we’ve got a huge discounts on those courses for our subscribers here there’s
also free web development courses down below also so once again this has been
Jamie from http://www.system22.net and http://web-design-and-tech-tips.com thanks for watching
have a great day

1 thought on “Bootstrap one page scrolling site part 17

Leave a Reply

Your email address will not be published. Required fields are marked *