How to make a simple php form work on your HTML website

All right, to get started, there are two parts, to creating a form that sends you, the website owner, an email. 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, they fill in the form, they hit 'Submit', what happens. We've got a little-- it's kind of a workaround, it's a reasonably common workaround. We're going to send the form data that we clicked to a bit of PHP, that is hosted on our server, and that is going to send us, the website owner, an email, with all the data, 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, you need to make sure that you don't break any of the sending email rules, 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. 

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 they'll stick it in spam. 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. All right, so let's get started. 

Actually before we get started, the other thing to 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, because it needs the, yeah, the PHP needs to live on your host, like Bluehost, 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. All asterix's, all done, let's get started. 

First things first, where we're going to put it? We're going to put it here, just underneath here. So let's find that. In your code, where is he, so there's my H1, there's my P-tag. So just after it closes we're going to stick in a form. Here we're going to use the Form Post. We'll talk about action a little bit later on, that's when we put our PHP, but we'll do that second, and everything inside of the form, is what will get sent to 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, or most of them. You can see, there's a bunch of them. We'll cover a few of them in this video, and the next one, but we're not going to cover every single one of them. Do a little search for HTML 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. 

It's a real-- we're going to use this one for gathering the people's name. So you've got name and ID. Name, whatever you put in between these quote marks, will be what comes to you in an email. So if I asked for their address, and the person fills it out, I'm going to get an email, as the website owner, to say, the address equals whatever they've filled in. So this is more-- you don't have to really, you know, you could write A, you could write this. You're just going to get an email from your website saying, "This data came through," and it equals whatever they typed in. 

Now first one's going to be our name, so I want the name. So we're going to use name and email, and Submit button. Real simple form to get started. Now the ID is a bit more special. It can be anything you like, make sure you don't use underscores or hyphens. Your ID is a unique identifier that, you use it for like, over here in your CSS, if I want to style this form, or-- let's have a little preview, that's what it is, that's the field. The ID is-- over here I would style this thing called Name. We use a hash, '#' when we're styling it, and we'll say, the name, I would like to make it a bigger box, and make it have a background color of pink. 

So IDs get used to identify this particular input field. It gets used later on as well, if you're going to use kind of validation for a JavaScript, the ID is quite important. This is the thing that comes to you, this is the nerdy background stuff. 

Next thing we do is we do the email. So with an input of email, where are we, email, I've gone past, haven't I, there it is, same with the name. So you're going to get an email from this form saying, "The email is [email protected]," and the ID, very often they're the same, make them the same thing. Let's have a little look at our form, they're side by side. Let's throw in our Button, and fix it up. We'll just get it going really crudely to start with, okay? 

So next input we want is the Submit button. So input, submit, where are you, submit? There 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', let's have a little look, that's the text, so it's not that important. 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 got. We got name, email, and this. We'll talk about labels and stuff in a second. I click the button, doesn't know what to do with the button. 

Basically what the button does, Submit says, 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, whereas this is more of a, what's called a Markup language. 

An H1 exists, and it doesn't do anything, just kind of sits there and shows, does just 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. So PHP, let's 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. Hit 'Save'. We got a PHP document, you kind of see a little icon changes up there, to the PHP icon, the little elephant. And we're going to cheat, I've already got some code for you. In your Exercise Files, under Project2, there is one called 'Form1-Simple'. 

So we got this guy, I'm going to copy it and paste it. I'll go through the basics. Basically it's looking in my document for an ID of name, and then it's going to send me the name, whatever the input result is. It's also looking for an ID of an email, and then it's going to send me the email. You're going to have to keep adding these. So say I make another one in, it's address. I'll paste this one in here, and type 'address', as long as the eem of the ID matches-- All right, don't break it yet. So it's going to grab from, from this name here, it is going to recipient. So this one's going to send me, this is where you'd put in your email address. I put in dan@example so that nobody sends me zillions of test emails. 

If you've got your address, so yours might be [email protected]. Who has that email address, I wish, but put in your email address as the site owner, and that's it; cool. So now we need to connect it, so we're going to save it. Close it down, and that's where it goes in here, under Action. You say, "I'd like it to go to mail.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 Bluehost set up, you're ready to go. 

The one thing you do need to check, say if you have hosting, and it's not working, just make sure PHP is set up on the server. It's pretty common, it's really very uncommon not to. I say it because I had some cheap hosting that didn't have PHP set up, or at least, 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. So let's upload it to our host. 

To connect to your host-- we connected it to our last project, remember Project1, we uploaded it to Bluehost, it was all very exciting. This one here, you notice the icon's not there anymore. It's because we haven't set it up for this new local folder, that's on our desktop called Project2. You might just go and use the caveman way, and go into your Bluehost hosting account, and on their website, find that File Manager, and just upload the files; 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. We'll do it together because you'll need to know. 

