Rock U - Workflows - Form Styling

Transcribed Video Content

A workflow form can often be one of the first things that a guest or a member sees and a bare list of fields isn't super inviting. So let's talk about how to style your form so that people know where to add information and your form looks what they expect from your organization. So I just wanna call out a way that a lot of people are styling their forms now. If you go to tools, down to form builder, we'll click there. You can add forms from here that get added as actions to a workflow. So if we were to click into staff forms, for example, we have the baptism form. And if we go to edit this, you'll see that some of the things I'm about to show you, which include changing, the width of a column and, doing a lot of other things that change the style of one of these fields, this can be done pretty easily and simply from the form builder. But if we want an inquiry form this, for example, where we have fields that are side by side, we have a well that makes it clear that this contact information is one set of things, it really makes going through a form easier for people because the most cognitive load is just having tons of fields in a row that look hard to fill out. People will probably leave quickly if they see something that. So let's look through how to simply add this styling to a form. So the first thing that's important is understanding Bootstrap columns. These are all over the internet. A lot of things that you use, use Bootstrap to make sure that things are sized properly. And there's four different specifications that we can add to our HTML to kind of change what the sizing looks . So when we add this thing that says COL slash MD slash six, for example, twice, what that means is basically all the numbers have to add up to 12. That's the number of columns in a row. So if you have two that are sixes, then you'll have an exact split between those fields, which you saw a moment ago. And if we wanna change at what, essentially, what screen size these rows max out, then you would do this thing that's over on the left where you specify the size of the screen such as c o l slash or dash l g, that's for large monitors. A medium one is for laptop and desktop. Tablet is small and phone is extra small. Something else to mention as well is alerts. We can easily add an alert to a, to a different field to make it clear whether you need to show something that was successful, you wanna give info or a warning, but you just wanna alert people and make something clear, you can do that using this format at the bottom with a div, which if you don't know HTML, don't worry. This is a simple implementation of HTML. We're adding a div, which kind of defines what this container is that we're wrapping around a form field. And we add a class of alert, alert success, which means in this case that we'd show the success alert and we added a role of alert as well. But again, don't worry about that. And I suggest you use, the form builder if you want a really simple way to do this, but let's head to our workflow configuration. We've gone to admin tools, settings, workflow configuration, and we're looking at our external inquiry. We're gonna edit this workflow and I've shown some of the different styling things you can do. So if we click on the request, we're going to go to the prompt user action, which is a form action type, meaning we're showing a form And something we did first of all in the header is we did some custom HTML with a header saying how can we help and a paragraph. That's what this these tags mean. We're wrapping a paragraph. And then we're showing a bolded text item here, which is actually lava, just showing our organization phone. So if we ever change it, it'll be flexible. This form will be updated automatically. Then coming down here, we have all these fields added, and you'll notice this HTML that's shown. What I did is I've clicked pre HTML and post HTML, allowing me to add this HTML in front of one of my fields and behind it. And you can really stack things here. So I have an ultimate container here, the row class, and then I have another class of column medium six, meaning for desktop size screens, this field is gonna take up six different rows or sorry, columns, six different columns. And then we closed off this one column, then we opened another container saying six medium columns again, then we close that off and we close off the entire thing. So now these two different fields are gonna be in a container together, and we did this again, but for a different kind of thing we can show called a well, meaning that information will look grouped. So I added pre HTML to the email address field, then post HTML to phone, and I added that class of well. Then we just added a header to make it clear what this well is about. We closed it off. Then you would go and hit save, and this is what it will look . That thing you saw earlier, we have these two different columns together for the first name and last name field, then we have the contact information all grouped together in a well. Thoughtful styling turns a bare list of fields into a form that people are happy to fill out. Don't forget that small touches this make a big difference to someone a first time guest.