So right here with the Name, Email, and Message is where we're going to place the form, and I think it's also going to be nice, because you saw how the form's going to end up and if you've never worked with forms before, I think you might be a little bit shocked at what a HTML form looks like out of the box. So that's what we're going to do here in this guide.

Coming down to where we have our placeholders here,

contact.html

<div class="form">
    <div class="form-group">
        Name
    </div>
    <div class="form-group">
        Email
    </div>
    <div class="form-group">
        Message
    </div>
</div>

I'm going to start by adding an input. So I'm going to start with having an input here, and this is going to be of type text and then I'm going to set an id here of full name and then placeholder of your name, and that's all we need to do. And so what we're doing here is, we're saying that in this form we have an input tag and it is a text tag. So type is a special reserved word in these input forms.

So we are saying this is going to be a text form, and then we have an id of full name. And we're going to be using this when we build out our animation. And then the placeholder is just that temporary text you'll see that will just give some information to the user on what they should type in there.

contact.html

<div class="form-group">
    <input type="text" id="fullName" placeholder="Your name">
</div>

Now if I hit save and switch back, you'll see that we have that little form element right here so that is working.

Now we're going to add a label. So this label is going to have a direct connection to the form and so here I'll say, this is for the full name and the value is going to just say your name.

contact.html

<div class="form-group">
    <input type="text" id="fullName" placeholder="Your name">
    <label for="fullName">Your name</label>
</div>

Now if I hit save and refresh, you'll see that we have this little name right here, and if you click on this, it will actually activate the form.

Now just to give you a preview of what we're going to be doing, the label here is the same label that when you click on the form element, is going to drop down. So what we're going to do is, we're actually going to hide the label when the form loads and then once it's been activated, so once we click on it, that's when we're going to reveal it. And we're going to add a little animation there and have it fade and move down. So that is the same element.

And so now let's go and let's do the same thing for the email. So here this is going to be of type and instead of saying type text, this is actually going to be of type email. The id is going to be email and then the placeholder should just say either your email or email, whatever you prefer. And then make sure for the label that you say email.

contact.html

<div class="form-group">
    <input type="email" id="email" placeholder="Your email">
    <label for="email">Your email</label>
</div>

Because what this label for attribute here does, is the for attribute creates a connection between the ID. So if your email was emailAddress, then the for would be need to be changed to emailAddress. So that is what that for, is there for, and so now if I say your email, that is all that's needed.

The reason why I used type email instead of text is something ... let me show you right here if I hit refresh, what this does is, it'll give some validation. So if I were to type in, say something like this, or if I were to type my name in, like this, we could implement some validations. And if you hover over, you can even see right here, HTML, without us doing anything besides just saying this an email form input. It says, please indicate an @ symbol in the email address.

And so it gives some hints. The only reason we are doing it, is just because HTML gives us some nice validations, just right out of the box with that. So that is our email.

The next item we're going to do is going to be our message. Now messages in text areas, that's whenever you have paragraph content or anything like that, that is called a text area input, but it's technically not a regular input. So we're not going to copy that. I am just going to bring the label down and then we're going to use what is called a text area tag, just like this.

We're going to provide a name. So we are going to say message, an id here, also message. And then we are going to skip this column and rows, this is where you could hard code the value and the size, but we're going to do that with CSS, so we're not going to even worry about that at all.

And we will though, add a placeholder here, and then you can just say something like, message in the placeholder. And then do the same thing down here, so this is going to be for message and the placeholder is going to be message.

contact.html

<div class="form-group">
    <textarea name="message" id="message" placeholder="Message"></textarea>
    <label for="message">Message</label>
</div>

Hit save and that is all of the HTML we need to have this form. So if I hit refresh you can see that we have our form here.

It looks slightly different than what we're going to be building out.

HTML forms by default are some of the ugliest elements that you will see. So we're going to see how we can customize all of these different values.

Now, before we leave I want to add one little caveat to this, and that is that typically when you're building out a form, you would actually wrap the whole thing in a form tag. And so you'd do something like this, where instead of this div being just a div, you would say this is a form and then it would have things like actions.

And what actions are, is they give you the ability to contact a outside server and the reason why I am not doing that is because it's not needed for this particular application. There is no server that we're contacting, this is just a placeholder form. And depending on what framework you would use to make this active and dynamic, you're going to have to change the way the form works anyway.

So building it isn't even that necessary. So if you're going to use ruby on rails, you're going to have to convert all of this code in to the ERB format, or the slim format. If you're doing this in react, all of this is going to have to get converted in to JSX and don't worry, if you've never even heard of any of those words yet, that doesn't matter I'm just wanting to give you a head's up.

Because you may find some other tutorials and you'll see a form tag here, and you'll see a bunch of other attributes just right here. And if you're wondering what those are, a regular HTML form right out of the box does have those. But because HTML is stateless and you can't do anything with it anyway, it always has to connect to a backend server.

I just want to show you how to implement the design and then later on, if you do want to apply this to a real world application, then that applications framework will dictate how the form needs to be set up. And all of the styles that we're creating here, all of those will carry over perfectly.

So I just wanted to add that one little note, because you may look at HTML forms and say, hey we didn't create a valid form, and no it's because we're not trying to create something here that'll contact the server, because we're not connected to any back end server. The goal of this is to show you how to customize the look and feel, and then however you want to implement it in your real world app, that will be dictated by the framework you're using.