Lessons

Lesson Info

Simple PHP Form Work

alright to get started. There are two parts to creating a form that sends you the website owner an email. Okay. The html side of stuff, which is reasonably easy, we'll learn that pretty quick. The harder part is what to do with that information. So somebody comes to your website there, fill in the form, the hit, submit what happens. Okay. So we've got a little, it's kind of a workaround, reasonably common workaround. Okay. And we're going to send the form data that we clicked to. A bit of PHP Okay. That is hosted on our server and that is going to send us the website owner an email with all the data. Okay. But it is a little bit of a hack, mainly because it is quite tough to set up a proper email kind of services. You need a database, you need to click the data and you need to make sure that you don't break any of the sending email rules. Okay. But it's out of the scope of this course, but I didn't want to kind of get to the end and just either don't do forms, you're like just kind of ...

whistle over here and hopefully they don't ask about forms and if they do do forms, we just don't do anything with them. That's no fun. Okay. So we just know that it's a little bit of a hack and at the beginning what will end up happening is things like gmail and hotmail will receive an email from you and they'll go, hey, this is a bit suspicious and I'll stick it in spam. Okay. So you as a website owner for the first couple of emails you get from your website, you're going to have to go into your spam folder say not spam not spam and then eventually it learns. Alright, so let's get started actually before we get started. The other thing, the kind of asterix at the beginning of this one is that it has to be done on a host. You can't test this locally. Okay. Because it needs the yeah the PHP needs to live on your host like blue host for it to actually send the email so we can get it all going here and if you don't have hosting setup you can't test it yet. Alright. All asterix is all done. Let's get started. First things first where we're going to put it, we're going to put it here. Okay, just underneath here. So let's find that In your code. Where is he? So there's my H1, here's my p. Tag. So just just after it closes, we're gonna stick in our form. Okay? We're going to use the form post. Okay? We'll talk about action a little bit later on. That's where we put our PHP but we'll do that second and everything inside of the form. Okay. Is what will get sent in the email. So if you've got input fields like name and email outside of the form, it won't go so the things that go into it, they're called input fields. Well most of them you can see there's a bunch of them, we'll cover a few of them in this video in the next one. Okay. But we're not going to cover every single one of them. Do a little search for each male form inputs and you can have a little look at each and every one of them. The main ones are we'll start with text. Okay? It's a real we're going to use this one for gathering people's name. Okay. So you've got name and I d okay. Name. Whatever you put in between these quote marks will be what comes to you in an email. Okay? So if I asked for the address okay? And the person fills it out, I'm going to get an email as the website owner to say the address equals whatever they're filled in. Okay. So this is more you don't have to really, you know, you could write a you could write this, you're just gonna get an email from your website saying okay, this data came through and it equals whatever they typed in. Now the first one is going to be our name. Okay, so I want a name. Okay so we're gonna use name and email and submit button real simple form to get started. Now the idea is a bit more special, okay, it can be anything you like, make sure you don't use underscores or hyphens the idea is a unique identifier that you use it for? Like over here in your CSS if I want to style this form. Okay Or let's have a little preview. That's what it is. That's the field. Okay, so uh the I. D. Is over here. I would style this thing called name. Okay, we use the hash when we're styling it. Okay? And we'll say the name. I would like to make it a bigger box in a, I don't know, make it have a background color of pink. So I. D. S get used to identify this particular input field. It gets you later on as well if you're gonna use kind of validation for a javascript. The idea is quite important, but this is the thing that comes to you. This is the nerdy background stuff. Okay. Next thing we'll do is we'll do the email. Okay, So with an input of email, where are we? You email? I've gone past, haven't I? There? It is the same with the name. So you're going to get an email from this form saying the email is dan at sample dot com. Okay. And the ID very often they're the same. Make them the same thing. Okay, let's have a little look at our form. They're side by side. Let's start on our button and fix it up. We'll just get it going really crudely to start with. Okay, so the next input we want is the submit button. So input Gay submit. Where are you submit? Here we go, awesome. Now the value in this case is what's going to appear on the button. So if I put in fire away we have a little look that's the text. So it's not that important. So it's, it's structurally different from these input fields. So I'm going to leave fire away and we need to double back to, let's have a quick little look see what we've got. We've got name, email and this, we're talking about labels and stuff in a second. I clicked the button, doesn't know what to do with the button because what basically what the button does submit says, alright, let's post this thing and do this action. We don't have anything in there. So now we're going to talk about the PHP required. So what we're going to do is create a PHP file. We're not going to go through the syntax of how to write PHP like we have for html and CSS because we're just going to copy and paste this one because that's a whole another course learning PHP. It's just a different language. It's very different. It's a programming language where this is more of a what's called a markup language. Okay. And H one exists and it doesn't do anything just kind of sits there and shows, you know, does does things and shows the client. Same with the CSS it doesn't really do anything. There's no dynamic calculations going on. It's just very descriptive. Okay, so PHP lets make one, let's go file new and let's save it. You can call it anything as long as it doesn't have spaces or hyphens but we're going to call this one PHP It's safe. We've got a PHP document you kind of see little icon changes up there to the PHP icon, the little elephant. Alright. And we're gonna cheat. Already got some code for you. Okay? So in your exercise files and project too, There is one called Form one. Simple. Cool. All right. So we've got this guy, we're gonna copy it and paste it and I'll go through the basics, basically it's looking in my document for an idea of name. Okay. And then it's going to send me the name. Okay. Whatever the input result is, it's also looking for an idea of an email and then it's going to send me the email. You're gonna have to keep adding these. So I'll make another one in its address. I'll paste this one in here and type address address as long as the the I. D. Matches. Alright. Don't break it yet. So it's going to grab from. Okay from this name here. It is going to recipient. Okay. So this one's gonna send me this is where you put in your email address. I put in dan an example so that nobody sends me zillions of test email. So if you've got your address so yours might be I don't know bob at gmail dot com. Who has that email address? I wish. Okay, but put in your email address as the site owner and that's it. Cool. All right. So now we need to connect it so we're going to save it. Okay, close it down and that's where it goes in here. Under action you say I'd like it to go to mail dot PHP. Please hit save and it's not going to work. Why? Like I said at the beginning, it needs to be on your server so I'll show you how I'm going to do it. If you've got Blue host set up, you're ready to go. The one thing you do need to check that say if you are have hosting and it's not working. Just make sure PHP is set up on the server. Ok. It's pretty common. It's very, very uncommon not to I say it because I had some cheap hosting that didn't have PHP setup or at least I can't remember. I didn't activate it anyway, if it doesn't work, reach out to your host and say is PHP enabled on my server. They'll say of course it is And it's probably more of a syntactical problem. Alright, so let's upload it to our host. Alright. To connect to your host and we connected it to our last project. Remember Project 1? We uploaded it to blue host. It was all very exciting. Okay. This one here. You notice the icon is not there anymore. It's because we haven't set it up for this new local folder. Okay. That's on our desktop called project too. So you might just go and use the Caveman Way and go into your Blue host hosting account on their website, find that file manager and just upload the files and you want to upload, contact us and main plus probably all the images and everything else. But I'm going to kick mine back up. Okay. And we'll do it together because you'll need to know. Okay. So what we're going to do is we're gonna close down all of this. Okay. And we're gonna switch from project to to our other earlier project. Okay. So we're gonna go file, we're going to get it open and on our desktop. Okay. There's that other project we're working on. Project one flashes that opens and the thing we're looking for is this thing here called S FTp dot Jason. Okay. That had all the details that we set up for connecting to our FTP or our host. Okay. So I'm gonna click on this and the editor's going to blur out my details, select everything that's in here, copy it if you are right here and you're like, hey, I didn't do that video jump back earlier in the course. Okay. We worked out there was a video on how to upload to our host, copy it. Close it down. Let's switch back to our other one other project to open recent project two is in there, go back to our regular files. And what we want to do is we want to go to our extensions Okay. Let's find SFTP and it says it's enabled but I can't see that little icon. Let's just turn it disabled. Let's enable it. Okay. And then like we did before we have to go through and run this. Okay? So command shift P We've been using remember we used earlier on to wrap a tag the same thing where we want to configure our SftP so we're basically doing the same thing again. So we're going to go the long way. Okay. Command palette and in here you might have to start typing S F T P. Ok, But mine's already in there so I'm gonna grab all this. Delete it and paste in my other one ready for blurry stuff, blurry. Gonna save it. I'm going to close it and click back on my server here. I want the little icon to pare back out disabled reload required. I want to find it again. Come back as ftp and let's enable it smooth and it's not appearing over here. It's OK. Sometimes these extensions drive me mad. Well, it looks like it's working though except for the icons are not there. So over here. Okay. An Explorer. I'm going to see if I can upload it. We'll try the contact us page. We're gonna right click it and this appears down the bottom. If this doesn't appear, you're going to have to disable it or enable it again, you might have to restart V. S. Code. I'm gonna upload it. Just gonna do that one just to test, let's check it down the bottom. It's connecting new, gone. Done awesome. What else do we need? We need this that's really important and I might as well stick the images up so what else do I need? I'm going to hold down the command key on my Mac control counter pcs. I want you, I've already got that. I'll check all the images up what house needs to go up and was into the index page. The style dot CSS everything else was just kind of like little things we did. Oh the stories that we need and Already done that one right? Like any of them upload off, it goes to our server, I'll come back in a second. Alright, I'm back. It's uploaded the images take forever FTp is super slow. Alright but it's done. So let's go and check out our website. Remember we've been testing locally. Okay, you can tell it's local. That's your local I. P. Address. Okay. But we want to find a deer restaurant dot com and I kind of half loaded it while it was halfway uploading just in case you do the same thing, you're like ah it's half the old side, half the news site. Okay, I'm gonna hit refresh and see if it's all uploaded now. It is not, it actually is uploaded. Okay. The trouble is is that it's cased a bunch of stuff. We talked about catching a little bit earlier but it's really good to cover it again. So it's like the browser gets here and goes, hey, I've been to a deer restaurant before. I'm not going to look for the background image again because I already got that. How often will it change? We as web designers changes all the time while we're learning. But regularly the website just stays the same. So what we need to do is do one of those hard refreshes and we do it like kind of you, we got a developer, we go to inspect elements and we say right like this and we say hard reload. We'll do empty cache hard reload. Okay. So it's going to go through and ditch everything at new before. Hey. And it's back and I'm going to close this little cross down the bottom. Right. Okay. To go back to my website. Cool. Let's go to contact us page or the cognac. Okay. There's our really basic form. Okay. And we're going to test it. The one thing I'm going to do before I go in check it works. Is that in here. Remember this can't be used because that's where the email is going to go. So this is where I put in dan at my email address. Okay. And you put in your email address so I will see you in a second once I've typed in my secret details. So there I've done it, I've updated the mail dot PHP and then I right clicked it and I uploaded it. Okay. So now it should come to me, it's gonna give it a test. Okay? So I'm working on the actual live site now. Okay. So this PHP is on my server. I'm going to put in Daniel has got the name, I'm gonna put in my email address but if I click in here, I've already tested it. It lists all the different email addresses that I have. Not that I don't trust you as I don't trust you. Anyway, social media is the best way to get in contact with me because I get too many emails. All right, I'm going to put in my email address, the editor. Can you blur it a bit? I click fire away and it comes up email sent. Okay? And that's the PHP form loading. Now we wait, I'm going to go through my email in a second what you might find is that it's in your spam folder that might happen for the first couple of times and then something like gmail or outlook go in and just say this is not spam. Okay. And after a little bit it will, it'll start remembering and going okay. The stuff that comes from a deer restaurant dot com server is not spam. Alright. And I got this email address from myself from my website. Okay. So it came from a deer restaurant. That was the email address that I typed in. Okay. It was a fake one. And yeah, come from me. No subject. Okay. I kind of kept that code in the PHP Nice and clean. We'll go through and add a bit more details to it once we work out a few more of those input fields. But yeah, that's how to send an email. Okay. Mine didn't go to spam. It sometimes does didn't in my case it just comes straight through gmail said here you go. Okay. Our email just had from and that name that I typed in which is my name. Okay. But you could have lots and lots of different text fields as long as they all have their own name and I d Okay, you can have lots of data coming through. Alright. Success. But remember there's a couple of caveats you need to be testing live okay on your actual server. So ours is actually the PHP is actually on our server and if you run into problems very often people forget to actually upload mail dot PHP from V. S code. Okay, make sure you actually upload him. The other thing people forget is on the contact us page here on the form or else does he do. So this here has to reform action. Okay. Method post and the action has to be what not just mail dot PHP. It has to be whatever you've called. Okay if you've called it my mail dot PHP then put in my mail dot PHP. Also make sure that name okay, as separate. If it's got two names or two emails on two separate inputs, it's going to have problems and there has to be a button because nobody can submit the form without a button. Alright, that is it for the moment. One last thing though, sometimes it can take forever. Mine came through straight away but I've had it depending on the server, depending on my spam filter. I've had it not appear for half an hour, an hour so I wouldn't be jumping on right now going, it's not working. I'd give it a little bit of time depending on where your, you know, where you host your emails. Okay. If you use outlook or using maybe 365 from Microsoft, give it a bit of time to come through. But if though after a couple of hours it hasn't come through, it's probably broken. What you can do is you can download the completed files for this particular one and it should have everything in here as it's going right now. If it still doesn't work, you might have to reach out to your host. Blue host. Seems to work perfectly. If you're using a different host, maybe reach out to them and say, hey this is what I'm trying to do. It's not working. Can you help me? It's a little bit out of the scope of probably their normal kind of help. Okay. But but you might get some helpful support person that might point you in the right direction because it might be something to do with the server. That's why this is kind of a yucky solution. Okay. It works. But it's kind of not meant to do it this way, but I use it all the time. It's lovely. All right. So let's let's get into the next video where we start talking about lots more of these input fields.