Post Status Happiness Hour Session Seventeen

Transcript ↓

In this episode of the Post Status Happiness Hour, host Michelle Frechette interviews Mark Westguard from WS Form. Mark discusses the new styling system and enhanced accessibility features, emphasizing user customization and flexibility. The episode also highlights upcoming events, community engagement, and the importance of user feedback.

Top Takeaways:

• WS Form Updates and Community Engagement: Mark Westguard highlighted the updates and improvements made to WSForm, a WordPress form builder. He expressed enthusiasm for users testing these updates and providing feedback.
• Community Emphasis on Constructive Feedback: Both Mark and Michelle emphasized that feedback is welcome, but it should be communicated respectfully, avoiding negativity.
• Mark’s Hard Work on WSForm: Mark noted that creating the latest updates for WS Form involved four months of work. He’s eager for users to explore the new features and looks forward to receiving feedback. His dedication to continually improving the product was a key point of the discussion.
• Focus on Accessibility and Learning: Throughout the conversation, there was an emphasis on making tools like WS Form accessible and easy to use for everyone..

Mentioned In The Show:

• WS Forms
• Admin Bar
• WPML
• Kevin Geary
• Mark Szymanski 
• WP builds
• Bob WP
• Do the Woo
• PressConf
• WordCamp Europe
• Ian Stewart
• WP studio

🐦 You can follow Post Status and our guests on Twitter:

• Mark Westguard (Founder, WS Form)
• Michelle Frechette (Director of Community Relations, Post Status)
• Olivia Bisset (Intern, Post Status)

The Post Status podcast is geared toward WordPress professionals, with interviews, news, and deep analysis. 📝

Browse our archives, and don’t forget to subscribe via iTunes, Google Podcasts, YouTube, Stitcher, Simplecast, or RSS. 🎧

Transcript

Michelle Frechette 00:00:02  And we’re live. We’re back after the holidays. Back with the Post Status Happiness Hour. And today I always say it. I’m joined by my friend because everybody, we’re friends is my friend. But none is truer than Mark Westguard, who calls me his bestie and vice versa. And this is your second time today. At least. I don’t know if there’s been other times, but I. I heard you and actually voiced a question earlier when you were on an I guess they’re called X chats now as opposed to.

Mark Westguard 00:00:33  Yeah, what they called it? Is it X chat or something like that. Yeah.

Michelle Frechette 00:00:36  An X chat makes it sound like you’re talking about your former boyfriends and girlfriends or like.

Michelle Frechette 00:00:43  The man I used to be married to, but no, X formerly known as Twitter. talking about all the new and exciting things that you have coming up, or have recently released with WS Forms. So welcome to the show, Mark.

Mark Westguard 00:00:57  Thank you for having me. It’s been a while, hasn’t it, since we’ve done something on Post Status, so it’s good to be back.

Michelle Frechette 00:01:03  Yeah, you are my first repeat guest on the Happiness Hour. So welcome back.

Mark Westguard 00:01:08  We’ll create more happiness.

Michelle Frechette 00:01:10  We will. That’s my goal. That’s always. My goal is to create more happiness. Just make sure I’m okay. Making sure I was muting other things.So I’m excited about the new things that you’ve added. I can’t begin to describe them. So I’m just going to, like, take a step back and let you tell me and everybody else what’s what you’ve done with WS Form and how many thousands upon tens of thousands of lines of code you’ve put in the last four months or whatever?

Mark Westguard 00:01:38 I know. Yeah. And we’ve. So there’s a couple of big things that we’ve just launched. We’ve done. So version 110 is the new version and the two big buckets are we have a new styler, so it’s easier to style things on your form. And we’ve also done a lot of accessibility stuff, which we’re always working on and always improving. so we’ve squeezed in a few of those features as well.

Mark Westguard 00:02:05  And, there’s a bunch of other stuff. There’s a change log that I can’t even remember. Lots of things, because we we basically put a pause on updates for about four months because this was such a big change. We wanted to make sure we got it right when we put it live. so there’s also lots of other little things that people had asked for that have been included. So it’s quite, quite a big update. We launched it about a week ago. It’s been going well. The usual teething problems, you know, a few little hiccups here and there with bug fixes, but that’s to be expected when you’ve squeezed in about, I don’t know, 40,000 lines of code or something that we did we did for this one. But yeah, I can show you, on the screen share and we can look.

Mark Westguard 00:02:48  That’s it. Yeah. Yeah. Yeah. So the way it used to work is we used to have a customized button in the menu, which would go to the WordPress customize system that’s, you know, you use that currently to change the site name and things like that.

Mark Westguard 00:03:04  But you can register additional stuff for your plugin. And we found that to be a little bit limited in what we could do, because we were restricted by what that customized tool can offer. So you could change colors and fonts and, you know, border sizes and stuff like that. But we wanted to do a little bit more. So we built a whole new styling system. And the way it works is, let’s say you’ve got, I don’t know, 4 or 5 different forms on your website. So before those would all inherit the same color scheme and fonts and everything else from the customize tool. But now you can create multiple styles and apply those to any number of different forms. So you might want to have a style for the footer of your website, maybe your style for the header, maybe your style for the body of the website. And you can apply these different styles to different forms. So when you install WS Form now you basically get two styles built in. One is the default, and that’s just like a standard light style.

