Designing for WordPress

3.2 Forms

Welcome back to the course, in the previous lesson we created the first patterns in our design system, the buttons. In this lesson, we're gonna move on and create the forms. And forms are very common patterns in UI design. And WordPress actually has a few built-in once that we can use right away. So nailing these in our design system is very important, so let's begin. Let's create a new page, here are called Basic patterns forms, I'm gonna paste in this frame. And we're going to start with Forms inline. Let's delete some of these buttons. So inline forms, what are these? And how are they different from normal forms? Well, inline forms basically means, a form that is on a single line while block forms are the ones you see with inputs one above the other. And with usually a submit button on the very bottom. But these usually have one input, another input, and a button. Very common for like a login form or a search form. So for our example here, we're gonna create a search form. Inside this frame, let's create a rectangle, and I'm gonna create a frame out of it. And this frame, let's fill it with white, let's give it a stroke, 1 pixel, and we're gonna get our gray10 color, that should do it. Let's give it 4 pixel corner radius to match our buttons. And we're gonna give it an auto layout. Vertical, we're gonna give it a fixed width, and lets see if we have anything written down for form elements, okay, here we go. So forms, inputs, we have a 24 pixel patterns, 320 pixel width. So that's what we'll use 320 and 24, 24, and let's give it an 8 pixel. This is the distance between items or spacing between items. If you have multiple items in the same frame, they will be spaced apart with a pixel in between them. All right, let's create some text in here. We're gonna say, Enter your search term. We're gonna use the body type face for this which is Lotto. And we're gonna make it an italic because this is a placeholder. So Lotto, italic 18, and for the Fill, let's go with a nice gray50, that should do the trick. Nice, and let's make sure that we have a nice distance between these two elements like 16, okay? Let's align these vertically like this. Cool, the only thing left to do here is to add an icon. And we can add a nice little search icon. Now, for the icons, I have an app here on my Mac called, Icon Jar. And this allows me to import set of icons from the web and have my own personal collection. And with my collections are loaded up, I can browse them. I can see these nice previews of the icons, and I can simply right-click. I can copy or I can export these icons, okay? So the set that we're going to use is Zondicons by Steve Schoger, this is a free icon set, you can find it at Zondicons.com. You can also see the full set here. It's a nice little set, but obviously, you can use whatever icons you want. So I've already downloaded the icon and I'm simply gonna drag it in, and I'm gonna move it, Right there, in this frame. I'm gonna change this from vertical to horizontal, and I'm gonna change the order of the items. I'm gonna make sure everything is aligned in the middle like this. And I'm gonna make sure that my frame has a distance between items of 16 pixels. So I have 16 between the icon and my text, okay? And finally, the last thing to do here is to grab a nice, gray color, gray80 is what I'm probably gonna use for the text anyway, and change the color of that icon. And just like that, we've created our first inline form and this is a search form. Next, lets move on to the block forms. So let's duplicate this forms lock. Okay, for this, we're gonna do things a little bit differently. Let's delete some of these items, and we'll keep the input but we'll add a label to it. And for the label, we're actually going to grab this over line, okay? Let's change the frame layout from horizontal to vertical and make sure that we have the proper spacing between these two items. We'll need to group them up and create yet another frame, and we'll set 16 pixels spacing between these items. Now, this one is gonna be for the name, and also, Let's change the color. Nice, and this, let's make it vertical again, let's create a fixed width, 320, and let's align this text to the left. Okay, so now, we have one frame with our input and label, let's duplicate this two times. One, two, let's select the parent frame and select 32 pixel distance between these items. This will be for, let's say an email address, this will be for a subject. And then, let's also create a text area for a message. And for this one, we're gonna double the width, so 640, and also for the height. And actually, we don't need an autolayout here, so let's delete that and select 240 for the height, okay? And finally, let's add a button. Let's add one of these default buttons like that, that says Send message, or post comment, or whatever it is, we'll consider this to be a contact form. So that is our block form. Now, there are two more things we need to do for our forms. We need to create input states, so what happens when one of the inputs is in the state of error or validation? And also, we need to create some styles for focused hover or disabled inputs. So let's go ahead and do that right now. First, we're gonna say Forms input states. Let's delete these, and here we're gonna say error, success, and let's do one for warning as well. All right, for error, let's say that I wanna introduce or I'm typing an incorrect email address like johnsmith@gmailco, right? This is a invalid, here let's say that I just put in John Smith, not John input, and for warning, well, we can just type in like, I have a password, okay? Let's also change the color of these because this will be like a regular text Good, and then because this is an error, we're gonna grab the, Color for error and we're gonna use it as a stroke. Good, and let's also grab ourselves a caption, and we're gonna say error email address is incorrect. And we're also going to use that color for the text, for success, let's use this color and we're good to go. For warning, we're gonna use this color, oops, and also let's add that helper text telling us that hey, I have a warning, password could be horrible. All right, the final thing to do here is to add some icons. So on the error, let's search for a nice icon, looking something with an X, X, X there we go, close outline, so we're gonna use this one. Let's see if can find it here in my finder window, there we go, let's drop that in. And let's paste that right here. And to align these properly, I'm just gonna create another frame, just like that. And I got to make sure that the size of my icon is a multiple of 8 because we are using that 8 pixel system, right now, it's 20, so let's use 16. And let's also use the correct color for it. And let's do one for warning here, and we're gonna be using this one, again, let's change its size 16. And let's change this color as well. Cool, and what else? Well, only one thing left to do here, just change the alignment, just like that, and we're good to go. These are the input states, we have one for error, one for success, and one for warning. The last thing to do is create some input styles for focused, hover, and disabled. For that, let's duplicate this form, we're gonna call this Input styles, and delete some of these things. This will be default, it was duplicated. Let's also do an input value and what it's gonna look like, Lotto, regular 18, make sure you input the correct color. Let's also do one for focus, here, I'm just basically going to change the The border color to a nice gray70 like that. We have one for hover, which is essentially the same thing, but we're gonna take advantage of this and define a placeholder. This is Lotto, italic, 18 pixels with a lighter shade of gray and finally disabled. This one uses gray10 for both fill and stroke, and the input text is the same color as a placeholder, and that's it. We now have styles for the inline form, the block form, and then we have different states for error, success, warning, and then styles for focus, hover disabled and of course, the default. All that's left to do now is go in here, under Design system, Basic patterns, create a new page, forms, and then you would start documenting what we just did in figma, right? Things like, what's the spacing between this element here and this button here? It's 16, write it down. What's the spacing between this icon and the text next to it? That's 16, write it down. On the block forms, what's the distance between two groups of inputs? That's 32, write it down, and so on and so forth. How should the input states look like? Well, the border is red, green, orange, the icon is this for error? Is this for warning? And they get the same colors as their input. You also add a helper text, then you go to input styles. How does the focus look like, the hover, the disabled? You need to document all of these, as I was saying previously, just to keep this course as short as possible, I'm just gonna tell you what to do and leave it up to you. All right, forms are now done, so we are ready to move on. In the next lesson, we'll be designing the menus, so I'll see you there.