Adding a contact form

- [Instructor] So there's one more thing that we need to do and there is a reason why I've left this 'til the end. No, there's actually two reasons why I've left it to the end. One is what happens if we wanna add the form to this page and we wanna use a third party service and the second is what happens if we just wanna add features to the page once we've done the HTML and CSS? So there's generally quite a common approach. Let's say we add a page later on, how do we actually add this stuff and what is the process? So generally what I would like to do is work on the HTML first because we wanna work out the content before we start it up using CSS.

Now, we wanna add a contact form to the contact page and it says at the moment, contact me on my email and I'll try to get back to you within one business day, but of course, that isn't the final design. The final design is actually a form with a send button, so we wanna start this up. Now there's two ways that we can do this. We need some kind of service to send an email. Now, we could use some of our own codes, our Python or PHP or Ruby to do this, but we wanna basically make this a lot easier.

Now there are services out there such as Formspree that basically let you add forms to your website, perfect for static sites, somethin' like this. So I've actually just signed up, and I can sign up here and I wanna add a new form. So, I'm gonna quickly add a new form that I'm gonna add to my site. Now, currently my site will send it to rik@superhi.com, but, of course, I'm not the client, so I need to add a linked email in here. So I'm just gonna add in my account, a linked email, so Aria's email address, I'm just gonna add in here.

Now of course, there is plans that we can actually pay for this so we can have some more, so we can upgrade. Now, of course, Aria needs to verify that before we actually send her any emails, which is totally fine. So, I'm just gonna send this form and let her do this. Now again, I can't do anything until she responds, so I need to just email her. Hey, you need to respond, I'm just gonna verify it for her. Aria's just verified that and now I can make a new form so I'm gonna save this, it's gonna be a contact on Aria Oslo Site and I'm gonna create this form.

And what this will do is it will give us some content that we can actually add as HTML and AJAX, React, file uploads if you want to. What we want to do is actually take this code. So they've given us some code in HTML to use. I'm gonna take this code from HTML, copy it, and paste it into my site. So where do I want to put this? Well I wanna put it in my contact form or my content, contact.html. Currently, we've got an H1 in here, we wanna put it as part of this div class form, some more content in here.

So I'm just gonna add some space in my div class form underneath my H1 and then I've copied and pasted. So let's see how this looks. Again, it's a little bit ugly, so I might click beautify just to clean it up a little bit. So now, what we should see here is something that looks like this. It doesn't look great, but we do have a working form here so how do we go about fixing this. What we're gonna do is we're gonna look at the code itself and style this up.

So, how do we do this? So, the first thing we're gonna do is look at the code itself. Here we've got a form tag with a label, so this is given to us as part of form input so we wanna put we have a your email with an input in here, a label, your message, with a text area, and then a button. So we wanna style these things up. We wanna put in some style for the input, some style for the text area, some style for the button.

So let's do that. First of all, what do you wanna look at? Well, we wanna basically make this input, this text area, and this button kind of have a certain size. So maybe this goes under this page, maybe we make the text area a little bit bigger, so let's do that first. So these two, I'm gonna give 100% width. Now I want this to be done across the entire page, not just in the media query, so if I go back to my style.css at the moment, where would I put this? So I've got my media query for 500, 660, a little bit bigger, little bit bigger, I want this to be underneath my footer, but before I start any media queries because I want this to be on desktop and anything smaller.

So here what I'm gonna do is first of all, pick this input tag, this text area tag, so these two tags that were added. This one and this one. Basically things I can type into. In here, what I wanna do is add some curly brackets and open it up. I wanna add some style to both of 'em. First thing I want to do is just give both a width. The width is gonna be a hundred percent of what it can fit inside of.

It's a hundred percent of this width, there we go. Now the first thing you might wanna notice is we have this white background, we don't have this border as well so this is kind of what we want. We want a white border, two pixels thick. So, at the moment, we want this black background with a border. So the first thing I'm gonna do is just add this black background to both. So, the background color for this is the black color and we can find that out from up here, this one up here, we can also in the Superhi editor just pick it from up here and apply so what we should see now is this black background.

Now again, we wanna add this border on here so when we type things out, it looks pretty good, so let's add some extra things in, so let's add some border. So border has a few parts to it. If I open this up, we'll see things, a width, a style, and a color. So the width that we want to put is two pixels, apply. Solid, we want it to be a solid line, and the color is going to be white as well and it should look something like this, 2px, space, solid, space, color.

So what we should see is something that looks like this. Now, inside here if I type in my name, at the moment, I can't see anything. Why? Because by default, it's using black text. So I want the text color for my inputs to be white. So, just like before, I'm gonna add a color of white. So hash FFFFFF, which is the white color, and what we should see now as I type my name in, it should be correct. And again, I can put my message in here as well and I wanted to do the button a little bit later.

