Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The great thing about the web is that it isn't a one way medium. You can communicate with people and the basic form of this communication is a contact form, and that's exactly what I want to add to this Contact page. Let's do a little cleanup initially. I'll just delete that word Contact page at the top. I'll delete this area but note that I want to add an email and then a message text area as well as an Enter Button. I don't need any of that content there right now. I can delete that.
I can even delete this line as well. So here is my sort of blank area where I want these text fields to go and I want to go up and make sure I have the Classic workspace selected because you will notice the third tab in is the Forms tab. And it's gives me this multitude of selections for form elements, everything from check boxes to radio buttons to sort of drop-down list items, all sort of things.
But if you scroll over here, you will see that there is a Spry Validation Text Field. So these sort of green tinted items with the star are Spry elements and they add additional functionality beyond say a typical text field in this case. Again, I'm going to be mindful where my cursor is and I'm going to select that Spry Validation Text Field. When I do that I'm given this Input Tag Accessibility Attributes.
So from here I can go ahead and give it a specific ID name, which is going to be important when I need to start sort of validating this form and sending the data out. But I'm just going to type an email in there. The Label is going to be your email, let's type that in, and I'm going to Wrap with the label tag. This gets to be important when I pass data out but all I'm doing right now is just setting up this form. So I'm going to wrap it with the label tag, email, and I'm going to make sure the text position is before the form item.
I might use it after the form item if it's a radio button or a check box. And then I can add access keys or tab indexes, if I want to sort of have a keystroke activate this box, I can do that, such as e or sort of give this a tab index number if I have a lot of text fields but I don't in this case. I'm going to select OK. It says, hey, you know what, you want to add a form tag? I do. And what a form tag is, is just a box where all this form information, all these text boxes will go.
Now all that information will exist inside of a form tag and when I hit the Submit button, everything within that form tag, all that information will be sent out. It's like defining this sort of a larger group. So the form tag is really just this red line, so that's what that is. Here is my Spry Text Field and I can select it and when I select it, I'm given the option of adjusting its properties. So down here in the Properties panel, I want to start the Type because if I expand that out you can see that I can make all sorts of different types of texts fields depending on my objective.
In this case, I don't need to add an IP Address or URL. I want to add an Email Address. That's the purpose of this field. And when I select that I'm given additional options. This is the additional sort of Spry functionality that's added. I can sort of adjust the preview states. The Invalid Format will actually say Invalid Format. Since, this is an email address, if they don't type in an email sort of formatted text, then it's going to give the user this message.
And say if it's a required field, A value is required. Valid, this is sort of the valid state. It's going to give that a green tint. But you might be wondering when this happens, Invalid Format, when is this message going to appear? It's going to appear not only after maybe they type something wrong, but it's going to Validate on Blur. So what that means is when they sort of deselect that text area, it's going to go ahead and check and see if it's a valid email address and give that message accordingly.
So I can always go in and modify if I want to use this Spry Validation Text Field CSS. All right, so that's saved. Now I'll go ahead and preview this in Firefox. There is my text field. I can select it and I can type in and I'll maybe just my name and then when I click off of it, it says, hey, you know what? That's not the correct format. Please fix it. So I can go back in here and type in my correct email address, like that. And again, this is on blur. When I can click off of it, it says, hey, you know what? You did it correctly.
It has that green tint, congratulations. So that's looking pretty good. I have my email text field and I'm just going to hit Return. And I want to insert another Spry element, next one over, the Spry Validation Textarea. So I'm going to give the user the ability to go ahead and write me comments about how great my site is. Hey, why not? So it's going to be a message. The label will be comment. How about comments? Wrap it with the label tag, make sure the Position is the label before, select OK.
And there it is, the Spry textarea. So let's look at its options. If I select this Spry textarea, Properties panel down here. The same sort of states. It's going to be built into this text area, which is good and I want to make sure it validates on Blur. Well, what am I validating for? I can validate to make sure they are going to shoot me an email but I want to make sure they comment. And it will validate it on Blur. And then I could even include say for instance the maximum number of characters.
If I don't want somebody writing me a novel or I want to make sure there is nothing malicious going on like somebody just pasted in a ton of information that's going to overload my inbox, I might want to just cap the maximum number of characters. But not only that, I can include a Counter which-- this is pretty darn cool. I can give a character count or I can give the characters remaining. So since, they are only given 400 characters it's going to count down. Definitely pretty handy and again if I wanted to add a hint in here I could.
But it already says comments. It's looking good so far. The last thing I might want to do with this form is add a submit button. So again, the Forms tab, select Button and I'll just give it an ID of submit. Select OK. And it says submit right there. Okay, the last thing I want to do is I want to wrap all of this information in the paragraph tag because notice how the paragraph tag has everything left justified.
Well, I'm going to do that by selecting all of that information, going to down to my Properties panel, HTML section, selecting Paragraph like that and then it moves everything over. In fact I can even format this a little more if I wanted to such as by doing a Return there. Going to stack everything. Much more cleaned up. Gives me room for the labels off to the side as well. Let's go ahead and save this. And again, it's asking me to save the Textarea.css, the Textarea.js file, and also remember that these files need to be uploaded in order for this form to work as well. Select OK.
And now let's preview it in Firefox. As I scroll down, here is my form and I can go ahead and type in my email address. It says it's correct. Comments, I love your site, something like that. But as I typed, you can see that it's starting to count down all the characters. I have 342 characters left. So if I want to go on and on about how cool the website is I can do that. But really it's just a matter of clicking Submit and everything within this form tag will be sent out.
But again, since the web is really a two-way medium I can communicate with people. Really the best way to do that is with forms and as you just saw they are really pretty easy to set up and you can add as much functionality or form elements that you want. And really the next step would be to make this button work and send that data out to an email address.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.