Mark Westguard 00:04:06  And there’s also one for conversational forms as well. But I won’t bother going into that one today. We’ll just have a look at this standard light one. So one of the differences now is that we can handle things like a light/dark theme. So some people may have a preference for a, for a dark theme for accessibility reasons. And you can now create a light/dark theme. so you can have a light version of the form and a dark version of the form. You could also use that just for having like an alternate view for that form. So maybe you want to do an alternate style that has a larger font for accessibility. So you can do that now. So basically if you want to add a style, you just click on Add New and there are different templates that you can choose from. So you see we’ve got a light template and a dark template. So if your site is dark, say for example, like the Admin Bar website. Then you could start with a dark theme and that would just flip everything.

Mark Westguard 00:05:03  So your background colours are dark and all your font colors are light. But let’s have a quick look at that standard light theme first so you can see how this works. So we have to do is just click on the name of the style, and then it’ll bring up a page. And on the left hand side you’ve got all the different styling settings. And on the right hand side you’ve got a kind of. It’s just like a dummy form that shows you all the different elements that you may want to style. So you’ve got stuff like text fields, text area fields, choice fields such as select radios, checkboxes, some of the more advanced fields like file uploads, signature fields, progress bars and things like that. Content, so text and messages and also buttons as well. So this form is basically built intoWS Form. You don’t have to build it. And it’s just it shows when you edit the style. So it’s easy to navigate around and see what you’re changing. So on the left hand side you’ve got these different categories.

Mark Westguard 00:06:05  You’ve got like form, tabs, section, field, field types, and conversational. And form is basically where you want to start. So if you click on form and then go to Color Palette, these are all the colors that are used on your form here. So if we want to change the base color, the base color is used for most things like the label colors, the the border colors and things like that. All you got to do is just click on the little color swatch here, and then you can change that in real time, and it’ll show you the updates in real time. On the right hand side. And if your theme that you’re using, let’s say you’re using a full site editing theme or anything like that, it’ll actually pull in the color palette from that theme at the bottom here. So you can just instantly click on those colors so you don’t have to go and copy and paste them from your theme. So it’s super easy to choose different colors here. It also supports opacity as well. So.

Mark Westguard 00:06:57  Or transparency. so you can adjust that for any of the colors in the styler now. So these are your, your main colors. You’ve got your background color, your base color. Base contrast is basically like an opposite of the base. So you maybe use that on a button. You’ll see that here where you’ve got a dark background. That white color there is your base contrast color. Your accent color is used for things like progress bars. That’s the accent color there. And then you’ve got other colors like primary, secondary success information. And those are used for things like messages. So you’ll see if I change this success color here, it’ll actually automatically update that message color scheme there. So that kind of gets you started with colors. And then you’ve got things like typography. So you can actually change the font size all the way through very easily. You’ve got font size small that’s used for things like help text, you know, but below text below sorry, below the fields. Font size large allows you to use for things like, section legend.

Mark Westguard 00:08:06  Yeah, labels and stuff like that. so everything in the form section here basically bleeds through to the other styling options that you’ve got here, like field types and fields. So the idea is really you can change these top level styles here and that will bleed through to most of the form. So it’s quite easy to style your form. But if you want to get a bit more granular then you can actually click into an actual field type. And we could do maybe button. So let’s go to buttons here. And then I could say background color of the primary button here. And you’ll see what it’s done is it’s put in a variable. And that variable references the primary color we were editing earlier. So that will inherit that color automatically. But if you want to override that and change it. Again you can just click here and change that color to whatever you want. And you’ll see the button changing on the right hand side there.

Michelle Frechette 00:08:59  Oh yeah.

Mark Westguard 00:09:02  So it supports variables all the way through.

Mark Westguard 00:09:05  So if you’ve got a theme or a framework that you’re using that has variables in it, you can pull those variables into here. So for example if you had I don’t know var dash dash it might be called base color something like that. You can just literally type that in here. And it will then inherit that all the way through to to your actual forms. And you can reset those. Just hit the reset button here and it will put it back to the original color as well. So you can you know, you don’t have to. That’s like your panic button. So you’ve changed it.

Michelle Frechette 00:09:34  What did I do!

Mark Westguard 00:09:35  Yeah, haha. 

Mark Westguard 00:09:43  And you can search for things as well. So up here if I type in checkbox, it’ll bring me back anything that’s related to a checkbox. And you’ll see if I, if I change one of these, if you see when I click on, that actually takes you to that tab so you can see it and then I can change that to checkbox check color.

Mark Westguard 00:10:01  So if I check these you’ll see that’s that color there.

Michelle Frechette 00:10:06  Yeah. As opposed to just a black check mark and a white box kind of thing. Yeah.

Mark Westguard 00:10:10  Yeah. Yes. You can do that as well. Also things like, let’s see, where is it? So here’s your date, time. So if we type in, let’s do like calendar then you can see here all the different options for, for the calendar. And you get quite into this. So you can like change the padding vertical padding. And pretty much everything you want to with that. So behind the scenes there are the everything you’re changing here is you’re actually changing a CSS variable. So with your own custom CSS you can actually modify those variables yourself if you want to. So it makes it a lot easier to modify the styling using your own CSS. Now, you don’t have to kind of try and target things. But on on our website I’ll show you this here. So if you go on to our website and you go to knowledge base, and then you go to styling forms and then you go to CSS variables reference.

Mark Westguard 00:11:09  So if you’re into, you know, getting into the nitty gritty and changing this type of stuff, we’ve actually got a full library here that tells you all the different variables that can be changed.

Michelle Frechette 00:11:19  Oh cool. So you don’t have to go looking for them. 

Mark Westguard 00:11:21  Yeah. Yeah. And you can, you can click to copy those as well. And also the default values for those as well. So everything is, you know, fully documented. You can go into here and see all the different CSS variables that are available. So it’s basically been fully modernized. So let’s if I come back out of here and let’s go to the settings icon at the top of this styler, you can see, you can check a thing called Enable alternative color scheme. So if I check on that and then close this. Now I’ve got options at the top that enable me to see the base colors. The alternate alternative colors will see both at once. So if we go back into form we go to Color palette. So this is basically like the light theme.

Mark Westguard 00:12:07  And then if I click on alt that’ll show us the alt theme for that form.

Michelle Frechette 3 00:12:11  Okay.

Mark Westguard 00:12:12  So you’ll notice now it’s got a black background and lighter color on there. And if I hit both I can actually see the alt color on the left hand side. Sorry, the base color on the left hand side and the alt color on the right hand side. So if we go to, let’s just say we change this color here, this like a warning color. Also we call it danger in the, the styling.

Michelle Frechette 00:12:37  Yeah.

Mark Westguard 00:12:38  Yeah. So what you can do is you can actually change that color. Now, it won’t change on the right because I’m in the mode. But let’s just change that to say like a dark purple and then you’ll see this little magic wand icon here. And if I click on that, it will automatically choose an appropriate color for the light theme. So that’s that’s quite handy. And and you’ll see if I now flip between the two, we’ve got dark purple on the light and we’ve got the light purple on the atl.

Mark Westguard 00:13:06  So it makes it super easy for choosing colors. Basically you don’t have to. You can just choose like your light version of the color. And then just click on the magic icon and it’ll automatically choose that color for the atl theme.

Michelle Frechette 00:13:20  You have a fan in the chat. 

Mark Westguard 00:13:23  Oh, okay.

Michelle Frechette 00:13:24   So Andrea says.

Mark Westguard 00:13:27  Hi, Andrea. I know Andrea, he’s a good, good lad.

Michelle Frechette  00:13:32  Nice.

Mark Westguard 00:13:34  Yeah. So that’s the, you can also click on the copy here, and that will also copy that, CSS variable. So if I paste it there you can see it. If I, if I paste in a CSS variable it will bring that setting up here as well. So if we go to like the variable library here, let’s choose one of these like LI gap. And then we’ll go back here. And if we type that in there it will then bring up that setting for you. So yeah. And that’s actually the, the tab. At the top there. You see that? Yeah.

Mark Westguard 00:14:09  So if we go back to base and then we’ll close this down. So yeah, if you, if you want to modify those tabs, all you got to do is go into the tab setting there. You can choose the background color to whatever you want. So if you wanted to have a color for those tabs, you can choose that now.

Michelle Frechette 00:14:24  Gotcha.

Mark Westguard 00:14:25  you can change the active color. So, you know, maybe you want to do that in you can get really, really garish with the coloring.

Michelle Frechette 00:14:34  Right. I want red with black. 

Mark Westguard 00:14:36  I didn’t say I was good at color schemes.

Michelle Frechette 00:14:40  But you didn’t impose it. And you said, I’m going to let you all choose what you want.

Mark Westguard 00:14:45  Yeah. you can choose the border styles. You can change the radius on those. 

Michelle Frechette: Oh, yeah.

Mark Westguard: You can change the width, you know. So you can do.

Mark Westguard 00:14:54  Pretty much anything you want with that. Also things like, border styles, you can actually modify those if you click on that when it’s empty.

Mark Westguard 00:15:00  We have that preloaded. So you can actually choose, you know, different border styles and stuff. And if you know, if you find that oh no, this is not going well as it’s not right now, then you can always click on undo.

Michelle Frechette 00:15:13  Like, what did I do. Yes. The save me from myself button.

Mark Westguard 00:15:18  Yeah. You can always hit the panic button and go go back to where you were. Even stuff like the prefixes and suffixes on fields. So some people use that for like showing a unit of measurement or even a little bit of help text or whatever. So that can all be changed now as well. So you can change the prefixed colors. You can even actually change the typography on those. So if you want to change the, the font that’s used you can actually modify that as well. You can change the font size. Now you’ll see again, this is inheriting the font size from the form level just to make sure everything is uniform. But if I delete that, you’ll see.

Mark Westguard 00:15:55  It now brings me back to like a range slider and I can type in anything I want to change the size of that prefix and suffix, so that can all be changed as well. The other cool thing is if you change, let’s say this is like 16 px, which is the normal size you want. That’s the minimum size you typically want. So you don’t get accessibility issues. but if I change that to REM, you can actually change the unit of measurement as well. So you can do REM, you can EM, you can do percentage and change that to pretty much anything that you want. But yeah, the range slide is nice because you can like play around with it quickly.

Michelle Frechette00:16:30  Yeah. Yeah, that’s nice.

Mark Westguard 00:16:31  And change that. Yeah.

Mark Westguard 00:16:33  So to that’s. Yeah. That’s basically it. And then once you’ve, once you’ve finished with the style, you just hit save and that will then save that style down. And then we can go into a form. So let’s create a form. Oh there’s a contact us form there, so we’ll go into that one.

Mark Westguard 00:16:49  Now by default you’ve got let’s go back into styles. You’ll see that that style there is marked as default. So that means that styles is going to apply to every form that we create. so if I click edit and we go into settings on that form and then go to styling, you can actually change that here. So if you want, if you had another style you could choose a specific style for this form if you wanted. But by default all the forms just to hear it. That standard style. Yeah. So we could go styles. We could click on add.

Michelle Frechette 00:17:20  So like for example, if you, if you were doing your branding colors instead you could.

Mark Westguard 00:17:25  Yeah. Yeah so you could, you could add another one here. We can edit that. We could. Yeah. Change the name of it to like branding hit close. And then just for argument’s sake, I know maybe the background color you wanted it to be a slight shade of gray or whatever. You can also do stuff like change the border on that.

Mark Westguard 00:17:44  So you might want to do, you know, increase the border on that.

Michelle Frechette 00:17:50  It turns it back and forth. You want to give a little bit of space between the text and the edge for sure.

Mark Westguard 00:17:54  Yeah. You could do that with border or you could do that with actually do that with spacing. So you can actually change the padding here. Yeah it’s probably a better way of doing it and then save that. So that’s your branding style. So now if we refresh our our list here. So you may want to use that on all the forms. Right. so you could actually just click on set as default here. And that will then use that particular style for all of your, all of your forms. So if we then preview this, you’ll see that we’ve now got that gray background. but if I wanted to override that, let’s just refresh this. So we’ve got the latest style list in there. Then I could say, look, I don’t want to use that.

Mark Westguard 00:18:34  I want to use this standard light one for this particular form. Then I can go in there, preview it, and then it gets rid of it. So really easy to flip between styles now. The other cool thing is from the styles page, you could also export styles as well, so I can export that as a JSON file. And then I can actually drag that to another website, pull it in, and then I can then use that style on another site. So these styles are now portable. You can move them around. You’ll see on the right here. It gives you a preview as well. so when we were mucking around with this standard one, we added an atl color scheme. So you can see the alternate colors on the right hand side there. So, excuse me. So as you hover over these, it’ll actually show you, like, base contrast. I don’t know if you can see that in the screen share. but it just shows you what each of those, those colors are.

Mark Westguard 00:19:28  So, yeah, you can do import export on those. So that’s super, super simple really. I mean, it’s crazy. It’s like, you know, four months worth of work, but it’s actually nice and easy to use on the, in the user interface. So you don’t have to, you know, muck around with too many complicated things to to get the styling that you want.

Michelle Frechette  00:19:49  I love that. I was actually written down can you export styles? And you already answered that question. And I think that’s really cool. Especially like if you’ve got subdomains or, you know, let’s say you’ve got multi four or multi sites for different languages, everything can be easily exported and not have to go in and do settings for each site.

Mark Westguard 00:20:08  Yeah, yeah. So you can.

Michelle Frechette 00:20:10  I love all of your settings. Can I have them? You could say.

Mark Westguard 00:20:15  Yeah you can export forms. You can export styles now. So that’s the style system is kind of loosely based on the form stuff. So with forms we have a system where you have to hit publish to actually publish the changes.

Mark Westguard 00:20:28  And on the styles, We decided not to do that. We just made it. So when you hit save, they’re immediately published. But we actually behind the scenes, we have the ability in future if people want to have that publishing capability, that we could reintroduce that. But for now you just hit save and it works, and gets you everything that you want. Some of the other stuff that you can do with it. So if we go to edit here, Let’s see. Oh, actually, I don’t have it on this version, but like inside labels and stuff, you can control those. Actually the latest version 110 eight, which is coming out later today. You can actually control inside labels and how they kind of jump out of the form, the form fields.

Michelle Frechette 00:21:08  Yeah.

Mark Westguard 00:21:09  So, there’s there’s more and more stuff coming online as, as we add it, There’s about 400 different settings that you can change with this. And we handle all of the kind of shades and stuff behind the scenes as well for the colors.

Mark Westguard 00:21:26  But yeah.

Michelle Frechette 00:21:27  And it I don’t want to change anything, I still get the defaults, but I’ve always had.

Mark Westguard 00:21:30  Yeah, exactly.

Mark Westguard 00:21:31  Yeah. So if you upgrade from version one nine or before, it will import all of your previous settings and apply them to this stylus so you won’t lose any styles. Basically what it just gives you is the ability to, to, you know, go in a bit deeper and and change this stuff if you want to.

Michelle Frechette 00:21:46  So what are style images?

Mark Westguard  00:21:49 Say again?

Michelle Frechette 00:21:50  The style images I know that it’s some of your photography and mine on those style images.But what do they do. 

Mark Westguard  00:21:54 Oh yeah. Yeah, yeah. So with the checkboxes and the radios, we actually have the ability to style those checkboxes and radios in different ways. So this is your normal checkbox. And you can, you can change the orientation of those. So you can have them vertical. You can have more horizontal. we even have a grid method where you can let me show you it quickly. So let’s just say, let’s say we add a checkbox to the form and then we’ll edit that checkbox.

Mark Westguard 00:22:24  On orientation here you can choose grid. And you can actually then choose how many columns you have for different breakpoints. So from mobile you may want to have them vertical. And on a desktop you might want to have them, you know, left to right maybe for columns however you want to do it for each breakpoint. So you can get really granular. Just just with that one setting. But, let’s go back to here so you can also change the style of those checkboxes. So let’s see, go to advanced on the checkbox. There’s a style dropdown here. Can you see that? Okay. So you’ve got like normal. You can choose buttons switches, images, or swatches as well. So if we go back to styles you’ll see that, this is a button, a checkbox styled as a button. So you can actually switch them on and off like a button. Or you can do them as switches on and off, or you can do swatches, or you can choose different colors for each of those, or you can do images.

Mark Westguard 00:23:22  So we’ve got umbrellas. I think that’s your picture, isn’t it?

Michelle Frechette 00:23:26  It is.

Mark Westguard 00:23:28  the moon, the sunflower is yours as well.

Michelle Frechette 00:23:30  It is.

Mark Westguard 00:23:31  and that ceiling pictures from State of the World in Madrid, I think. So, yes. You can do images as well. So maybe if you’ve got some images you want to style as a checkbox, you can do that and then the same on radio. So you’ll see here when I click these it actually alternates because it’s a radio functionality. So you can only choose one at a time. Same with switches and same with these swatches as well with the images. And again you can modify the style of these. So if we go let’s see radio switch, then you can actually change the colors of these switches too.

Michelle Frechette:  Oh cool. 

Mark Westguard: Yeah. So everything can be changed on those. Yeah. You can change background colors and all kinds of stuff. So this is I think this is the background color of this. Yeah. So you’ll see how that changes from.

Michelle Frechette 00:24:25  Yeah.

Mark Westguard 00:24:26  Blue to red. You can also change all the animation as well. So if we go to transition you can actually enable transitions on and off. So you’ll see that’s now doing it immediately. But I can enable transition on that and say do two seconds, 2000 milliseconds. Now when I click on that.

Michelle Frechette 00:24:46  Oh, look at that.

Mark Westguard 00:24:47  It goes takes two seconds to change. Not how you want it, but but you can tweak that.

Michelle Frechette 00:24:54  Sure. Yeah.

Mark Westguard 00:24:55  Yeah. Yeah. So that’s that’s quite a nice little feature as well. So yeah, there’s a lot in here as you, as you dig into it. Sorry?

Michelle Frechette 00:25:04  Could you put like 20 minutes and have people wonder what the heck is going on.

Mark Westguard 00:25:07  Haha. Yeah. Yeah.

Mark Westguard 00:25:08  Why is the pattern not working. So yeah, you can really annoy people with it too.

Michelle Frechette 00:25:16 Yeah.  Have black on black and have them wonder what is this field for?

Mark Westguard 00:25:20  Yeah.

Michelle Frechette 00:25:21  That’s really bad accessibility for anybody actually.

Mark Westguard 00:25:23  Yeah, yeah. Don’t do that. That’s bad advice. Haha.

Michelle Frechette 00:25:28  Yeah.

Mark Westguard 00:25:28  So you can change, you know, background colors on the range sliders. Pretty much anything could be changed in here. You can change the thumb color on the range slider to whatever you want. I’ve also done things like on the select dropdowns, this little arrow here that you have on a dropdown, normally that’s quite difficult to style, but if we go say select arrow, you can even change that arrow.

Michelle Frechette 00:25:52  Oh cool!

Mark Westguard 00:25:53  Modify how big that is. You can modify the color of it to whatever you want. And that’s all done with pure CSS. So, there’s a few few little things that we’ve changed in the way that the user interface works. We’ve we’ve tried to make everything CSS, 100% CSS. So even, things such as the date picker here, these icons here are all CSS. There’s not no SVG’s or images or anything like that. So those can all be changed if we go like calendar here. let’s see typography somewhere in here. Oh, there there’s your icon.

Mark Westguard 00:26:33  So you can actually change those color icons.

Michelle Frechette 00:26:36  Oh nice.

Mark Westguard 00:26:36  At the top. Yeah. So even that can be changed too. Yeah. You can modify the gap and everything. Everything you want to change on there. So, yeah, it’s, Yeah. We try to keep it simple by just, you know, if you just go to form and hit color palette, then off you go, you can change the colors. But if you want to get more granular into it, you can work your way through this and find all kinds of different settings that you can play around with. And then if you want to modify it with your own CSS, you can still do that. So any any custom CSS you had before should still work fine. The underlying HTML for the form is the same as it was before.

Michelle Frechette 00:27:14  Yeah. Look, you have another comment.

Mark Westguard 00:27:17  What does it say?

Michelle Frechette 00:27:18  Thanks for making the arrow a separate span!

Mark Westguard 00:27:19  Oh, yeah. Ha ha. He knows what we’re talking about.

Michelle Frechette 00:27:24  So, o I don’t think anybody’s asked you yet.  At least that I have not heard them ask you yet. Is how, first of all, how long did it take you from the when you said, okay, I’m starting to do this today. Till today. Once. How many months have you been working on this?

Mark Westguard 00:27:38  It was about four months.

Michelle Frechette 00:27:42  How far into that four months did you think I don’t want to do this anymore? Haha

Mark Westguard  00:27:46  About a week. Haha. 

Mark Westguard 00:27:50  Excuse me. Yeah. It was, you know, it it reminded me. We did the CSS stuff on this years ago. And to then have to redo the whole thing. You realize how much code there is. We’ve made some improvements as well. So before the styling, was basically a big fat CSS file that had kind of every, if every possibility that somebody may use on their form, all the different field types. So now it will only load CSS that is applicable to the field types that are on the forms on the page. So if you don’t have select dropdowns or you don’t have a range slider, it won’t load the CSS for those.

Mark Westguard 00:28:33  it also won’t load the JavaScript for those as well. So we’ve had that for quite a while. The dynamic, dynamic in Q in and that just cuts down redundancy on the the code that you have on your site to make it load quicker. And then it also still works with. So Andrea, that was just putting the comments up. He works for ACSS and ACSS is an awesome framework for working with your website. It’s always been compatible with WS Forms and it continues to work with WS Form, but they’re actually refactoring all their form code right now. and I think realizing how much work’s involved on that as well. but they’re going to be using our CSS variables to change the colors of the form based upon what you choose in ACSS for your website. So if you choose in ACSS  to have a font size of, say, 18, whatever you want it to be, then that will be reflected automatically on the form. So theirs is going to actually start using our CSS variables. and then the ultimate aim with this is, you know, when I clicked on styles and then I clicked on Add New.

Mark Westguard 00:29:37  And then we’ve got the templates that come up here. The idea is going to be that we’ll have other categories here eventually for things maybe like core framework. So another framework that has CSS variables. So what we’ll do is put their CSS variables into our styling. And it will then inherit all the colors you’ve chosen for your website automatically on the form. And then just bleed that through automatically. So ultimately this is going to really speed up workflow for people. And if anybody comes up with a great style and we like it, then we can always, you know, add it here. We could do some fun styling and all kinds of kinds of stuff with this. And these are basically, you know, once you’ve done a style, and you just click on export, then I can actually pull that in here as a different style option that can be used for other people. So yeah.

Mark Westguard 00:30:26  So a bit more work still to do. We’ve got all the all the styling functionalities done, the templates. It’s the fun part now because we can go through, you know, play around with this, get different styles done and then, have those available as different styles, different people, depending on what page builder they’re using or what framework they’re using.

Mark Westguard 00:30:44  So yeah, looking forward.

Michelle Frechette 00:30:47  Have you thought about making, like a subdomain or something where people can share their styles? Like a library that people could be like here’s a screenshot of my form and here’s the JSON or whatever file that you can then import to make yours look just like this.

Mark Westguard 00:31:02  Yeah they make them downloadable. That would  be cool. Yeah.

Michelle Frechette: Wouldn’t that be cool?

Mark Westguard 00:31:05  Yeah I think so. And then so we have that on the current site. We have that for the template library. So you can actually see the different templates here. And you can click on them to to try them. So we could do something like that with the with the styling. And then show.

Michelle Frechette 00:31:20  Facebook group. Because you have over 1000 people in your Facebook group, encourage people to share screenshots of how they’ve used it. And then if people want to make that, they can make that available to download.

Mark Westguard 00:31:29  Yeah, exactly. Yeah. And they could be I mean, it could be just simple stuff, you know, like adding a, nice border around a form or something, you know, because even just simple stuff like this, maybe adding a background color and then maybe they go into border and then they had some radius to it and then, you know, just stuff like that, and then adjusting all the colors so that they’re accessible and things.

Mark Westguard 00:31:52  And then making those available to other people would really speed it up. So all they’ve got to do is just drag it in and, and import it, and they don’t have to worry about doing all that work.

Michelle Frechette 00:32:01 Yeah.  I think I think I’m going to style a \ form, and then I’m going to go on Reddit and say, I just styled my WS Form. Ask me anything.

Mark Westguard00:32:08 Ha ha. Yeah. Yeah. Now you don’t have the idea with this is you don’t have to worry about knowing CSS. Really. I mean, with this you could just tweak it and play around with it.

Michelle Frechette 00:32:20  My other question is, did you do all of this work just so that I would stop texting you and saying, how do I change the color on this particular form?

Mark Westguard 00:32:28  Yeah that’s the only reason I did it..

Michelle Frechette 00:32:33  Stop bothering me at 11:00 at night.

Speaker 3 00:32:37  Yeah.

Mark Westguard 00:32:37  Why can’t I change this to red?

Michelle Frechette 00:32:38  Because you are my bestie I’m going to ask you, instead of going and looking up the information for myself.

Mark Westguard 00:32:44  Yeah, yeah, it’s, you know, there still are instances where you may have installed a theme and maybe the colors aren’t changing and stuff, and that’s usually just because they’ve got CSS that is so specific that it’s it’s very, very difficult for us to override that because they’re just a higher priority than we are. But the vast majority is if they do it properly and they’re, you know, they’re not overriding stuff with like important stuff like that in CSS, then it should work fine. but yeah, it’s a bit of education as well. You know, we’ve got some stuff on the website that explains to people how to do their own custom CSS if they want to. Obviously this start even with 400 options, doesn’t cover, you know, 10% of what CSS is capable of. 

Michelle Frechette: That’s amazing.

Mark Westguard: So you can’t make this spin around and do funny animations from within the settings. If you really want to do that, then it is possible with custom CSS. Yeah. 

Michelle Frechette 00:33:40  And hire somebody else to do that for you. Because that’s not what you are.

Mark Westguard 00:33:44  Yeah, yeah. Hand the website to somebody else. If they start asking for that, it’s almost as bad as a blink tag.

Michelle Frechette 00:33:51  So now that you spent four months working on this, are you going to reach for the computer and strangle me if I ask you what’s next for WS Form?

Mark Westguard 00:34:00  Oh. It’s never ending. So, yeah, we’ve got some new translation stuff coming up. So, and that’s that’s been a challenge, actually. And I’ll tell you for why is if you edit a checkbox, select field or radio in WS Form, we have this thing called a data grid. And that and it’s almost like a spreadsheet. Right. So you can add multiple columns to it. You can add as many rows to it if you want. You can pull data in from third parties. And translating this in software like WPML is a bit of a challenge because it’s it’s not. It’s not one dimensional data. So changing things or translating things like a label or a default value or a help text is quite easy with WPML, but stuff like this is a little bit more difficult because they don’t have a data type that can let me show a grid.

Mark Westguard 00:34:51  And anyway, so we’re just working that out right now. and that’s probably going to be the next big thing that we push is, is more translation stuff. We do translate WS Form into different languages, but this is more kind of translation of a particular form. Most form plugins, you copy the form and then you translate it. But this is going to enable you to actually have one form and then translate into different languages. So if you move the fields around or make changes to the form, then you won’t have to re-export the form and change everything, each time you do that. So yeah, that’s coming. We’ve got some new integrations coming and we have a new payment integration coming, which I can’t talk about yet but should be launched in the next few weeks, I think. Which is quite cool with, somebody within the WordPress community. So you’ll see that coming up soon. And even today, I’ve had requests to integrate in with other new CRM platforms and stuff. So I’ll be continuing to add.

Mark Westguard 00:35:52  We’ve got about 95 integrations now. So, you know, we’ve been maintaining those as well. So we haven’t been doing just the style over the last four months. It’s also been keeping all these integrations up to date, updating all that kind of stuff, bug fixing here and there. And, you know, integrations have a great habit of just changing things overnight. And then we have to modify that and keep it keep it working. So yeah, a lot, lot going on behind the scenes. But yeah, I think mainly translations, integration stuff, stuff in Italian.

Michelle Frechette 00:36:27 WSF in Italian. The hand signal I like that too.

Mark Westguard 00:36:30 Haha. Yeah, it’s just it’s just never ending, really. And then just, Yeah, we, we basically listen to the customers and see what they want. That’s why we have a feature request page. We look at the kind of how many likes or, like votes. They get and then whichever ones get the highest one, we tend to look at those, and then.

Mark Westguard 00:36:54  Yeah. And then I’m sure there’ll be, you know, modifying the style or just adding new styles to it and stuff like that and building up on that whole new platform. So, we’ll start making some more noise about that soon. It’s been you today. We did a thing with Kevin and Mark Szymanski earlier on Kevin Geary. And hopefully some more stuff coming with like admin bar and WP builds. We’ll see. See where we go. So yeah, lots to do.

