Now, let's structure our form so that it looks like a proper contact form.
So let's again add a horizontal rule to divide the top half from the bottom.
And then in our form, we want a label that says Your Name,
and then after that, we're going to get rid of this color.
But we do want that line break.
And then we've got a label that says Password,
maybe we should ask them for Your Email.
Maybe that'll help us get back in touch with them.
And instead of password input type, we're going to change that to email.
And to do that, I have to use something that's not actually an input.
Instead, it's an HTML element called text area.
So let's add a label first, and let's say "Your Message." And text area has two attributes that are really
important.
One is the number of rows and the other one is the number of columns.
So rows determine how tall your text area should be,
and columns determine how wide it should be on your web page.
I'm going to stick to maybe 10 rows and 30 columns.
But if we hit Save, you'll see that it's actually something that you can modify.
And I'm sure you've seen these text fields all over the internet. Anywhere where you have to put in
a long answer
you'll get something that looks like a box and you've got these few lines in the right corner.
And what you can do is you can click and drag it to make that text field as large or as small as you
want it to be.
But the default or the starting position is defined by the developer.
It's looking a little bit messy.
Let's add a few more line breaks so that we can space things out a little bit and make it look a little
bit more appealing.
All right, so that looks a little bit nicer.
I know it's still very barebones, but at least it's starting to take shape.
Now, the only problem is that at the moment, when you hit the submit button, what it does is that
it'll take you back to your home page.
And the reason is because when we created our form, it has this attribute called action,
i.e what should happen when you click submit.
And at the moment, the action is simply take the user to the index.html page.
And that is, of course, our home page.
Now, without knowing anything about CSC or JavaScript,
we can't actually get very deep into understanding what the method or the action means, but you kind
of want it to have some basic functionality, right?
Because otherwise it doesn't make any sense to anybody who's going onto our website.
And even though this is our first web site, it doesn't mean that it can't function well or do something
very simple.
So what I'm going to do is I'm going to change the form action to a mail to.
And what mailtos do is that when you press the submit button, they'll open up your default mail client,
so that could be mail on Mac
or it might go into Gmail if you're inside Chrome. And it puts in the email address that you specify
after the colon here.
And the post in this case simply means that we're going to transfer what the user types into these input
fields into the email client.
If we hit Save, I'll show you what it looks like.
So let's go to contact me and let's give my name, my email,
and my message.
Now, if I hit submit, you can see that it opens up my mail app and adds a little bit of text into
the body of the email.
Now if when you hit the submit button, you don't see any pop ups, you don't see a mail application
or if nothing happens, then it could be that there might be an error in your code,
so go back and check that.
But more likely, it might be because you don't actually have a mail application installed on your computer.
Now, if you're using a Mac, by default, it comes with the mail application.
But if you are on Windows, you might actually not have a mail application installed.
So if you don't want to install a separate mail application, then the best solution for this is to
actually set Google Mail or Gmail as your default email application.
Because let's face it, most of us have a Gmail account, right?
So now I'm going to show you how to do that.
So first, you need the Chrome browser open, and then you go to these three dots here and then go to
Settings.
Now here you're going to click on privacy and security and then go to site settings.
Now, sometimes I've seen this called content settings, but it should have this little symbol, and
if you click on it, it should take you to a page with the permissions.
If you scroll to the bottom of the permissions,
click on additional permissions,
then you can go to the protocol
handlers. Might also be called handlers. But keep an eye on this little icon.
We're going to need to remember a little bit later on.
Now, go to the protocol handlers and make sure that sites are allowed to handle protocols, so make
sure this is selected. And if not, go ahead and click on it.
And then we're going to have to make sure that in the section where it says "not allowed to handle protocols"
that our mail.google.com is not here.
So if it is like this, go ahead and click on the X to remove it.
So now you have a Gmail tab open
go ahead and close it down.
And then we're going to go to a new tab and head over to gmail.com.
So now when this loads up, you should see a little symbol here.
Remember that symbol
I asked you to remember?
So if you click on it, it says, Do you allow mail.google.com to open or email links and you should
click Allow and then click done.
Now I found a site to test mailto links and you can, of course, use the website that you've created.
If you click on the mailto link, it should take you to a new tab and it should pre-fill all the
information that we want to, and it should work as expected.
Now, alternatively, if you don't have a Gmail account or you don't want to use Gmail as your default
email client, you can also install an email application which takes a bit longer.
So in the Q&A section for this lesson, you can find text-based instructions for all I've just done, and
you can find that in the featured questions section.
So now that we've got this working, we can carry on.
Now it's not making too much sense right now, and in order to change that, we actually have to add
a little bit more to our form.
So I'm going to delete this class and I'm going to add another attribute called encoding type.
And this specifies just as up here, we're specifying that our website is encoded in UTF-8,
we're going to say that the data in our form is encoded in plain text.
So that way, when it launches the Mail app, you won't have these funny percentage signs and numbers.
You'll instead just have plain text.
Now, the other thing we need to add is a value to each of these name attributes, because that's going
to identify the data that's inside each of these inputs.
And I'll show you what I mean.
So let's add the name as yourName,
second, one yourEmail,
and the third one
yourMessage.
All right, let's hit save, and let's go back to our website, hit refresh, and let's try it again.
Now I didn't show you this last time, but the cool thing about the email text field that we added here
by changing the input to email is that it does some basic validation.
And that means if I type something like this and I try to hit enter now, it's a little bit different
from browser to browser, but your browser might tell you that please include an @ sign in your email
address because all email addresses have @ signs, right?
And then it says please enter a part following the @ sign.
All emails have something after the @ sign.
And it says emails don't contain these weird symbols, so you're probably not entering a correct email
or make sure that you check.
So that's our email.
But even though it's not a real email, it passes those basic validation checks.
But we got all of those validation checks for free just by changing our inputtype to email.
So it's a really pretty good deal.
And later on, we'll show you how to make that validation a little bit more sophisticated, but it's
really kind of cool that we have that. And then we'll add an email.
So let's say, hey there again and now hit submit.
And you can see now because we've added something to that name attribute
where we said yourName, yourEmail, yourMessage, what we added here and here and here.
Now, when we submit our form and we post this data that the users inputted to our mail client, then
it knows how to classify each bit of the data, i.e. this input should be labelled your name,
this input should be labelled your email and your message should be labelled like so.
So this is a really, really basic little bit of functionality that we can get without yet understanding
about JavaScript.
So once you get to the JavaScript module, we're going to come back and revisit forms and we're going
to unleash the full power of HTML forms.
But for now, this is a neat little bit of functionality that when we publish our website, it'll still
work well enough for anybody who's actually coming onto our personal website or personal page.
Now, in the next lesson, we're going to be launching into our intermediate HTML challenge.
So we're going to be getting you to recreate a webpage using all of the things that you've learned in
this module.
So for all of that and more, I'll see you on the next lesson.