So now lets structural reforms so that it looks like a proper contact form.
So let’s again add a horizontal rule to divide the top part 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 has word.
Maybe we should ask them for your email.
Maybe that will help us get back in touch with them and instead of password input type we’re going to
change that email.
And to do that I have to use something that’s not actually an input.
Instead it’s an element called text area.
So let’s add a label first and let’s say your message and textarea has two attributes that are really
One is the number rose and the other ones a 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.
So 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 I 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 So 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.
So that looks a little bit nicer.
I know it’s still very baboon’s 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.
Aged him Al page and that is of course our home page.
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 Web site.
And even though this is our first web site it doesn’t mean that it can’t function.
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 mail to 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 G-mail if you’re inside chrome and it puts in the e-mail
address that you specify after the colon him and the post in this case simply means that we’re going
to transfer what the user types into these input fields into the e-mail client.
So 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 e-mail
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 e-mail.
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 Web site 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 look at the name as your name.
Second one your email and the third one your message.
All right let’s say and let’s go back to our Web site.
Hit refresh and let’s try it again.
Now I didn’t show you this last time but the cool thing about the e-mail textfield that we added here
by changing the input type to e-mail 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 app sign in your e-mail address because all e-mail addresses have at signs right and that
says Please enter a park following the ads line.
All e-mails have something after the ads sign says e-mails don’t contain these weird symbols so you’re
probably not entering a correct e-mail.
Or make sure that you check.
So that’s our e-mail.
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 input type to e-mail.
So it’s already a pretty good deal.
And later on we’ll show you how to make that validation a little bit more sophisticated but it’s already
kind of cool that we have that and then we’ll add an e-mail 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 you said your
name your e-mail your message 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 labeled you a name.
This input should be labeled your e-mail and your message should be labeled like so.
So this is a really really basic little bit of functionality that we can get without yet understanding
to unleash the full power of HMO forms.
But for now this is a neat little bit of functionality that when we publish our Web site will still
work well enough for anybody who’s actually coming onto our personal web site or personal page.
Now in the next lesson we’re going to be launching into our intermediate media CML challenge.
So we’re going to be getting you to recreate a web page 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.