Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor
Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor


hi guys and welcome to this bootstrap 4
with brackets text editor video this is jamie from system 22 and web designer
tech tips comm in this video we’re going to add some PHP or create a PHP contact
form so we can get our contact forms actually working in sending mail
so you’ve built a site or downloaded a template and you’ve got subscription
forms and contact forms and they all look great and you can fill them out
let’s just hit the contact button that’d be easiest and you can fill them out and
things happen but of course when you hit submit nothing’s going to happen
well a because I’m this is not on a live server and B even if it was on a live
server this forms nothing’s telling this form what it’s
supposed to do when you hit the submit button so we’re going to use a bit of
PHP to fix that make this work now before I start what you’ve got to
understand about PHP is that it’s a live scripting language so it’s only gonna
work on a live server so if you’re building this site on your local machine
you’re gonna need to upload it to a live server to make the PHP work or have a
local hosting environment that runs PHP so that said I’ll take you through the
whole thing of uploading it and we’ll do everything so let’s open our brackets
software brackets is a free text editor and it’s absolutely awesome and you can
download it from a link below this video let’s create a new document so go up to
file and hit new and we’re going to start typing some stuff in here
it’s PHP it may not look familiar to you that’s okay just follow along so we’re
gonna open a bracket and put a question mark which is usually
opening tag for PHP and then I’m just going to close out the PHP and to make
this form more readable let’s let’s just save it and we’ve got to save it as PHP
so let’s save it to the same place as we saved our bootstrap files so we’re gonna
say save as and here’s our bootstrap folder with all our files in it CSS
images videos javascript index dot HTML let’s just save it as cool just call it
contact you can call yours what you want but just remember what you called it and
make sure you put dot PHP after it so it knows what type of form it’s saving it
as okay so let’s start writing a bit of PHP let’s bring our site up and see what
forms we got on it okay here’s our contact form it’s refreshing get that
junk out of the way we’ve got a name we’ve got an email now we’ve got a
message field so we won’t name email a message we can actually use the same PHP
form for our subscriber which only has a name field and an email field might
decide to do a separate one later on but we can probably use the same one for
both for the time being so we’ve got a name an email and a
message field so let’s put those in back to our brackets okay it’s time across now we start with
the dollar sign their name and the next one was email and the next one was
message wasn’t it okay now the name what do we want it to
do well we want all these to do the same things which is post so it’s Dolph sonic
underscore capital P OST and it’s really important if you do all this exactly the
same also you’re going to have a problem and we can copy this and we want all of
those to do this put those there just save that control s now what we’ve got
to do we’ve got to give our name field email field and message field an actual
name over their own so if we go to our index dot HTML
the site that we’ve built let’s go down to
our forms here you here’s the first one that’s right we’ve
got two different versions it one for a mobile and one for a desktop all right
so here’s our four and if we see that actually it’s just
got the generic page.php in there which is nothing that’s not even going to do
anything so we want to put it the name of our PHP form in there which is
contact PHP and this will all become clearer later on and I’m going to copy
that into our duplicate form that we’ve got below here action so when we click on it we want it
to blow the contact PHP or run the contact PHP now each of our fields here this is what
we want to do well give them a name here’s the first text field and it’s for
the name so let’s give it the name of name keep it simple I’m just going to
copy that and this one gonna give it the name of
email because it’s the email or their email I’m just trying to keep this as
simple as possible submit we don’t need to do anything in that but this our
duplicate form below we do need to do the same thing we’ll give it a name of
name and the email field field name of email that’s fine we’ve got no message
field in this because it’s just that subscriber foot for I show you here but
that one we were working on there just this inline subscriber form so we’ve
gots a name and an email field in there now let’s move on down to our contact
form just quite a ways down here here we go here’s the contact form and
again form action there’s nothing in there at all we want it to go to our
contact PHP that we’ve just started building and again we want to give our
field two name so this is the name John Doe so just before the type I’m gonna
put in that name name and the next one downs the email address and it’s an
email so let’s put in the name and call it email like I say you can call these
what you want but I’m trying to keep it simple here and here’s our message so
let’s put in let’s give it a name we’ll call this message now let’s say that now
that all of our fields have got a name associated with it each field so we
saved that so that’s called name that’s called email and if we slide down as a
contact form that’s called name that’s called email and that’s called message
right there all right well let’s go back to our PHP and continue writing some
okay so we wanted to post the name and we’ll give that the name of what we
called that field which was name so you just want to open some square brackets
and put that inverted comma in there and we’re writing now we’ll do the same
thing below we want to make sure we put a semicolon after each one just like our
CSS here and square bracket and this one was called email see by
calling them the same name I’ve kept it pretty simple here and this one what’s
called message okay so it’s gonna tell it to get those filled make sure we got
those semicolons on the bottom there now we want to go down and when we get the
email what do we want it to say so it’s gonna be email from and you’re gonna
want it to say something so email from that was an underscore there and what do
we want it to say just open some single inverted commas let’s say from
Styles restaurant that’s the name of the site itself that we were using there now
the subheading what we want it to say I guess we’ll have to say something else
so you know in the subject line which will be the email subject again we’ve
just got to tell it what we want to say here
and I mean the standards or new message from website or let’s use single
inverted say new message from Styles okay and then in the name in
the body of the email this is where we want the information that our user is
pretty you know for instance their name their email address and the message that
they’ve sent so as email body underscore body and
that’s going to equal this is what’s going to appear in our actual email
field so we’re going to have a name and beside that name we’re gonna have whatever it is they
filled in for their name here so I put a coat on and then I’m gonna put that name
dollar sign name right there and it should fill in what they’ve put in
inside their name I’m gonna hit a period and IMAX great specs right grace
backspace and an N for a new line and then after that I’m gonna close this out
with a period because we’ve got a few other things that we want to add so I’m
gonna put a period there now underneath the name we wanted to fill out their
email so we’ll do the same thing and in the message itself we wanted to say
email so we know that’s what they their email address is not well that’s not
really obvious and then of course pound sign email so it’s gonna fill out this
detail that they filled in there and again all we want to put a period a
backslash and then in for a new page and then after the inverted comma put
another period because we’re gonna add one more here which is of course a
message and this may seem a little strange right now but it’ll all become
apparent as we do this and as I’m sure you know we’re gonna use this the
message that’s whatever they put in in their message there so a dollar sign
message and do make sure that these are spelled exactly the same don’t put any
caps in or anything if they haven’t got cats because it will not work it is very
case sensitive PHP and again we just put a backslash and hit a newline there
we’d probably get away without that on this one but I’m gonna do it anyway now
I’m gonna put a semicolon because we’re gonna move on down and give our next
thing is going now we took we’ve told you that they’re
gonna fill out their main email message here and we told it when it sends us our
email we want it from the Styles Restaurant site and the subject line we
want this new message from stars contact then below that we want whatever they
filled out here but we haven’t told it where it needs to go so let’s put in
where we want it to be sent to and this can be your whatever email address you
you like your messages to be sent to a little bit of extra space there and all
you have to do this right to that’s going to equal and then put in your
email address when we go live I’ll have to put in my real email address there
obviously okay so and semicolon cuz we’re gonna add a bit more now we’ve
gotta sort of tell it where it’s got to put this stuff and in the headers the
header of the email so it’s headers we want it to say who it’s from
so we’re gonna open some converted commas that figure right from and then
we’re gonna put email on the scroll from and again we’re gonna return it this
time we’re gonna use bucks backslash R and the backslash N and there’s a little
semicolon right after that inverted comma there now the next lot of headers
is really for where if we want to reply to them so we it’s going to reply to
little correct email so we’re going to put headers again this time we’ve had a
period just to separate the one from the other so it doesn’t get confusing and it
equals open and close some inverted commas reply – – and then we’ll put
email then because we want to reply toward either whatever it was they put
in for this email value up here which is their email address all right and again we want it to return
and newline so okay so it’s looking good now we’ve got to actually tell the male
what it needs to do what actions it wants to take here that
same male open some rounded bracket and inside there we want to add the two so
it’s going to send to your email address there we want to add the email we want
to add the email subject putting commas in between these no space and then the
email body so we’ve got the email subject
and the email body which contains all of this information here plus we want both of these headers from
and then when we reply we wanted to reply to that email there so we can just
add headers and again unlike when you’re typing regular Word documents do not put
a space after your commas there all right we’re almost done with this
now then once once they’ve submitted water we want it to do well for the time
being we’re just gonna send them back up to the top of the page so we’re gonna
say header opens from round brackets one more time some inverted commas we’re gonna say
location where we wanted to go so : I guess we’ll just go to the Eton
index.html which is our page name so it’s just gonna go to the top of the
page there yeah put a little something like Oman after that in case you wanna
add anything else just tidy up that little gap there at the bottom there is
our Contact PHP now how are we gonna make this all work well first thing I
need to do is save it ctrl s now if we look in our bootstrap folder here’s our
bootstrap 4 folder we’ve now got our regular indexed or HTML page and we’ve
got our Contact PHP file that we just created there now remember at the
beginning I told you that this will not work unless you’re on a live serving
it’s a live code needs a live hosting server so we want to make sure we’ve got
our our website online so I’m gonna drag these all up to my web server I’m going
to use a free bit of the FTP client called FileZilla okay let’s just go
through make sure everything’s good it’s like Grandma we’ve got to have
everything penetrated correctly that looks good that’s fine that’s fine
missing a semicolon buffer there if you miss off a semicolon it will stop at
that point and won’t activate any of this below oh yeah that’s fine that’s
good that I have to put my own email in there in a moment okay that looks good
so hello that should not be a – that should be an underscore okay now – it’s
really important like I said before everything’s gotta be spot-on
or else things will not work correctly all right believe I’m happy with that so
I’m gonna save it what I’ll do is I’ll put in my own email address then we’ll
upload you okay everything’s ready I put my email
address in there instead of that you and your email address
now let’s upload this whole site to a live server so here’s our bootstrap folder with all
our website files in it CSS images JavaScript video contact PHP that we’ve
just built and our index.html all we need to do is grab those and upload them
to a life server how do you do that you’re saying that’s really easy I’m
going to use a bit of free software called FileZilla I’ll put the link below
here an FTP client and what we’ve got going on here on the left side here on
my computer files and it’s just the directory of my computer and the folders
in it and this particular bit here is this folder and I just showed you with
our website files in it on the right side I’ve got it connected to my hosting
provider now we’re hundreds of websites on there
I’ve just created a subdirectory called bootstrap for at the moment there’s
nothing in it if you’re only hosting one website you’ve probably just got nothing
there you’ll be just uploading to your public HTML but check with your hosting
provider it’s really easy and all we need to do left click and drag and
select those I’m gonna left click on it and keep my finger down and pull them
across to my hosting provider directory right here and it’s starting to copy and
then we’ll cross and that’s all you have to do with bootstrap are the reason I
love it so much it’s so lightweight it’s really easy it’s not like WordPress you
don’t have to install anything you literally build it on your desktop and
drag it across the live server and there it is
don’t get me wrong I love words WordPress – it’s got some great bells
and whistles but when I’m building corporate sites or one-page sites or
splash pages landing pages anything like that I’ll use bootstrap every time
because it’s so lightweight it loads quickly and it’s really easy
okay well that’s finished now I’ve got a reasonable speed here
so that didn’t take long to upload now let’s go and see our site live online
and see if we can’t send an email to ourselves so I’ll go to my regular site
because it’s a subdomain of that and I called a subdomain ds4 there it is so
how quickly did that load so let’s go down to our first contact form here and
see if it’s gonna work this is our signup form and I just put in a random
email there me at my email comm which is a usual tester I use so let’s click that
jump back up to the top of the page and the reason it did that because in our
PHP form at the bottom we told it to go to the index.html which is right here so
it’s basically the top of this page okay let’s go down to our contact form this
time let’s fill this out put something I am live in here I just see a contact
don’t you dare it ear andum well do for an email address and inside here okay and hit the submit button and again
it should pop up to the top of the page there we go and I’ll wait a minute or
two then I’ll go to my Outlook email client and see if I’ve received those emails you okay so it’s about a minute two minutes
later and we’ve got both those messages through top one I guess what was the
last one we sent was from the contact form and there’s the email there’s the
message there’s the header that we put in
it’s from Styles restaurant site and it’s a new message from Stiles contact
which we told it to put in the subject field and now if we hit the reply it
should reply back to that email address yeah good it did fantastic okay so I
don’t need that now here’s the one that will be from the sign up sub form of
course there’s no message because there’s no message field in there to
have a message so there’s the name and there’s the email so that’s working
great great everything is working fine let’s take this a step further the only
thing I mean you can do a PHP form for each of these so they’ve got a different
subject if you want but I’m just going to leave that as it is and just do
exactly what we did but just change your your message up here if you want it to
say from subscriber form or something like that and then you can farm out your
email addresses and put them into your your mail client things like MailChimp
Constant Contact they have their own forms you can put on your site to do
that automatically but let’s instead of when we sent this
form it just popped back up to the top I’d like for it to I don’t know go to a page it says thank
you you sent your message so let’s do that let’s go back to our
brackets I know this is going on a bit this video but it will be worthwhile and
here’s our index dot HTML our page basically I’m going to steal some stuff
from it let’s have a look see we want to have a header and that’s about it
yeah then we could have something like this saying thanks your message has been
sent you and that’s probably about it let’s have
the map in there in the footer everything else we can get rid of so
let’s take our site here our index dot HTML and zoom back up to the top and let’s go under the his the Casa we
don’t want this take all the way down to that Jumbotron probably zoom past it some wine
selection wine menu here we go there’s a Jumbotron delete all of that now I’ll
take this bit down to the Google map you that’s the video section or ways to go
yet whereas the Google map and the footer
host delete that okay so we’ve got is our map bar then we’ve got that little
Jumbotron now let’s change that to thanks for reaching out you I’ll start for applauding a message
you you hit the button to return home and we’ll
just say Stiles I guess in there and don’t say that because you’ll overwrite
your existing index dot HTML HTML page and I hope you’ve got a backup of it if
you have so make sure you don’t say that as index.html so we’re gonna save it as here’s a bootstrap folder I’m gonna say
success got HTML okay so we’ll say that now if we go to
our page here we’ve got another page in there called success that HTML and let’s
open it up there we go this is what we’ve got on
that will take us back to the homepage I won’t take his back fanpage because I
didn’t tell it to so here’s the button where is it going at the moment a true
favorites there’s no favorites for it to go to so
index dot HTML page there it is right there okay save that let’s try that
again just refresh that page and there we go it’s taken us back to
the home page which is what we want now when we send that contact form
we want to go back to that contact form this time on the location we want to
tell it to hit the success page success HTML which is what we called it
there it is right there save that now let’s upload our new page
and our updated contact PHP file to our server to refresh this I’m just right
clicking in hit refresh there’s our success page left click drag
it across upload it to the server contact PHP you should drag it across
and you’ll prompt us to update the one that’s there o-over right that’s exactly
what we want do it’s fine okay let’s have a go at sending that again
that’s not our live page and that is our live page ok just refresh that let’s go
back up to the top let’s send from here okay at that time it took is that thanks
for reaching out I start for reply to your message like I say you can have a
different one for your sub subscriptions there and a different one for your
contact different PHP and you just changed what what it wants to do see
write another one that’s got a different message thanks for subscribing you or in your success page could have a
subscription page you could say thanks for subscribing or whatever we all add
you to our mailing list whatever you want to call it saver is another page
I’ve loaded then on your next contact one just copy this one give it subscribe HTML or whatever you’ve called
that page there and change the message new subscriber job done okay let’s do the contact form see if
that’s going to work as well do another round of one here and if you it will
validate if you don’t put an hat in there then you try and send it
little little error out on you now if I try and send this it should flag it
right there yeah please including that and you can make these fields required
if you wish and it’ll air out on them as well if they don’t fill it out that’s
very easy to do right let’s send this and again it’s gone to that success page
here and hit the button to return home boom that way people know that their
message has been sent sometimes if it just jumps up to the back at the top of
the page they think well did that get sent or did it just glitch out or what good it’s just been a couple of minutes
again here’s the first one we sentenced me at my email just there that’s fine
and here’s the second one with that message and blah blah blah a lot of Z’s
going on there so everything is good to go so that’s how to add PHP to your site
to enable your contact forms and subscription forms to work I hope you
found that useful if you have please like and share the video and subscribe
to our YouTube channel if you’re interested in web development take one
of our web development courses below we’ve got some huge discounts for our
YouTube subscribers there’s also some great free courses down there once again
this is jamie from system 22 and web design and tech tips com thanks for
watching have a great day