So what we're going to do is we're going to close down all of this, and we're going to switch from Project2 to our other earlier project. So going to 'File', I'm going to 'Open', and on our Desktop, there's that other project we were working on, Project1. Flashes, it opens. The thing we're looking for is this thing called sftp.json. That had all the details that we set up for connecting to our FTP, or our host. So I'm going to click on this, and the editor's going to blur out my details. Select everything that's in here, copy it. If you are at here, and you're like, "Hey, I didn't do that video," jump back earlier in the course, 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, our other Project2. 

So open 'Recent', 'Project2's in there. Go back to our regular files. And what we want to do is we want to go to our extensions. Let's find SFTP. It says it's enabled, but I can't see that little icon. Let's just turn it disabled, let's enable it. Then, like we did before, we have to go through and run this. 'Command-Shift-P' we've been using, remember we used it earlier on to wrap a tag, the same thing we want to configure our SFTP. So basically doing that same thing again. So we're going to go the long way, 'Command Palette'. And in here you might have to start typing SFTP, but mine's already in there. 

So I'm going to grab all this, delete it, and paste in my other one. Ready for blurry stuff? Blurry. I'm going to save it, I'm going to close it. I click back on my server here, I want that little icon to appear back out. Disable. Reload required , oh, I want to find it again, come back, SFTP. And let's enable it. Smooth, Dan. It's not appearing over here, and it's okay. Sometimes these extensions drive me mad. Looks like it's working though, except for the icons are not there. 

So over here, in Explorer, I'm going to see if I can upload it. We'll try the Contact Us page. We're going to 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 VS code. I'm going to upload it, just going to do that one just to test. Stick it down the bottom, it's connecting. Gone, done. Awesome! 

What else do we need? We need this, that's really important. 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, 'Ctrl' key on a PC. So I want you, I've already got that, I'll chuck all the images up. What else needs to go up, was it at the Index page, that style.css, everything else was just kind of like little things we did. Oh, the Style Reset we need. And I've already done that one. Right click any of them, upload, off it goes to our server. I'll come back in a second. 

I'm back, it's uploaded. The images take forever, FTP is super slow, but it's done, so let's go and check out our website. So remember, we've been testing locally, you can tell it's local, that's your local IP address, but we want to find adarerestaurant.com And I kind of half-- loaded it while I was halfway uploading, just in case you do the same thing, you're like, "Ah, it's half the old site, half the new site." I'm going to hit 'Refresh' and see if it's all uploaded now, it is not. It actually is uploaded, the trouble is that it's cached a bunch of stuff. 

We talked about caching 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 Adare 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 change it 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 by going to 'View’, we go to 'Developer', we go to 'Inspect Elements', and we say, right click this, and we say, hard reload. We'll do empty cache hard reload, so it's going to go through, and ditch everything it knew before, and it's back, now I'm going to close this little cross down the bottom right, to go back to my website; cool. 

So the Contact Us page, all the connect, there's our really basic form, and we are going to test it. The one thing I'm going to do before I go and check it works, is that, in here, remember, this can't be used, because that's where the email’s going to go. So this is where I put in dan@my email address, 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 have updated the mail.php, and then I right clicked it and I uploaded it. So now it should come to me. Let's go give it a test. So I'm working on the actual live site now. So this PHP is on my server, I'm going to put in Daniel Scott, the name, I'm going to 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. Now, not that I don't trust you, is, I don't trust you. Any way social media is the best way to get in contact with me, because I get too many emails. 

So 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'. 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, and after a little bit it will start remembering, and going, the stuff that comes from adarerestaurant.com server is not spam. And I got this email address from myself, from my website. So came from Adare Restaurant, that was the email address that I typed in. It's a fake one, and yeah, came from me. No subject, 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. Mine didn't go to spam, it sometimes does, didn't in my case. It just come straight through, Gmail said, there you go. Our email just had 'From', and that name that I typed in, which is my name, but you could have lots and lots of different text fields. As long as they all have their own name and ID, you could have lots of data coming through. 

All right, success, but remember, there's a couple of caveats. You need to be testing live on your actual server. Ours is actually, the PHP is actually on our server, and if you run into problems, very often people forget to actually upload mail.php from VS code. Make sure you actually upload him. The other thing people forget is, on the Contact Us page, here on the form, what else does he do? So this here has to be form action, method post, and the action has to be what-- not just mail.php, it has to be whatever you've called, if you've called it mymail.php then put in mymail.php. Also make sure that name is 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. 

That is it for the moment, oh, one last thing though. Sometimes it could take forever, mine came through straight away, but I have 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 you host your emails, if you use Outlook, or using maybe 365 from Microsoft. Give it a bit of time to come through, but if after a couple of hours that hasn't come through, it's probably broken, and 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. Bluehost 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, 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. It works but it's kind of not meant to do it this way, but I use it all the time, it's lovely. 

Let's get into the next video, where we start talking about lots more of these input fields.