Rock U - Workflows - Form Styling

Transcribed Video Content

So let's talk about form styling. Now the topic of form styling applies to workflows and event registration equally. The understanding of how this works allows you to really make those forms in both cases look a lot better than the the standard, out of the box. So let's take a look at this. So if we're to look at the the inquiry workflow that comes out of the box and this is you might see this on your external website out of the box. It looks something this. It's not bad but it does feel maybe a little complex. When people see a form on a web page, they immediately instantaneously in fact try to do their brain determines how hard is this and how much friction is this gonna cause in their time. And so if it's overly complex, not only does it add them to the chance that they might just navigate away and not fill it out, but it also adds to the stress level as they fill out your form. So it's important to try to make these forms as, stress free as possible. And so one thing that we could do is apply some styling to the form. So in this case, we've just done two simple things. One is that we put the first name and last name next to each other so that makes the form look a little bit shorter, a little less complex. And then we've wrappered, in this case, the email address and the phone number into a panel here with with a title above it called contact information. So that just kind of groups this and just kind of tells the person's brain, hey, these two things are kind of related and they're a little bit different than the rest of it. Hopefully, overall reducing the stress of the form. So let's go ahead and look at how we can do this and a couple other little tricks to make your forms really shine. The first thing you need to know is that Rock uses a cascading style sheet template called Bootstrap. Now, Bootstrap is used in a lot of sites and a lot of themes that you go out and and look at and purchase are actually based on Bootstrap. So Bootstrap is what gives Rock a great standard styling capability. Now, one of the features of Bootstrap is a column layout. Okay? And so this column is is based off of a 12 base system. So you can have a maximum of 12 columns. So up here at this very top you can see that there's a column of of unit one and there's 12 of them. Okay. So that gives you your 12 full units. Now below that you could choose to have bigger columns. So in this case I want a column with a unit of eight and one of a unit of four because that adds adds up to 12, that makes a full row. Down here, there's three fours which again equals 12 and gives you three equal columns. And or you could choose to do six and six. So you can use as many, column units as you want but, just realize that row equals 12. So if you have more than 12, it'll flow over into two rows. And that kind of leads you to the markup. Now, if you're not familiar with HTML, don't don't stress out. It's really easy what you need to know right here. All you need to do is just realize that there are these elements called divs with a class of row. Now, in HTML, each styling element has an end styling element. So this open div here has a closed div down here. In HTML, the tags usually work that way. Every tag has a closing tag except when they don't. So there's a few exceptions. But for the most case, tags have opens and closes. And what we see here is that we can just see that they're putting the 12 ones which maps to this first example. And below that, we see the eight and the four and that's what maps to this. And the three fours which maps to this. Okay. So don't don't worry. We'll let's simplify this just a little bit. If we go back to it, we just look at our tags. We have this end. There's a start div with the class row. That's what get that's what establishes the row. And then it it's end tag is down here. Then to start a column, we just say div again, class and we give it the unit as six. Now, if we look at this call means column. MD is really the what size monitor do we want that to show on. So the way it works is if I say MD six, it'll be, side by side on a laptop or desktop. If it if the device is smaller than that, then these two things will each get its own row, which is nice. And that's called a responsive design. So as the page gets smaller, it responds by putting these two things on their own rows. Now, for the most part, when do you use each of these? I typically would recommend just just worry about the MD and these maybe are more advanced. I just put this in here because I knew you'd ask what the MD meant. But generally, you can just do the MD. If you want to be more advanced, can start playing with some of these others. If you use XS, that means it's always gonna be two columns next to each other. Even if it's on a phone, they're gonna be next to each other. So just make sure that that looks good. Okay. So how do we apply this to our forms? Now, if you're in the workflow action of a user entry form or if you're in event registration and you're creating your form, you may have noticed that there's these pre HTML and post HTML. And that allows you to put HTML before or after your form field. Okay? So in this case, for the first name, we've enabled both of those and before it, I just add row and the first column and after it, I end my first column. Okay? So this to end div goes with this div. Then in last name, do the same thing. I start my my column and I end my column. And because I haven't ended my row yet, I end it down here. Okay? And so that's what's gonna get the first name and last name next to each other. So that's pretty easy. Now let's look at grouping things. So how we do with the contact information. In Bootstrap, that concept is called a well. Why it's called a well? I don't know. But it is called a well. And this is even simpler. So we're using the same div tag here and just giving it a class of well. And whatever's in the middle of that will get this will get wrapped around, this nice little panel. There's some optional things to make it, , a little bit more spacious or a little tighter, but for the most part, just use the well. And again, just trying to simplify that. It's really this simple. Now going back to our example here, I'll use the pre and post again. So I want to wrap the email address and the phone inside of one of those wells. So I start my div class equals well. And in this case, I give it a nice heading. So the h, four means heading. H one is the biggest heading, h two is smaller, h three is smaller than h two, and h four is below that. It goes all the way up to six. But typically in Rock, if you want to do something that's not super, big, I would recommend that h four, at least start with that. And then I need to end my well after the phone number. Okay. So this is the post HTML right there. Now, those are the two that we showed in our sample, but a few others that you might just want to see. Bootstrap also has this concept of alert. This is a great way of providing, instructions on your form. So, in in your forms, there's a way to have some pre HTML on on workflows and you might choose to put some instructions in this. And so, this is super simple. So, down here we have our div. We just give it a class of alert. And now we need to tell it what kind of alert. So we say alert dash success and that gives us green. And you don't really necessarily have to worry about the role, just worry about the class. And then whatever you put in there would be the contents. We put well done. You're you're successfully read this importance alert message. Now there's different colors. So this is success is green. Blue is information. Yellow is warning and red is danger. In general though, I would recommend not using red. It's really screaming at the person. And so typically, if if you have something you want to alert them of, yellow is probably a better choice. So again, it just looks that. As an example, on the form header of a of a workflow, , you can give it some nice instructions. An h one is again that big huge title and then we give it a div with the class alert. And now, notice here we're actually personalizing it to the currently logged in, users. We're saying current person nickname. So maybe, Ted, please complete the entry form below to start the approval process. And that'll be in that nice blue box. Super simple and it makes it very easy to complete the form and know what the instructions are. So these are a few tips for you to make your, workflow forms and also your event registration forms really shine.