How do I add some more space inside here? Now to add space inside a tag, rather than outside the tag, so inside the tag, I don't wanna use a margin. I'm gonna use a new CSS rule called padding. Now padding increases the internal size of this, a margin pushes things away, padding moves things inside itself. So here what I'm gonna do is add some padding. Now we will cover this a little bit more on the foundation course and all of our code courses so if you don't know what this is, don't worry, just go with it for now, play around with it, see what you think.

So, I'm gonna do maybe eight pixels, 16 pixels, eight pixels, 16 pixels, so again, clockwise, top right, bottom left, eight on the top, 16 on the right, eight on the bottom, 16 on the left. Let's see how that looks. There we go, a little bit nicer. Rik@superhi.com, beautiful, hello there. Nice. Now, of course what we wanna do is move some space between everything. So at the moment, there's kind of no room between this.

How do I add some space between this? Well, let's go and see what was given to us. So again, I need to go and see what was given to you first from Formspree, and part of contact.html. So I've got this group that goes around things, so label and label. I'm gonna increase this margin, I wanna push things apart. So to push things apart, I'm gonna use some margin on the label, so again, back in style.css, underneath here, I'm gonna do label, I'm gonna select both of these labels, and that's a margin on the top, maybe somethin' like 16, zero, 16 on the right, and 16 on the bottom, and zero on the left.

So going around clockwise, just like the padding as well. So at the moment, this doesn't do anything. Now the reason why it doesn't do anything is by default, this is actually a text element. So we were just gonna switch this display type very, very quickly to display blog. Now I'm gonna do this very quickly, and don't worry about it too much, but this just fills a space across the page instead, so it adds this margin between. So previously, it wasn't applying this margin correctly, we can switch to display tag again, we do cover this a bit more in our foundation course.

So, we're standing things up piece by piece. The last thing we want to do, well two things actually, we want to increase the height of this text area only. So to increase of this text area only, we need to just select this text area, so below here, just the text area, we're gonna give it some height. Height is gonna be 320, let's say, let's see how that looks. Does that look pretty good? Yeah, that looks really good.

And the last thing we want to do is actually do the send button. So the send button again, let's have a look, is in pink, it has a width, and it has a certain text size, let's add those in. All right, so back in our style.css, we're gonna say our button tag and the reason for a button is because if we look down in contact, it says button, that's what we need. We're gonna style that one up as well.

So, button, it's gonna have a background, the color is going to be the salmon pink, which is up here, and apply. There it is, nice. Now, by default, buttons have a border on them, so we can actually get rid of the border by just saying border null. So by default, it does have it on there, just to look a little bit different, just like links have this certain style to them just to kind of pop them out.

So there we go, it disappeared. We wanna make this text a little bit bigger, give it a font family as well, so we'll make it a little bit bigger. The font family, let's make it 24, oh, sorry, font size 24, not font family. There we go, a little bit bigger. What is it, the font family, we're gonna do Josefin Sans from before, Josefin Sans, see how that looks.

Nice and we're also gonna add some padding to increase the pink area as well. So just like we added some extra area inside this, we're gonna add some extra area inside the tag too. So not margin, margin pushes things away, padding increases the size of things. So here, what we're gonna do is padding, gonna copy the one from above, eight pixels, 16, eight pixels, 16. So, eight on the top, 16 on the right, eight on the bottom, 16 on the left.

So what we should see now is this nice big text element. Now one thing that I like to do as well is if any of these things are hovered or focused, make this area go pink to make it look like it's doing something, we can see it in action. So, to do this, I'm just gonna add one last thing in here. And I wanna do it on both the input and the text area, so below here what we're gonna say, is the input, not on hover state, but if it's focused. So I'm using the focus state, not a class, I'm not using the dot here, I'm doing the focus.

So here, input colon focus, then a space, text area, colon, focus. And here what we wanna do is basically make this border from white into pink. So border, two pixels, and it's solid and it's this salmon pink color instead. So now what we should see is if I hover in there, it should go pink. Now by default, there is this kind of outline on here as well.

Now this is part of accessibility, it's pretty useful to do to have this in place. If you do wanna get rid of it, I would recommend not doing it, but if you do wanna get rid of it, for some whatever reason, you can do it by just adding outline none. It's generally a bad practice, if you wanna do it, it is your own fault, it is a bad practice, but what we can see here is this kind of highlights in place.

So, it's up to you if you wanna put this on here, I'd like to do both, it's kind of up to me. I'd obviously wanna change this text, so you can say contact me below instead. So the last thing we're gonna do is just say contact me below in here, where is my contact form? Just gonna scroll up and here is the contact form. I wanna change the text, so contact me on contact me below. And I'll try to get back to you within one day and this one I wanna be text align left.

So at the moment, this is in the center, I want it over here instead, how do I do that? Well, again, I'm just gonna add one more style to this form. So here, in my section.contact, my H1 by default is text align left. So again, let's have a look, there we go. And again, let's just resize that, see if it looks okay if I go small, all different sizes, it looks pretty good. So this automatically works pretty well, don't need to add any responsive design to this, I don't need to put any extra CSS in my media queries.

So when people go to this and fill out the form, we'll get an automated email going to Formspree.