Simple PHP Form Work
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
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.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding