WS Form Styler Demo with Mark Westguard

[00:00:04] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of manage WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with the hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% of new purchases. Find out more at go.me/wpuilds.

And by Bluehost. Redefine your web hosting experience with Bluehost Cloud. Managed WordPress hosting that comes with lightning fast websites, 100% network uptime, and 24 7 priority support. With Bluehost Cloud, the possibilities are out of this world. Experience it today at bluehost.com/cloud.

And by Omnisend. Do you sell your stuff online? Then meet Omnisend. Yes, that Omnisend. The email and SMS tool that helps you make 73 bucks for every dollar spent. The one that's so good, it's almost boring. Hate the excitement of rollercoaster sales? Prefer a steady line going up? Try Omnisend today at omnisend.com.

Hello there. How you doing, Mark? Doing good. How are you? Yeah, very good. Um, we've had a very long conversation about archeology and all sorts prior to hitting record We have, but um, we're not gonna talk about archeology. We're here today to talk about airplanes. No, we're not. We're gonna talk about WS Form and an exciting new development, um, over the Christmas holiday, 20 24, 20 25.

Uh, mark released. A really nice feature, and I imagine it was a boat load of work. It's called, is it called the Styler or just Styler? Whatever you want.

[00:02:02] Mark Westguard: You can call it the stylist, stylist style. Yeah,

[00:02:05] Nathan Wrigley: yeah, yeah. It's,

[00:02:05] Mark Westguard: uh, yeah, I think style is the, the usual term.

[00:02:09] Nathan Wrigley: Okay. And it's the, it really is a full on suite of tools built into your WS Form, um, install, which enables you to style WordPress forms within an inch of their lives.

And I think it's fair to say that you have done as good a job as it's possible to do. And I don't mean that in a sort of, you know, I'm not trying to make you feel. Particularly good, but I'm happy to report that having played with it, you can literally change everything. Um, pretty much. Pretty much. Yeah.

Yeah. So you're in the vanguard, I dunno, of another form solution that does this. Perhaps there is something, but, uh, what was the, what was the reason behind it? Were you just sort of fed up with the sort of customizer setup that you had previously? Was it just too limiting?

[00:02:51] Mark Westguard: It was, yeah. When we originally built WS Form, the customizer was the thing to do.

You remember, you probably remember that under the appearance menu. Um, then you clicked on, I think it was customized and um. One of the problems was the, the field types in that customizer were fairly limited, so you could do kind of basic colors and font sizes and stuff. Um, and it was also a bit clunky, so it was very spread out.

We couldn't really do a lot with it. Um, and, and times moved on. Right. So we're, yeah. Six, seven years ahead now. Um, everyone wants to use CSS variables and take advantage of some of the new CSS features that are out there. So it was time for a rewrite with that. So, um, yeah, so here we are. We've now got a new brand, new Styler, which hopefully should give people a lot of control over the forms.

Um, so they can change pretty much anything they want. Great, and we'll

[00:03:43] Nathan Wrigley: get into a screen demo of that in just a moment. Yeah, yeah. The intention is to give you a sort of quick, quick overview of some of the things that you can do and how you might go about the UI and what have you. Just before we do that, does this, is this like a pro feature?

Is this something that you've got bound into a particular license? Is it, is there an upgrade path? What's, how

[00:04:00] Mark Westguard: does it work? No, this, this is available in the light edition, um, and all three of the pro editions as well. Nice. So, um, yeah, regard to what version you're using, what we're showing you today will be applicable to any of those versions.

[00:04:11] Nathan Wrigley: That is so nice. That's really, really great. Okay, so let's switch to our screen sharing option. Yeah, yeah. There we go. Um, so here we are looking at WS Form. We've obviously installed the plugin. Yeah. And, uh, we're good to go. Where do we go next?

[00:04:25] Mark Westguard: Okay, so on the left hand side, in the admin now. You'll see we've got a Styles menu.

Um, so let's, let's just talk about styles first of all, um, and what you can do with them. So, when you first install WS Form, you're gonna get a default style installed called Standard Light. And Light means that it's a dark on light style, so you've got dark text and the light background. If you've got the Pro Edition installed, then you're also gonna have a conversational style installed, and that's for a conversational style.

Form if you are using that feature. But in this tutorial we'll just talk about the regular styling, um, so you can get used to that. So, excuse me, styles. Um, you can basically add as many different styles as you want. So whereas before you just had one style for all of your forms, um, you can now actually add multiple styles and assign those to different forms.

So for example, you may have a contact us form in the body of your website, um, and maybe you want that to have a light background, and then you may perhaps have a footer on your site that has a darker background and you could create a separate style for. Footer and then assign that to any forms that you have in the footer.

So, um, the nice thing about styles is they're portable. So you can actually export for, uh, styles. So if I click on export, that will give me a little JSO file here and I can drag that in to maybe a different website. Or the same website. So you can actually drag styles between different sites. Um, you can also clone them.

So if you, maybe you wanted to start from standard light and create another style, you can just hit clone here. That'll give you a copy. You can then edit that and rename it if you want to. So you can add as many different style styles as you want. Um, now one of the styles will be set as the default and any new forms that you create will be assigned to the default style by default.

So if you have 10 styles, as I say, sorry, if you have say, 10 forms and they're all assigned to this default style, if you change these colors, it will affect the colors on those 10 forms. Uh, but you can also assign a style to a particular form if you want to. So, but the default one, uh, if you're just. Most, most people are just gonna have a default style for all their forms on their site, and it would automatically inherit these colors if the form is assigned to that.

Um, I'll show you how to assign a form to a style. So all you do is if you go into your form and you click edit. If you then go to form settings at the top right here and go to styling, then this is where you choose which style you want to use for that form. So you'll see the this, this is set to default, but if I'm to override that to one of my other styles, I can do that here.

So let's go back to

[00:07:07] Nathan Wrigley: styles and lemme just pause what I've just heard so that Yeah, I'm sure I'm on the right page. So Sure. You can put any number of different styles into there. So you click add Yeah. You create a new, a, a, a set of styles for any form and then you can bind any form to any style Correct.

And swap it over and import them and export them fairly trivially from Now you, you obviously gave a demo. From this site to this site. But you would, yeah. I don't know if you have two tabs open, one site over here and another one over there. You could go from domain A to domain B. Just drag it in and it's the same.

Great. Correct.

[00:07:40] Mark Westguard: Yeah. Okay. So you could, you could save. Save a bunch of JSON files to your computer and then use those elsewhere if you want to.

[00:07:48] Nathan Wrigley: Okay. Okay.

[00:07:49] Mark Westguard: So, um, and you could also, uh, if you want to start from scratch as well, you can also click add new here at the top. Yep. And you can actually choose, um, a style to start with.

So if, if you have a site which is light on dark, IE light text, and a dark background, we actually have a template for that. Um, and this, this shows you the different colors that are used in that. Um, particular template, just a little chart of, of shades, and if I click on use template, it'll then create a style using that template.

Now the idea is in future, we are gonna have different templates, maybe for different frameworks like core framework or maybe a particular site builder. Um, so if they have

[00:08:29] Nathan Wrigley: Oh, got it. Neat. Yeah.

[00:08:31] Mark Westguard: Yeah. So if they have. Particular CSS variables, maybe for like a base color, background color and things like that.

We can actually pull those into these themes, um, and then we can make those templates. Um, so yeah, eventually, hopefully we'll have some more templates in there, but we've got the basics in there, the light and the dark that you could, that you can choose from. Okay. Okay. Okay. So let's, let's do some fun stuff.

Let's actually go in and change one of these. So if you want to change these colors, we can click on. The name of the style and what it gives us is on the left hand side we've got the actual Styler itself, where we choose different settings and colors and stuff to change. And on the right hand side, this is actually a built-in preview template that shows you some of the different field types, um, and enables you to preview those changes.

So, um, we've got stuff like text fields, text area, we've got some choice fields here. Things like check boxes and radios, calendars, rain sliders. Color pickers. Um, under advance, we've got things like the file upload. So these are, these are actually the field groups that you have in the layout editor. Um, you've got your signature fields, progress fields.

Content like message. Um, and then we've also got, uh, buttons as well, so you can actually change all the button styling. So on the left hand side here, um, most of the styling can be done from this form category here. Um, and I'll show you how this works in a second. But basically the colors, the typography and everything bleed through to the other events.

Uh, the other field types, um, automatically, but if you want to get a little bit more granular, you can go into a particular field type and change the typography and colors if you want to. Okay. But really, if you just want to change the colors on the form, you can go form, go to color palette. And then we can now change the different colors of the form here.

So you've got the background color. So if you click on the little swatch here, a little color picker will come up and we can change the opacity, the transparency. Oh,

[00:10:32] Nathan Wrigley: that's so obvious. What's going on? That's

[00:10:34] Mark Westguard: great. Yeah, you can change the, the color. Uh, you can change, you can actually use the color picker down the bottom here as well.

So if you are using, um, a theme that has a color palette in it, we pull in that color palette at the bottom here automatically.

[00:10:51] Nathan Wrigley: Oh. So those, in this particular case, if, I don't know, let's say I'm using theme A Yeah. And I've got some global style set up in that theme, they're gonna appear there. Correct.

Nice.

[00:11:02] Mark Westguard: Um, and yeah, and I'll show you another feature of that later on as well. Mm-hmm. So, so yeah, you can, you know, instantly change the color. It's all real time, so any changes you make would automatically appear on the right hand side here. Uh, let's make that transparent again. Yeah. And then you've got your base color.

Your base color is mainly used for the text on the form. So we can go into there and we can change that base color to anything that we want. Yep. Uh, we'll leave that as black. And then you have base contrast, and that's basically the invert of the base color. So if you go to buttons, for example, you'll see we've got white text on those buttons, and that's actually the base contrast color.

So if I, if I change that, you'll see. Those colors change here. Okay.

[00:11:41] Nathan Wrigley: That's good to know. 'cause that was one of the things when I was playing with it, I wasn't entirely sure what that contrast was. Yeah. Okay. That's good. Okay. Yeah. Right, right, right. So

[00:11:48] Mark Westguard: that's wherever you've got like a dark background and you wanna put something with a high contrast color against it, that's what that's for.

Yep. Uh, if we go to the choice fields, um, you'll see we've got an accent color here, and that's used for things like the checkbox background color here. So if we change that, you'll see those colors changing. So that's what the accent color's for. Nice. We leave that as blue. Um, and then you've got neutral colors.

So that's, you know, if it's not checked or it's disabled, uh, the neutral color tends to get used for that. So you'll see if as I change that, that's gonna modify those colors. And WS Form behind the scenes is handling a lot of the color shading for you. Um, but that again, can be, can be changed. You'll see here you've got two different shades of, of gray.

Um, but it's, it's handling all those, those color shades for you. Then you've got a bunch of different fixed colors here, um, which are used for things like the buttons. So you've got, uh, your primary color here. You'll see the primary button color changing. That's what that's for. Um, and then all the different colors here.

So you've got like success messages, information messages, warnings, and danger. Um, and those are different colors that you can pick for, for buttons and also for these messages too, right? So like, right, which. You know, if you wanted to change the, the danger button to be green, you could do that. Yeah, of course.

Whatever color you want. And you'll see it's handing all the shades as well. So the background, yeah, background shade and the side shade there are, are all handled for you. So those are your main colors. Okay. I'm just gonna

[00:13:19] Nathan Wrigley: point out as well. You've got a reset. I. It looks like, um, yeah. Yeah. So if you, if you tinker and you don't like it, you can just go back to the original just by hitting the button.

That's correct. Okay. Yeah.

[00:13:28] Mark Westguard: So if you accidentally change the base color to, oh, you know, I don't want red, you can hit the reset button there and it'll put it back to black again. Nice. Yep. There's also a copy button here and what that does, if you click on it, um, that will actually copy the CSS variable for that color.

Um, I'll just paste it in here so you can see it. Um, so there's the CSS variable for that particular color. You notice that you can actually put the variables in the search that will bring up where that, where that variable's actually used. Um, so I. We'll leave that back as it was for now. Okay. Yeah.

[00:14:00] Nathan Wrigley: That's the tinfoil hat version of it. Yeah. We'll, we'll come back to

[00:14:03] Mark Westguard: that in a second. Yeah. Um, so that's your colors. Uh, again, that will change pretty much everything through the, the form automatically. You could also change the border if you want to. So we could do like a black border and we could say, add a width to it.

We could add a, a radius to that if we wanted to. Um, you can then go to spacing and you can change things like the horizontal padding. Move things around. Um, and then, you know, if, if you went back to your color palette, you could then change your background color. You can see how you can really, yeah, quite, quite quickly start to style things.

Um, so that's your, your border. Um, and then you've got your typography as well. So if you go to typography now, a lot of the typography is inherited from your theme. Hence we've got the word inherit here. Um, but you can change that. So if I delete, inherit, and click on that, you'll see we get some. Widths, you know, web safe fonts come up.

You can put your own fonts in there if you want. Um, but we could change that to a different font if we wanted to. Yeah, you can change the font size of the, of the form. Um, I recommend keeping the font size at 16 pixels, um, or one REM if your base font size is 16. Okay. So, um. Basically your theme or you know, your base CSS will have a base font size, which technically should usually be left at 16 pixels.

And the reason you wanna leave it at 16 pixels is for accessibility. Um, if you have a font size that's less than 16 pixels, if you're looking at a form on a mobile device. It's say 14 pixels, when you click on the field, it'll actually zoom into that field.

[00:15:38] Nathan Wrigley: Yeah, yeah. Um, whereas

[00:15:39] Mark Westguard: if it's 16 pixels or more, you won't get that zoom effect.

Um, 'cause that's kind of the, the, the base font size that people recommend. So you can override that here if you want to. Um, I should mention that here. You can actually change the, uh, unit of measurement if you want to. So if you wanted to use rem, you can, if you click on REM here, you'll notice it automatically calculates from your original pi pixel font size to one REM.

So it's looking at the base font size and recalculating that for you. Yep. Um, so yeah, you can either use this, um, you can actually type in like. 12. If you type in REM, like R, it'll change it to REM. Uh, so I can do one R and it'll do one REM Nice. Or I can do 16 p and it'll do 16 pixel. So when you copy and paste sizes in there, that works.

Or you can use the rain slider here to adjust that and play around with it if you want to. So that, that's kind of your base font size. Then you have a small font size that's used for things like the required and help text. Yeah, the fills. Uh, then you've got your large font size that's used for like section legends like that.

Um, above a particular section. So you can adjust that if you want to. Uh, you can do things like the font size, the font white, the literary, the line height. If you want to change that, that can all be changed. Um, you can do, it's so great. Yeah, it does, does, does a lot of stuff. So you can change it to uppercase if you want.

Um, you know, whatev, whatever you wanna do really. So we'll leave that back at inherit. So that's your typography. Um, and then we do have some transitions as well. So if you go to say, a choice field, when I click on a switch, you'll see it animates left and right. Yeah. If I go to transition here, I can actually change that speed.

So if I did 2000 milliseconds and then click on it, you've now I've got an incredibly slow switch.

[00:17:27] Nathan Wrigley: That's what we all want.

[00:17:29] Mark Westguard: Exactly. Yeah. I've never seen that before. That's so interesting. That's, yeah, so you can change it or you can, you can disable the transitions as well, and it'll just become instant.

So, yeah. Um, that's, you know, we leave it at 200 milliseconds. That's kind of a nice Yeah. Uh, speed for everything. So that's, that's, that's your basic styling, right? So you can change pretty much everything from that form section. And now if, if we, so, just to be clear, right, sure. When you opened

[00:17:54] Nathan Wrigley: up the S Styler mm-hmm.

You were presented with those six. It's like an accordion. You've got form tabs, section field, field types, conversational. We've, and all we've done so far is look in the first one. Yeah. Form, right? That's right. Okay, got it. Yeah. Okay.

[00:18:09] Mark Westguard: Oh, um, oh, come on, mouse

[00:18:13] Nathan Wrigley: again. No, on a previous. On a previous recording, exactly the same thing happened.

Yeah,

[00:18:18] Mark Westguard: the mouse just gave up on it. I got too much radio interference here, I think. Okay. So, um, well, we'll quickly look at these other ones. So like tab again, you can change the background color to it if you want. Um, so we can adjust that if you want to play around with that. Um, again, you can use the.

Theme palette. If you want to change those, let's go. Let's go with yellow. Why not? Um, this is gonna be a terrible looking form by the end of the video. I think Mark,

[00:18:43] Nathan Wrigley: just interrupt you here. I think you should offer an award for the, like a, a, a prize for the person that can come up with truly the most horrible, uh, form.

It's not difficult, just click randomly

[00:18:57] Mark Westguard: for 10 minutes. Yeah. Without

[00:18:58] Nathan Wrigley: fiddling with the font size or anything like that. Just what's the most jarring. Exactly. Sorry, I interrupt.

[00:19:05] Mark Westguard: Uh, yeah, so you can change the border style on this. If you wanna change, you know, the radius right there. Modify that. You can change

[00:19:14] Nathan Wrigley: the,

[00:19:14] Mark Westguard: the width.

Yeah. You can get really Gordy. Yeah. Um, yeah. You can change the, the, the width and size of these. So if you wanna adjust the horizontal padding. The vertical padding. So pretty much anything you can change. Yeah. You see as we get deeper and deeper into it. Again, you can change the typography just on the tabs as well, if you want the variable.

Yeah. Yeah. Nice. So, you know, we could go really cool. You couldn't, we could go comic sounds. Oh, look at that. Yeah, let's get rid of that. Um, so that, those are your tabs. So you can modify tab stuff, uh, that's come out of that. And then we can go to a section. So a section is basically a collection of fields.

Okay. So if actually let's go into a form quickly and show that. So if we edit a form, so here's a section here, right? So we've just got one section on this form, but we could, for example, have two sections. So one section, two sections. Okay. Um, and sections can have labels, IE legends, um, on them. So, uh, that's what this section here is.

So for each section you can change the background color and change the, the legend as well. Um, what, so it's not so on a per section

[00:20:23] Nathan Wrigley: basis, it's each section will behave in the exact same way as the other sections? Yeah. Correct. Okay, got it. Got it.

[00:20:29] Mark Westguard: Yep. Um, and then you've got field level stuff too, so you can change the background color, um, of those fields if you want to.

Now, here's where our variables start to come in, because we're getting a bit deeper into the form. Yeah. Um, this is actually pulling in. Some of the earlier colors that we had at a form level. Um, so the base contrast color that we were talking about earlier, which was white, um, that is being pulled in by using a variable.

So the cool thing about this Styler is you don't necessarily have to use color references. You can use CSS variables for any of the values. So if your theme. For example, has its own variables. You can pull those, um, variables in. So you might have a variable such as, I dunno, um, base color. Yeah, that might be a CS variable you have.

So you can pull those across into your form, and that way you only have to change the colors in your theme and not have to come in here and change them. Um,

[00:21:27] Nathan Wrigley: oh, I see. Yeah. Yeah. That, I mean, that's lovely, isn't it? So you, you can have a website where you confidently change the theme colors and know all the time, all the while that the.

The forms are gonna go along for the ride as well. Yeah, that's neat. Correct,

[00:21:39] Mark Westguard: correct. Yeah. So a form level here in the color palette, you could, if you've got CSS variables, you could put things like var, I dunno, it might be color dash background, something like that from your theme that's then gonna inherit that theme, that color from the theme automatically.

Yeah. Neat. Um, so, uh, but yeah, you can, you can change the, the, the colors here for your, the back of background of your. Fields. Um, one thing I should mention as well is it does support hexa decimal RGB and HSL color formats all the way through.

[00:22:10] Nathan Wrigley: Okay, nice. Um,

[00:22:11] Mark Westguard: so you can either, you can use those three different color formats or you can use variables for any of these, uh, these entries here.

Um, you've also got thing like, you can change the hover color, focus color, disabled color, invalid color as well, um, for the fields as well. So you'll see here. Um, but the field is invalid. The background, the, sorry, the border goes red. Yeah. Um, so you can, you can actually change that. If we go to border color here, you'll see when it's invalid.

We're using the danger color, which is red. Yeah, yeah. Uh, but we can override that to anything else that we want, you know, so if we want that to be purple or There it is yellow. Yeah, whatever. Whatever you want. Or you can click and put it back as it was. Yeah, so that's that That'll affect all the fields on the site.

Most of the fields anyway, um, that have borders and backgrounds and typography involved with them.

[00:22:57] Nathan Wrigley: But just to be clear, it'll only affect all the. Four fields on the forms that are bound to this style. Um, yeah. This standard light version of the styles, right? Correct. Okay, great. Yeah.

[00:23:11] Mark Westguard: If you had a different style called footer, for example Yeah.

Then it would only inherit the styles from that particular style. Yeah.

[00:23:17] Nathan Wrigley: Got

[00:23:17] Mark Westguard: it. So it be, you

[00:23:19] Nathan Wrigley: can clone them, right? I think I saw you do that earlier. You can clone the style. So if you put in all the variables and you've done that job once, you could then clone it and then just quickly go to your, let's say you create a new one for your footer and just modify the bits that need modifying.

But everything else, you know, is gonna be just hunky dory. Okay. Yeah. Yeah.

[00:23:37] Mark Westguard: You might just wanna change the background color and the text color perhaps. Yeah. But you want to keep the fonts, you know, the font star and all that kind of stuff.

[00:23:42] Nathan Wrigley: Yeah. Yeah. Okay.

[00:23:43] Mark Westguard: Um. And you can change things like, you know, the invalid feedback.

So you can actually change the gap between the invalid feedback in the field and typography for those and colors. So there are over 400 settings what you can change. So you can see how, how. Deep. You can go in, now we can go another level deeper. So, uh, let's go down to a choice. Oh, one thing I should show you actually, um, if we go, let's go to field types and we'll go to say date, time.

[00:24:12] Nathan Wrigley: Oh, I see. You are now just, just on that specific

[00:24:15] Mark Westguard: type of field. Got it. Yeah. Right. Wow. So we can go further in. So we go to calendar. And let's go to background color. Now, when I change this, when I click on this, you'll notice on the right it flips to that particular tab automatically. 'cause it knows you're about to change the calendar.

Oh. So it's, yeah, that's helpful. Thank you. Yeah, yeah, yeah. Oh, you're welcome. And just so here, we can start modifying things in the calendar. Um, so you can do things such as the background color. You can change padding, so we can actually change the padding in there. We could change. Vertical padding on that calendar.

Uh, you can change the typography just for that if you want to. So you'll see, again, we're using a CSS variable here, which is putting in the base font family. Uh, but if you want to override that, you can delete that, choose a different font, and then it'll modify that. Change the font size up here. Yeah. Um, so you can, you can change the, um, the, the fonts, the colors, the padding and, and everything else on, on the calendar as well, if you want to, um, the calendar heading as well.

Uh, things like navigation, you can even change the icon colors as well. Wow. So, um, if you go into here, I can change this to yellow, you know, whatever color you want. So we've actually gone through all the, the icons, uh, and made all those CSS compatible, so there's no kind of fixed graphics for icons anymore.

Um, those, those can all be changed, uh, in change, you know, the padding within the calendar as well. Wow. Mark. There's

[00:25:45] Nathan Wrigley: just no stone left unturned here. This is incredible.

[00:25:49] Mark Westguard: I'm sure there's a setting We've missed some. Yeah,

[00:25:51] Nathan Wrigley: yeah. Answers on a postcard too. Uh, which setting did

[00:25:54] Mark Westguard: Mark miss? Oh, which did I miss?

Yeah, same with check boxes as well. So you'll notice, for example, let's, if we sh perhaps show this checkbox here. Uh, if we go to field and we go to, uh, actually no, let's go to form and go to typography and we'll change a font size. You'll notice the check boxes. Oh yeah, they go along as well. Yeah. Okay.

Okay. Yeah, and I actually did some work with Jen Hairs who does the, um, accessibility. Accessibility day. Yeah, yeah. Yeah. She's, she's so helpful. Um, and she, you know, she was helping us out with making sure that when you're in. You know, certain browsers and you adjust the font size and things like that. Um, everything, you know, works accessibility wise.

So if this font size gets bigger, the, the field automatically grows in size. Um, so we've taken all that into account, um, as well. So important to make sure you've got your accessibility down on your, on your website. Nice. So, yeah, so field types, I mean, we could go on forever, but we're not going to, but you've got settings for all of the major groups of field types.

Can we just look

[00:26:54] Nathan Wrigley: at a quick one, like one of my pet. PS is the checkbox actually. Yeah. Um, 'cause I always wanna, I don't know, there's just something about it I wanna fiddle with. So you could what, for example, like change the border radius on that or something. Oh, it's colors. Is it? Yeah. You can do colors.

[00:27:08] Mark Westguard: Yeah. You can actually change the border radius as well. So if you go to field and then go to border style. Got it. You can. Adjust. Yeah, look at that. Okay. All the way through. Yeah. Yeah. Um, and then check. Yeah. So you've got a border style here. So you can actually change the border radius. 'cause what we found was on a field, perhaps, actually let's go to, yeah.

Go to field, go to border style. Let's say you wanted quite rounded fields like that. Now that doesn't work very well for checkbox, right. It doesn't look like a square anymore. It looks like a radio.

[00:27:41] Nathan Wrigley: Yeah, yeah,

[00:27:41] Mark Westguard: yeah. So you can go down to here and you can actually override that and make those square again.

Um, so you can Oh, I

[00:27:47] Nathan Wrigley: see. So you want rounded buttons, but the boxes, yeah, yeah, the check boxes. Okay. So yeah, so you can really all cars, isn't it this?

[00:27:54] Mark Westguard: Yeah, yeah, yeah, yeah. So you can change pretty much anything you want. Um, even down to like rain sliders as well. So if we go to rain slider, you can actually change the track color.

Uh, so here's like the, the bottom track color. Uh, yeah. So we go on. Anyway, so lots and lots of stuff that you can change. Um, let's, let's do something. Let's just show, let's say, oh, I've made a right old mess of this. I don't like this yellow. There's a, there's a panic button.

[00:28:21] Nathan Wrigley: Yeah,

[00:28:22] Mark Westguard: there it is. The panic button.

There's the panic button. You can hit undo at the top. That will actually take everything back to where it was when you started. Uh, doing the styling on the form. Um, then you've got some other settings here, such as the name. So if you click the setting icon, you can change the name of the style here. So if you wanted to change that to footer or header, whatever you wanna do.

Yeah. Um, and then when you finish making changes to the style, you hit the save button up here. Okay. And that would immediately make that style present. On the front of the site, there's also a help icon that will take you to a knowledge base. Um, and that will tell you more about the Styler and some of the features that you can use.

Um, now let's, let's quickly have a look at this alternative color screen. Yeah. So sometimes, uh, people will have a preference that they want maybe a dark background and a light text. Um, so let's, let's go right to the beginning with this and explain what an alternative color scheme is. So on your computer, um, and now I'm, I'm using a, a Mac.

It'd be different on a, on a pc, but you'll see here you've got an appearance preference here where you can do light, dark, and auto.

[00:29:28] Nathan Wrigley: Yep.

[00:29:29] Mark Westguard: Auto will typically, I think it changes it depending on the time of day. Time of day. Yeah. Yeah. Something like that. Um, so the first thing you wanna do is let's come outta here and we'll go to settings in WS Forms.

So from the, the WS Form a admin menu, we'll go to settings and there's a styling menu here. And this is where we can tell WS Form what color scheme you are using. Are you, does your website have a light or a dark theme? So if your website is predominantly a dark background with light text on it, you want to choose dark.

If your website is predominantly a white, a light background with dark text, you choose light. Yep. So I'm gonna leave mine on light 'cause that's the, my defaults my theme. If I then go into Styler here, then I can go up to settings and I can enable the alternative color scheme. I. And let's just close that.

Now we've got three options that have now appeared. Oh, okay. So if we go to, um, click in form, we'll just go to the color palette. Let's just worry about the top level colors for now. Um, if I click on base, that shows me, because I've got a light website, it'll show me the dark on light settings with you. If I click on alt, it's gonna show me the alternative color scheme for that form, which is now light on dark.

And if I click on both here, I can actually see both colors at the same time. So I can see the base colors and the alternative color scheme. So, um, I'll show you how this works. If I go to base, if we, if I click on my appearance setting, do you see how the form is automatically changing?

[00:31:01] Nathan Wrigley: So you're doing this on the computer?

Yeah. And the computer is then telling the browser. Mark wants dark websites. Mark wants light. Yeah, I want a dark theme or a light theme. Yeah.

[00:31:10] Mark Westguard: So that's flipping between these two color schemes here. So the nice thing about this is if I click on base, let's just say for argument's sake, we wanted red text.

Okay. Um, and maybe a dark shade of red. If I then go to the alternative color and I hit this little magic wand, it would automatically choose a light version of that color for me. Oh, that's magical. The other cool thing is if I click on that swatch, you'll notice the color palette at the bottom now gives me different shades of that red, um, that I can choose for a light color scheme or the all the alternative color scheme.

Um, so I can choose, you know, one of those and it'll do that for all these colors. So again, if I change this to like a dark, well, let's do a dark purpley color. Uh, again, if I hit that magic wand, it automatically chooses that color for me. Um, so if, if I, um. If I now go to the switcher and go to dark, you'll see now we've got that lighter color, which is a much better contrast than the the regular.

[00:32:14] Nathan Wrigley: So it's really, that's so neat. Can I ask on a technical level, how are you making decisions about what the alternative is gonna be?

[00:32:22] Mark Westguard: Um, so there's a. It's a, a little bit like media breakpoint, so there's a media selector for it in the CSS. Got it. Um, so when you change your preferred. Color scheme from light to dark, uh, that gets sent to the browser and it is then interpreted through the CSS.

So basically when you, when you add an alternative color scheme to these styles, when we render the CSS, we have a whole block of, um, variables that are specific to the alternative color scheme and the media. Select a check to see what your preferred color scheme is, and we'll then use those colors if you've chosen a dark color scheme, basically.

Got it, got it. Um, but we call it alt and not dark because it doesn't necessarily need to be dark thing. Yeah. It could be the other way around, wouldn't it? Yeah, yeah, yeah. You could, you could. Yeah. I mean, it could be anything. Um, so yeah. Yeah. Like, like you say, it could be a dark on light, a light on dark.

Um, and, and it just depends on how your website is set up as to what peel, uh, refers to.

[00:33:27] Nathan Wrigley: Can I ask you another question? So let's say that you've put in on the, the base there, you put in mm-hmm. Uh, a dark red. Yeah. And then you click the little magic icon. Yeah, the little wand. And it picked that, I'm gonna call it pink for want of a better word.

How was the decision made? Like what, what, what's the function that's running that to sort of say, okay, this is what we think the best alternative is. Yeah.

[00:33:49] Mark Westguard: Oh, that's, that's the secret trademark. That's, yeah, I can't say no. It's all it does is it, it actually, well let show you. I think we might be able to show you, so if we go to HS l.

Which is huge saturation and Oh, I think I know

[00:34:04] Nathan Wrigley: what you're gonna say. Yeah,

[00:34:05] Mark Westguard: yeah, yeah. So if I click on that now you see how that's 80 and that's 20. Yeah. So it's basically flipping it. Yeah. So it's saying a hundred percent minus whatever that value is. Yep. Got it. And then that gives you the, yeah. So you'll notice that because I've gone to HSL mode and I clicked on that magic icon, it actually produces it in HSL.

Uh, so if you're using HSL or IGB all the way through your site, all of the features, make sure that it. Follows the color scheme that, that you are using. So if I change that to RGB and then I click on magic wand, it's gonna give me the RGB equivalent. Um, if I'm using hex, then it's give me, gonna gimme the hex equivalent.

Um, it'll even do it with capacity on there as well. So. If I click that, it gives you the alternative of color with the same capacity on it.

[00:34:50] Nathan Wrigley: That's neat. So,

[00:34:51] Mark Westguard: so there's a lot of, a lot of calculations going on behind the scenes. Yeah. Um, to, to make it do what you want it to do. But, um, yeah. Hopefully that, that makes creating alt schemes a lot easier for people, um, because what you need to do that Neat.

Yeah. Really neat. Yeah. Yeah. Yeah. So. And if you don't wanna use that, you can just disable it when you're back to, to where you were again. So, um, so that's that. Now you've also got a search at the top here, which is really helpful. Uh, because there are so many settings, it can be a bit complicated trying to work out which one's which.

So if you wanted to change, that's say, uh, checkbox color, you could just search in here checkbox color, and it will now give you any colors that are available for a checkbox.

[00:35:38] Nathan Wrigley: Can I just point out that throughout this whole ui, you've s spelled the word color wrong? I'm, you know, it's fine, but

[00:35:44] Mark Westguard: I know, I know.

It's terrible, isn't it? Two British accents and we're spelling color without a U. So if you wanna do gap, you could just do search for color. What gap? Um, yeah. And if you wanna change. Button colors. You can just search for button. It'll bring up anything to do with buttons. So the search is really great for Yeah, that's your best friend, isn't it?

If you really kind of hunt something down. Yeah. Yeah. Even I have to use that. 'cause there's so many different settings. So yeah.

[00:36:10] Nathan Wrigley: 400 you said

[00:36:12] Mark Westguard: there's a lot. Yeah. And if we wanted to change the prefix, for example, you see this prefix over here, um, we can do a, just a search for prefix and there it is. There it is.

And I can start changing those colors too. Yeah. So. Wow. There's your prefixed color, there's your text color. Uh, you can even change the typography on those too. Um, so yeah,

[00:36:32] Nathan Wrigley: I, I, I then imagine how many sleepless nights this, this style has caused you.

[00:36:39] Mark Westguard: It was, yeah, it was about four months of work to, to get in.

We basically rewrote all the CSS in WS Form, and then we had to make it backward compatible as well. So we had to make sure that, um, you know, anybody that's using the old customizer. That it would work with this new version. Uh, but it was quite easy actually because the old colors, we just pulled in at a form level and then that was then bled through to all the other sections here.

Now if we go to the, um, support for this, if we go to styling forms category here in the knowledge basis, make this a bit bigger. You can see it. Um, you'll see there's a CSS variable reference, and if you click on that, this will give you all the CSS variables that we have in WS Form. So I can click pretty much like we have in the Tyr on the left hand side, but it shows you all the variables and what the default colors are.

Um, and you can then copy these Nice, nice. And then use those in your own CSS so you can still style. Our forms using your own CSS if you want to. Um, but we've made it easier now 'cause you can just change the CSS variables in your CSS rather than having to try and target things like you used to have to.

Um, but if also, if you've got. Old CSS that was starting in the forms, that should still work. As long as they are specific enough that the CSS selectors are specific enough, then all the styling should still work. So it should be backward compatible, uh, with what you had before. And if it isn't, it's usually a fairly simple case of changing things to, to make it compatible with the, the newer version.

Um, so yeah. So you've got basically in the, um. The knowledge base here, we've got information about the Styler, so you can read more about the Styler itself, that that is this that we were referring to.

[00:38:21] Nathan Wrigley: Yep.

[00:38:22] Mark Westguard: And then you've got another article about styles, which is, you know more about, let's come outta here.

That's more about this page here. So your in individual styles. Okay. And what you can do with those. So that talks about exporting them, importing them, uh, adding additional styles, assigning styles to particular forms, and so on and so forth. So, so yeah. There you

[00:38:47] Nathan Wrigley: go. It's, it's a bit of muscle memory. This isn't it.

It kind of feels like once you've done it a few times. I honestly, I, I had never used the interface at all and I didn't look at any of the documentation. At all, and I managed to figure out what I needed to do. I mean, mine was, should be intuitive. Yeah, it was really straightforward. It, you know, I, a couple of blind alleys of a few seconds, but mostly it was plain sailing and I had exactly what I wanted to do.

Yeah. Can I just ask a quick question because this Yeah. This leads me to a, an interesting idea and that is like a marketplace of. Forms, precon, pre styled forms, like, you know, I mean, I know that mostly forms are gonna look on, on brand or what have you, but do you have, um, do you have like a repository of things that have been styled by all the people?

I dunno if that's a plan or

[00:39:35] Mark Westguard: Not yet, but it is been mentioned a few times. Yeah. And I think that's, that's where the, uh, the style templates come in. So what we, what we've done exactly. Is we've made this a little bit like the, um, you know, the ad form page that we have. So we've got lots and lots of different templates in here.

[00:39:53] Nathan Wrigley: Exactly that. Yeah. This

[00:39:55] Mark Westguard: uses the same system. Yeah, it looks

[00:39:57] Nathan Wrigley: the same, doesn't it? A little card. Yeah. Yeah,

