How to Wireframe Forms in Rails6:17 with Nick Pettit
In this video, we'll wireframe the form views of our job board. These are the Rails view in which a user can create or modify a job.
[Master Class] [Designer and Developer Workflow] [Wireframing the Forms View] 0:00 We've created our index view and our show view, 0:08 but now, we need to create a form that will be for the new view 0:12 and the edit view for our jobs. 0:17 So, let's go ahead and just duplicate this as a new mockup, and we'll go ahead and save it, 0:21 and we'll call this "New View," and once we get into the CSS, we can go ahead and just 0:28 slightly modify our new job view to also be our edit job view. 0:35 So, I'll go ahead and save that out, and we'll keep a fairly consistent styling here. 0:42 So, let's just go ahead and change this page title or job title to say 0:47 "New Job" or maybe something more friendly like "Post a New Job." 0:55 That looks good, and we can delete some of these other things that we don't need. 1:02 And we're actually going to keep this button here because we will need a submit button. 1:09 We'll come back to that in a second. 1:16 So now, we need to create our form fields. 1:19 Now, if you recall, we had a job title, a company name, 1:22 a job description, and a see more link. 1:27 So, I'll go ahead and jump over to text here, and I'll just create my labels. 1:31 So, I'll say "Job Title," duplicate that, and change it to say "Job Description." 1:41 I'll duplicate that, and we'll create our label for company name, 1:55 and then finally, we'll go ahead and call this our details link, 2:06 and in parantheses, we'll say that it's optional. 2:14 And right now, I don't think this link will actually be optional. 2:19 In fact, I don't think we'll have any real serious form validation right now. 2:23 But, we can add that in a future iteration. 2:28 So, we'll go ahead and create our details link there, and now, 2:32 we have all of the labels that we're going to need to create this form. 2:37 So, now we can go ahead and start creating some of the form fields. 2:42 So, I'll go ahead and jump over to our containers here, 2:47 and we'll just grab a rectangle here, and we'll change this into a text box, just like that. 2:53 And we'll put that right under our job title, 3:05 and we'll move our labels down here a little bit, duplicate this text box 3:10 and put it right under company name. 3:15 And we'll need a larger input for our job description, 3:18 and this will probably actually be a text area in the markup. 3:25 So, we'll move some things out of the way and put that down there. 3:35 Maybe we'll move that up a little bit. 3:42 There we go. 3:48 And now, we can go ahead and put the rest of our stuff down here. 3:51 We'll copy another text field, and we'll put it here for our details link. 3:57 And then finally, we have our submit button down here at the bottom, 4:05 and for the submit button I'll just go ahead and change this to say something more friendly 4:13 like "Create New Job" or maybe "Create New Job Posting." 4:19 And again, we can always change this to say something else like "Post New Job" 4:31 or really whatever we want, it doesn't matter. 4:36 We just need to make sure that we create the space for it now 4:39 so that we know it's something we need to include on the page. 4:42 So, this is looking pretty good. 4:46 We could probably tighten up this layout a little bit and maybe put some of these 4:48 form fields adjacent to one another or move a few of these things up and adjust the spacing. 4:52 But so far, I think this looks pretty good. 4:59 So, we have this space over here, and we could go ahead and put in maybe some 5:05 paragraph text that just outlines a few guidelines for how a job posting 5:10 should be structured, but really, I'm just going to leave this space blank right now 5:16 because I have a feeling that we're going to flesh that out in a future iteration. 5:22 For example, we might be able to have tool tips come up on each one of these form fields 5:29 as the person filling it out works their way down the page. 5:35 So, we would want to leave this space open 5:39 just in case we wanted to add a feature like that. 5:42 However, I think we can go ahead and just get away with having 5:45 a fairly simple form to start out with. 5:48 So, I'll go ahead and save that out. 5:51 So, just to review, we have our index view, our show view, and our new or edit view. 5:56 And those are really all the views that we need to get started with for this iteration. 6:05 So now, I think we're ready to go ahead and jump into code. 6:13
You need to sign up for Treehouse in order to download course files.Sign up