30 thoughts on “Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor”

  1. Real Rowdy Ruff says:

    Thanks for uploading.

  2. Real Rowdy Ruff says:

    Hi Jenny!
    Can you please make a video of making portfolio filter in this website.

  3. Real Rowdy Ruff says:

    I made a website using your videos … please have a look.
    http://punjabichaapcorner.com

  4. Tom Freeman says:

    Thank you for this video, it was exactly what I was looking for ….. its taken me weeks to find an explanation I could understand.

  5. Jean Souvenir says:

    Hello Jamie,does this contact form work with gmail??,i tried hard but failed

  6. Bhanu Tirumala says:

    top notch detailed explanation thanks man appreciate

  7. Bappa Majha says:

    i did all step carefully !! but its show msg "it seems that my mail server is not responding. Please try again later!" please reply soon i am waiting !

  8. roosen says:

    "cannot get POST / " i need help please

  9. Matthew Fuller says:

    Very helpful video. Thank you!

  10. Soyeb Patel says:

    Hi Jamie,
    I am trying to make this form work for my website. I was wondering if I can get the source code from this video? Thanks in advance

  11. Haggai Shamba says:

    Awesome. This has helped.

  12. Mark Donatelli says:

    how would you send to different emails…say there was a dropdown to choose from a list???

  13. Dan Hands says:

    Seem to have done everything right, but when submit is clicked I'm going nowhere and nothing is being sent to my email. Working on a live server so should be the case. Is there any chance I cold take a look at your source code? It'd be much appreciated. Thanks for putting this online in the first place.

  14. Baby Loveyow says:

    thank god. thank you so much for this wonderful tut. It works in my site I also use bootstrap.. regarding on email.. how should we achieve the message sent directly to our inbox and not recognize as spam??? already subscribe thank you so much

  15. Drew Conroy says:

    Great Video. One question though. Instead of having a form that goes to a "thank you" page after submission. What about adding a "Thank you" message within that form or page?

  16. roosen says:

    SyntaxError: expected expression, got '<'[Learn More] contactform.php:1

  17. Ami Gustafson says:

    Thank you! It worked with no hassle. I'm super-grateful ­čśÇ

  18. Roland Pierre Louis says:

    thank you so much for this great tuto ! good job ! is this contact you build fully secured ? if not, share some tricks how to build a secure one please !

  19. Shaniel Narayandutt says:

    php says 404 error please help

  20. Luna pictures says:

    thanks so much! <3 time looking for the solution to this headache. I just sent the blank mail.

  21. Leeroy J FPV says:

    Thanks a lot. worked easily well. Would have been cool to include some spam prevention as well.

  22. Matt Moe says:

    I'm not getting the emails. :/ And I'm not getting any errors. (?)

  23. bobin studio says:

    god bless you!!

  24. Isidro Espin says:

    Thanks for the tutorial, I dont have now a Live Server how can I test locally all the features of my webpage before get a host? can you name a couple of tools to test locally? Cheers!

  25. Lyndsey Coyote says:

    it didn't work for me, seems like a lot of arrays are missing and I just used an already built one in the end.

  26. Shats 44 says:

    please make one with attachments. (File Upload)

  27. Alejandro Juárez Cobos says:

    You're the man…

  28. Eloy Gomes says:

    Thanks so much, it's workes very well to me

  29. Dave Budah says:

    Thank you for such a simple and straight forward tutorial.

  30. Anne Ulyacelume says:

    thanks a lot for this video.. been looking for it for ages..

    BUT you are saying making the fields required is easy as, but I cant get it to work. have you got any video showing me how to do it? or just answer me here, how to make the fields required. that would be great

    Thanks a lot

Leave a Reply

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