[00:39:59] Mark Westguard: yeah, yeah. So you can add, we can add additional things. So, so I'm thinking, you know, eventually maybe will have, uh, different site builders will have. Different frameworks will have, you know, I dunno. Fun.

Yeah. Terrible looking ugly. So ugly. Yeah. So you could, you could basically add as many different templates here as as we want. Um, this is actually also hook as well, so you can actually, because it strikes

[00:40:22] Nathan Wrigley: me that. For the, the audience that's gonna watch this episode, like the whole variables thing is totally on message.

You know, they'll get that, yeah. They'll understand what the variables are. But you imagine the, the people who've just used WordPress as a publishing platform and they just don't care. Yeah. Having the capacity to just sort of click on a button to actually, that approximates what I want. Yeah. I'm happy.

Yeah, that's great. I'm just gonna go with that. Yeah. That would be. That would be superb. Yeah. I feel that's a real, a real differentiator if you can. Yeah. And at

[00:40:49] Mark Westguard: the moment these are showing, you know, all the different shades and colors and stuff, but it could easily be a little preview of, of what that looks like.

So yeah, we could do that. And then the, the other thing I wanted to show quickly was, um, if you're actually in a form, um, you'll notice now you've got a style button here, so that would bring, bring up the Styler for that particular form. So if I click on style. I can now style that particular form that's used in this particular style.

So it shows your form as opposed to our default preview. Um, so you can actually see what your form looks like.

[00:41:21] Nathan Wrigley: I did not see that. So I ended up clicking around quite a lot of things that I didn't need to because I could have, and then does it just bind, so the, the accordion on the left there, is it only showing the things that I need available based upon the form that I'm looking at, or is everything still up for grabs?

Oh,

[00:41:37] Mark Westguard: everything's up for grabs, yeah. Okay, great. Yeah, so, um, if you, if I create a form very quickly, uh, let's just choose. Let's do a demo form for fun. Let's just do Cascade Fields. So you can either do it from that formless page or up here. Now you've got a style button so that, yeah. Yep. So if I click on that, it's gonna open up that form and then I can then use these again to, to edit that and change that to anything that I want.

Um, now, you know, that's, this obviously is gonna apply to any form using that style, but it just enables you to look at your form Yeah. And, and change anything that, that you want. Yeah. Yeah.

[00:42:14] Nathan Wrigley: Caveat mTOR. If it's bound to another form, you're gonna. Be swapping that one at the same time. You'd have to create a one absolute, but it's quite nice 'cause you know,

[00:42:20] Mark Westguard: at least you, you need to see what, what your form's gonna look like.

So yeah.

[00:42:24] Nathan Wrigley: So that's that four months you say? I can well imagine it was not four Plains daily months. I bet it was four months of late nights and lots of, uh, pulling out of hair and things. So, ah, it's brilliant, mark.

[00:42:35] Mark Westguard: Yeah. So that's, I'm really pleased with it. And, and you know, we are getting feedback from users as well.

Um, and you know, we, as everyone knows, WS four is, is driven by its customers. So if there's a particular starting element that you think that we should add that would be helpful for other people, let us know. Um, there are some things that are very, very, very particular, you know. Usually a just better handle with some custom CSS.

It's not something we'd necessarily want to add a feature for. Um, you know, if somebody wants to rotate the help text by 10 degrees, we're probably not gonna add a style of second for that. Um, but yeah, most, most of the basic stuff is in there that, that you need. So, so there you go. That's, uh, I love that.

[00:43:16] Nathan Wrigley: I wanna rotate all help texts. By 10 degrees, the entire form, by 30 degrees. Yeah. Put it all on a fun angle. Um, okay. In which case I will say that is the demo over. Um, yeah. Yeah. Just very quickly, where do we, if we do wanna ask, you know, ask you a question, where do you, where do you hang out? I mean, I know there's the website WS Form.com, but is that the best place?

[00:43:37] Mark Westguard: Yeah. Um, so we've got the Facebook group, which is really quite popular. We have a lot of users in there that are very helpful. So you can go to, um, facebook.com, do just do a search for WS Form. You'll find the group in there. Um, and then if you do have support questions about it, just go to WS Form.com, click support at the top, and then you can answer question there.

Okay. Um, so yeah, pretty, pretty straightforward. And then again, in the knowledge base, there's um, all the, the different. Articles in there that talk about it. And, uh, you've got the CSS variable reference in there too, so.

[00:44:09] Nathan Wrigley: Perfect. Well, yes, that was brilliant. We've managed to tell you how to, uh, style your WS Forms to within an inch of their lives.

Of their lives. Yes. In, uh, in 40, in less than 45 minutes, which I think right. Is pretty good going. Mark Westguard. Thank you so much. I appreciate that. That was brilliant. Thank you for

[00:44:25] Mark Westguard: having me on again. I appreciate it. And, um, hopefully this, so this'll be. What would this be? The sixth

[00:44:30] Nathan Wrigley: or sixth one? Yeah, we've got a whole series.

I should, I'll probably mention that in some sort of preamble. Who knows? Yeah. But if you've, um, if you wanna know how to use, um, WS Form Soup to Knots, yeah. Then head to wp builds.com and use the search and just search for Mark or WS Form and all the videos will pop up. No doubt. So, yeah. Awesome. Okay.

Thanks so much, mark. Yeah, thanks so much. Appreciate it.