Michelle Frechette 00:37:22  Always welcome back here. You know that.

Mark Westguard 00:37:24  Yeah.

Michelle Frechette 00:37:26  Now I know the answer to this question. But for anybody else will we see you in Asia?

Mark Westguard 00:37:31  You will see me in Asia. I am sponsoring. I will be right next to Bob WP. We’ll Do the Woo. We’re usually next to each other getting up to mischief and, Yeah, looking forward to it. And you’ll you’ll be there as well, I believe?

Michelle Frechette 00:37:45 I will. I’ll be there. Yeah. I’ll wave as I roll by you. 

Mark Westguard 00:37:49 Yeah.  And if you see Michelle, make sure you do the Michelle and me selfie challenge.

Michelle Frechette 00:37:53  Yeah. Yeah.

Mark Westguard 00:37:56  So. Yeah. Looking forward to that. It’s, It’s only, what, 5 or 6 weeks away from today?

Michelle Frechette 00:38:01  I got my tickets. I’m good to go. 27 hours worth of travel. So.

Mark Westguard  00:38:07  Yeah. And then after that, I’m off to Press Conf. So I’m looking forward to that.

Michelle Frechette 00:38:11  I will be there as well. And, hopefully over in Switzerland for WordCamp Europe.

Mark Westguard 00:38:17  Yeah. WordCamp Europe. I’ve been approved as a sponsor for that too. So, all being well, I will be there too. Giving more demos, giving out some good swag as well.

Michelle Frechette 00:38:30  You know, you always gotta set aside the swag. So I make sure I get some.

Mark Westguard 00:38:34  Absolutely. Yeah. You always get the first one.

Michelle Frechette 00:38:36  I love that. So for more information I forgot to put this up, but it’s WSForm.com. It’s not difficult to find. And so and if people have questions they can hit you up on socials. They can fill out a form on your website. They can get in touch with you however they want to.Right?

Mark Westguard 00:38:51  Yeah. Yeah. And we’re on Twitter or X as it’s now now known. I’m @Westguard or @WS_form. And then we also have a Facebook group for WS Forum. So feel free to join that and be part of that community.

Michelle Frechette 00:39:08  And play nice in there.

Mark Westguard 00:39:09  Yeah. Please play nice. Or Michelle will be on you.

Michelle Frechette 00:39:13 I will.  I’m one of the moderators in there, so. Very good. I thank you so much for taking some time. I know it’s been a busy day. But sometime there. If there are any other questions. Oh, we got something. Let’s see. Oh, Marcus is here. He says, see you at Press Conf, friends. We will see you there for sure. Marcus. 

Mark Westguard 00:39:31 Yay. Yeah. Looking forward to seeing you, Marcus. It’s gonna be good.

Michelle Frechette 00:39:33  Grab a cup of coffee together, maybe. 

Mark Westguard: Yeah, absolutely. 

Michelle Frechette: I already have a guest lineup for next week, so next week we’re going to be talking to Ian Stewart, about WordPress Studios, WP studio.  If you’re not familiar with it, it’s a it’s it’s a lot easier than when I try to set up, you know, mam for Zam for whatever on my computer, to spin up a site and have fun playing with that. And they’re adding a whole bunch of stuff, including AI and things like that in there. And so Ian’s going to come and give us, the, the lowdown, as they say, on, on all those things. So we’re going to be able to talk to him about that. So put mylogo back up there.

Michelle Frechette 00:40:08  Yeah. So that’ll be good. Looking forward to meeting him and having a conversation about that next week. So any last words before we shut down for today? 

Mark Westguard 00:40:18  That’s all I got. Four months work and that’s it. 

Michelle Frechette 00:40:21  That’s it. 35 minutes. About 40 minutes. And that’s. And that’s it. That’s how long it took to build it up too, I’m sure.

Mark Westguard 00:40:28  Oh, yeah, I wish. Yeah, a lot of late nights. Looking forward to people using it and getting some feedback on it.

Michelle Frechette  00:40:35  So if they do have feedback, you want to hear about it for sure.

Mark Westguard 00:40:39  Yeah. Absolutely.

Michelle Frechette 00:40:39  Yeah. Nicely. Nicely nice.

Mark Westguard 00:40:42  Yeah.

Michelle Frechette 00:40:42  No damning tweets and things like that.

Mark Westguard 00:40:46  Yeah,please no.Twitter is miserable enough as it is.

Michelle Frechette 00:40:53  Well again, thank you so much for spending some time with me today. And I even learned some things I hadn’t already seen before. So I’m excited about that and being able to show other people. So this this episode will be live on our website. Live.  It will be on our website by Friday with a complete transcript. So anybody who wants to watch it again will have the ability to do that. And as I said, next week we’ll be talking to Ian. So thank you, Mark. Thanks for spending some time with us today. We’re going to call you. But don’t you go anywhere because I’m going to chat with you after, after we end the stream.

Mark Westguard 00:41:24  Sounds good. Thanks, everyone. Bye.