Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Forms are an essential part of any web site. Forms allow us to get contact information from our customers. They allow customers to buy things from us. They allow us to interact with the other people through polls and questionnaires and all types of different things. Inside of Adobe Illustrator, we can help design the forms by creating markups that we place inside of our web site designs which we can then pass off to developers to turn into workable HTML and CSS. In this movie, I'll be exploring how to create a basic form field mockup and then how to use that in a design like the one you see here.
So the first thing I need to do is determine exactly where my form is going to go, how big it needs to be, and all of the information that I need to take down. For our Contact Us page, for instance, you would probably want the user's name, user's email address, a subject line, and then a message box. But you may want some other things along the way, too, and so what we're going to do is we're going to develop that in its own document. Then we're going to save that as a symbol and then load it into this document here. So once we've determined all of the fields that we need, we also need to know how big the form needs to be.
I'm going to select this bit of content right here, the CONTACT US box, and I'm going to go to the Transform panel, and I'm going to look and see that it's 870 pixels wide. So I really don't need to exceed 870 pixels wide for the overall width of any of my form fields. Most of them won't be even close to that, but the message field where people type the most information I may want to make it exactly that wide so that they have a lot of room to type. What I'm going to do is create a brand-new document: File > New. I'm going to choose to make it 870 pixels wide.
I'm going to chose to make it about 900 pixels tall. It does not matter how tall it is. I can always add or subtract space away from it later. I hit OK, and so now I'm ready to start designing my form. The thing with forms nowadays is that you have to be aware is that most people are going to be accessing them via desktop computer when they're filling out forms, but some people also access them via tablet and mobile devices as well. So we still have to keep that touch-friendly thought in our head as we design these. So again, in order to make things touch friendly we need to make sure that they are at least between 35 and 50 pixels tall so that when someone taps on them with a finger, they are easily accessible.
So the first thing I'm going to do is start designing some of the form fields. So I'll just click and grab the Rectangle tool, and then start right up here and I'll just click to start a new form field. It depends on your personal choice how wide these things are. In this case, I think I'm going to go about 300 pixels for the width, and for the height I'm going to make this about 40 pixels tall and hit OK. And if that looks good, I'll stick with it; if not I can always change it later. But for now I think I'm going to keep that and then I'm going to copy it, select it with my Selection tool, copy to the clip board and paste it in front with Command+F or Ctrl+F, and then I'll simply use the arrow keys to move it over, something like that.
And so that's going to be my first name and last name field, and then I'm going to go right underneath there, align these up, create a new one. This one, I'm going to make it a little bit longer in case somebody has longer email address, so I am going to give 400 pixels by 40. That's going to be my email field. And then I'll come down here, do another one. This one might even be a little bit longer, so maybe 450 x 40. This is going to be the subject line. Then we're going to add in a space for the message.
And the message, I'm going to make it 800 pixels wide and I'm going to make it about 500 pixels tall. Pretty big message window. If you want to make that smaller, you can. It looks a little big to me now that I've brought it out there, so I'm going to shrink that up, something to like 300 pixels tall. So now I've got first name, last name, email address, subject line, message box. Directly underneath there I'm going to leave some space because I'm going to add a couple of radio boxes. I may even add a check box later on, but I'm going to leave some space for that, right up underneath this, and then towards the bottom I'm going to add two buttons.
So I'll do 300 pixels by 40, again, sticking with that same width that I have done there. Move this over to the left, copy it, paste it over, keep that inline, and do another one right like that. So that's going to be my Reset and Submit buttons. So let's go ahead and style some of these up. Select both of these, turn the stroke off, and give them a dark color. Those are my buttons. I am going to make sure these don't have too big of a stroke on them. I'll also make it a light-gray stroke.
And I'll do that for all these, so I'll just select all these simultaneously and give the same light gray. And now if you wanted to add some text into this so that you could actually see what its supposed to say, just grab this and I'll type out "first name." And I'll move this up into the first name box and I'll increase the size of the text by going to the Character panel. About 14 pixels should be okay. I'm going to change this to Helvetica, maybe a little bit bigger since the form field's a little bit larger.
So this is first name. I'll copy that paste it on top of itself Command+F or Ctrl+F, and then I'll move this into place. Change that to last name. Then I'll copy that and paste it in, move this here, put Your Email, paste in another copy, Subject, paste in another copy. And this time I'm going to move this right here and then move the message box down a little bit.
Your Message, there's the message window, and then I may even add a couple of pieces of text here and move it down there. And I'll change this to reset, make that white--oops I changed the stroke instead of the fill--and you'll make that white. Copy it, paste it, move it over, submit. And so now I've got my basic form created for this design that I've been working on.
And so I've left some space down here for some radio boxes and check boxes so Are You An Existing Customer, Are You Male, Female, that kind of thing. So any type of demographic information you'd like to collect, you can do that from there. But right now all I'm interested in are the form fields, and so I'm pretty much ready to go. So I'm going to select all of this information that I've just created and I'm going to go over to my Symbols panel. That's a little clover right here. You could also go to Window and select Symbols, and I'm going to select all this information that's in here now and get rid of it, and then I'm just going to click New and I'm going to call this Contact form. Hit Ok.
Now I'll go to the top. And I could create multiple forms, so I could an Order form. I could create all different types, and then load them into this library. Then I'll chose Save Symbol Library, and I'll call those forms, hit Save, and now when I go over into the Form fields document, anytime I need to put that Contact form out there, I'll just go down to the library icon, User Defined > Forms. There's my form. I'll drag that out and I can position it somewhere like this, move it into place.
If I zoom in a couple of times, you can see what it looks like. I'll click away from it. So I've got a full mockup of my form. Anytime I need to make a change to that I could certainly double-click the symbol and make a change and then redefine the symbol, update it in the library, whatever I need to do. But you see how quick and how easy it can be to create what looks to be like a complex contact form, essentially is nothing more than a set of shapes and some text put together in such a way that it creates this mockup that a developer could take and turn into a working contact form.
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.