Recorded On September 25, 2023 | Duration 00:30:52

Episode 7

WP Constellations Episode 7
WP Constellations
Episode 7
Loading
/

In this episode we talk to Mark Westguard of WS Form, who is doing incredible things with his form plugin, including AI form generation, Google Maps integration, and a searchable table display.

Mentioned in this episode:

Episode Transcript

Intro: Welcome to WP Constellations, a podcast exploration of the WordPress universe, brought to you by StellarWP.

[00:00:02] Michelle: Welcome back to WP Constellations, a podcast at StellarWP. I am here today with my co host, Jeff Chandler. Jeff, how are you?

[00:00:24] Jeff: I’m doing Okalie dokeley. Hello. Welcome back. This is going to be another fun episode.

[00:00:29] Michelle: Absolutely. Because we have a guest who’s also a very close friend of mine, Mark Westgard from WS Form. Welcome, Mark.

[00:00:36] Mark: Hi, Michelle. How are you?

[00:00:37] Michelle: I’m good. Thanks for remembering my name. Have you met Jeff before? He did forget my name once on a podcast. That’s why I tease him now. But yeah, anyway, have you?

[00:00:50] Mark: I’ll never live it down. I’ll never live it down.

[00:00:53] Michelle: For sure.

[00:00:53] Jeff: Yeah, she won’t let you.

[00:00:55] Mark: I know.

[00:00:58] Michelle: So anyway, we’re so excited to have you here today to talk about WS Form and forms in general as it pertains to WordPress. I will tell you probably, oh, gosh, six or seven years ago now, we were having a conversation at one of the WordPress Rochester meetups and you know how usually it’s like, who’s the best host? And everybody kind of fights over who they think is the best host. Somebody said, what’s the best form?

And like, literally everybody has a different answer for what their favorite form plugin is. And a lot of it has to do with what you started with and what you learned and what you know, right? And so how you work within those things. But the truth is there’s a lot more to just what you know and that kind of thing when it comes to form use on your WordPress website. And as I like to say, a form is a call to action. You have a form because you’re wanting to either sell something, collect information for something, it is a call to action. And so how you use forms on your website is super important. So, Mark, tell us a little bit about WS Form and how you got started.

[00:02:02] Mark: About, I want to say five years ago now, so little bit of a story, but I used to have a web agency and I’ve had a web agency for about 26 plus years now, so I’ve always been in the web game and wanted to build a WordPress plugin. So we had been using WordPress for about ten years and wanted to have a go at building a plugin. Sat down with the team and said, what frustrates you about WordPress, and forms were always a challenge to build.

They’re one of the most important aspects of your website. They’re the way that people communicate with you through your website. So we wanted to improve that experience. So that’s where WS Form came from. Took us about, probably about a year, year and a half to build version one. And we’ve been at it ever since, still coding it to this day. So always adding new features and we wanted to come at it from a slightly different angle from some of the other form plugins. A lot of form plugins. You have to have a lot of different plugins added to get functionality that you wanted so we wanted to build a more inclusive product that gave you a lot of that functionality out of the box. We wanted to make sure that we were accessibility friendly. We wanted to make sure that we were fully mobile responsive. We noticed a lot of form plugins. It was kind of difficult to get them looking nice on a mobile device and a tablet and a desktop. So we hit that problem head on from day one and really focused the product. Although you can build a basic “contact us” form with it, absolutely, but it’s very developer focused as well. So for developers, they can rapidly build forms very quickly. For example, our debug console that we have, where you can just click a button and it fills the form out for you, is a really nice feature. One of the first things that we built because we’ve tested tens of thousands of forms, as you can imagine with the product, it’s a relatively new product on the market compared to some of the veterans that have been out there for a very long time. And it’s certainly been a challenge getting to where we are today.

[00:04:08] Michelle: It’s definitely competitive.

And like I said, people cling to what they know, right? So if they’re a form, what is it? Contact Form 7 people are like, Contact Form 7 people. Gravity Forms people are Gravity Forms people. I’m a WS Form girl myself because I have used WS Form on many sites, including WPSpeakers.com, which you were kind enough to help me implement with a Barn2 plugin that actually displays them and that you can search, et cetera. So that’s been a lot of fun and I’ve learned so much more as I go. But you did say it’s really good for developers. But I will say I’m not a developer. And I find WS Form very easy to use because of how it’s got a drag and drop system, how you can drag your columns and things to fill different sizes. And the visual builder aspect of it is very user friendly, I think.

[00:05:04] Mark: Yeah, and if you want to build a basic form, it’s literally a drag and drop interface. And if you want to go a little bit further and make that responsive, you can actually adjust the layout for each breakpoint, a breakpoint being a different device size. And if you want to go even deeper, if you kind of click into WS Form, it gives you more and more control. So actually, when you install the plugin, there’s a welcome screen and that kind of onboards you into WS Form. And we actually ask you how familiar you are with building forms. You can say keep it simple. And if you hit keep it simple, we actually make the user interface a bit easier to use, so we’ll add some additional help, we make the settings a little bit easier to use. So really it applies to people with all different skill sets in terms of building forms. If you want to get really complicated with it, you can. If you want to build a simple contact us form, off you go. And then we’ve even got the new AI component to WS Form, where you can literally type in the form that you want and it builds it for you.

[00:06:08] Michelle: I used that recently and it worked brilliantly. Absolutely brilliantly.

[00:06:14] Mark: Kind of scary, but I built a form yesterday for adopting a dog. I just said create a form for a dog adoption, and it built it. I mean, it had radio fields in there for “do you have an existing pet?” It even added an image upload field to say, please send an image of your existing pets. Which I thought was funny, but yeah. So we’re really trying to just speed up that process. Because when we were building forms back in the day, we were hand coding some of them before we were using some of the form plugins and it would take us seven or eight hours a day to get that form built and make sure it’s submitting properly and everything else. The whole testing process was quite complicated, so we’ve really streamlined that down. When I demo the product to people at workout, they’re pretty amazed at how quickly you can build a form and test it and get it on the site.

Yeah, we’re pleased with that.

[00:07:13] Jeff: So WS Form has a number of field types, I think 55 or more. You’ve got over 100 different templates. Does the AI component actually tap into these resources that are already built into the plugin to generate the forms?

[00:07:27] Mark: It does, yeah. And the AI component will do things like all the basic fields are included. So it’ll build text fields, text area fields, phone number fields, it’ll even build, select, checkbox and radio fields as well, and populate those with options.

Furthermore, it’ll fill out things like help text on fields and placeholders too, to help with accessibility. And it’ll even do file upload fields, rating fields, and we’ve got plans to expand that and include even more. One of the things we’re experimenting right now with is seeing if we can get conditional logic to work. So conditional logic on a form would be something like if they check this box, then show this field, maybe you would have a box that says other, and you want to show another field underneath something else. So we’re trying to see if we can get the AI to actually generate that kind of conditional logic as well. It’s quite fun actually playing around with it and seeing what you can get out of it.

[00:08:26] Jeff: Now, you’ve been in the form space for awhile, I know some of the other form plugins out there, they’ve been around for more than ten years now in WordPress land, and they’re still working on their product. It’s like forms plugins, I guess, are never finished. There’s always more things to add. But in your mind, what has it been like navigating the form space within the WordPress ecosystem? And is AI one of the most exciting, innovative features you’ve seen so far in your stance of running WS Form?

[00:09:03] Mark: It’s definitely given us the biggest PR buzz. When we talk about AI, people love to see what AI can do. And when we built the AI generated forms, it was really one of the first things I’ve seen where it’s not generating text or image, it’s actually using an output from OpenAI and generating something different.

So I was pretty impressed with the consistency of the data we could get back from OpenAI to actually do that. So essentially, what it does when you prompt, it gives us a packet of data that we then interpret and build a form from it. And to get that consistent took quite a bit of what’s called prompt engineering. We have to make sure that we give it very good instructions. But yeah, in answer to your question, it was definitely one of the most revolutionary things that we’ve done. I think one of the other things that we do that I find really inspires people with the plugin is our template system and how we can generate forms automatically for people. So, for example, if you want to build a form to create a post, and it’s a custom post type, and you’ve got some ACF fields on there, you can literally click on the custom post type template and it will build a form for you. So it puts all the custom fields in there and just saves you a ton of time because it just builds and maps everything for you. And you’ve got a full bi-directional form that can both create a post and also edit a post as well. And then we use that same technique with other plugins like Mailchimp and Constant Contact and all the other integrations that we have. We have about 70 plus integrations now, and all of those have that template feature. Pretty much all of them had that template feature, which really speeds up the process.

Sorry, go ahead.

[00:10:55] Jeff: No, where was all this cool stuff back in 2009 when there were no really good Forms plugins or plugins to allow me to create a front end version where people could submit posts or ideas? And now it’s just here, it’s there, it’s available. It’s so nice.

[00:11:11] Mark: Yeah, it’s kind of the evolution of software, right? I mean, we’ve come from machine code through to software that writes itself.

It’s pretty remarkable. Yeah, we talk about the competitiveness of this space. We’ve had to innovate to make ourselves stand out, and that’s really how we’ve managed to get our voice out there and have penetrated the market. Had I just built a form that did exactly the same as a basic form plugin, we wouldn’t be where we are today. So we’ve really had to stand out and innovate and really being able to show people that if you use this product, your production time on a form is really going to be shortened and you’ll get a lot more done. Plus, on the same token, we’re also trying to make sure that that form runs efficiently and fast and that you don’t have to install three or four plugins or write a bunch of code to achieve what you want to do. We have a lot of that functionality built in, so the only thing that we have add-ons for is actually for integrating it with a third party platform. Everything else is part of the core product and we only load those pieces of code if they’re needed on the form. So you don’t have a huge piece of JavaScript running on your site and slowing it down. So we want to make sure it’s nice and quick.

[00:12:33] Michelle: I built a site for my daughter’s DJ business recently and used WS Form and I used the AI part of it and I posted about it on Twitter. And the first question somebody asked was “but how much did it cost to generate that form using Chat GPT and AI?” And I was like, “Mark, I don’t know how to answer this question because I don’t know how to look this up,” but the answer was basically like a quarter of a penny or something like that.

Something like that. It was like a ridiculously small amount. You do have to have an account and you have to have a way to pay for those. You have to set that up in Chat GPT to be able to do that. But once that’s established, it literally is less than pennies to just generate one form. It is interesting. Yeah. And then the other thing, you’ve added a bunch of stuff lately and I love that you send them to me to look at because I’m like, wow, blown away by all the stuff you’re doing. But you added Turnstile on there recently too. Talk about a little bit about what Turnstile is because you do have to sign up for a free account with Cloudflare to make that work also. But what did you do with Turnstile and how does that work on a form?

[00:13:37] Mark: Yes, so on a form, obviously you want to reduce spam as much as possible and Captchas are a way of doing that. So you’re probably familiar with Google Recaptcha where you’re having to click on all those traffic lights and help Google’s autonomous vehicle program.

Or you may be using hCaptcha which is a little bit more of a privacy focused version of reCAPTCHA and then outcome Cloudflare Turnstile. And what Cloudflare Turnstile does it’s similar to a captcha but it’s a lot more silent. It doesn’t need you to click on images. So that can be a challenge for accessibility, having to click on images. So the way Cloudflare Turnstile works is that it detects whether you’re a human or not based upon your interaction with the page. So it’ll detect mouse movement, it’ll detect if you’re typing and things like that to determine if you’re a genuine human being or not. So therefore, when that form appears, 99% of the time we just get a little checkbox and it says, great, we know you’re a human, you can submit the form, and there’s no barrier to filling that form out and submitting it. So yeah, you set up an account. One of the nice things you can do with Cloudflare Turnstile is set up separate keys for different pages on your website, and you can monitor those independently. So if you’ve got a Contact Us page, maybe a sales inquiry page, you can have separate keys for each of those and actually monitor those independently in Cloudflare. So I like it. I use it on all of my forms now. I like it because the user doesn’t have to interact with it, and that just annoys people. And when you’re trying to get people to interact with your business, you want that barrier to entry to be as low as possible. And I think this certainly helps out. And we have a bunch of other spam protection measures in WS Form as well, usual things like honeypot and stuff that you would expect, but that’s certainly quite a cool innovation, I think, that they’ve come out with there, and I find it’s been working really well.

[00:15:42] Jeff: So you mentioned earlier about the various integrations. Can you tell us a little bit about your Google integration and maybe even your WooCommerce integration?

[00:15:54] Mark: Sure, yeah. So on the Google side, we have integration with various APIs from Google. So you’ve got things like Google Drive. So if you want to push a file upload to Google Drive, you can do that. We’re tied in with the Google Maps. So if you want to put maps on your form and choose a location, you can do that. We have Google Address, so you can partially type in an address and it will give you some suggestions. And then when you click on one of those addresses, you can then map those address elements to fields on your form. So if you have maybe a billing and a shipping address, you could start typing in your address and you could actually put it in both billing and shipping if you wanted to. And it does that all client side, it’s very quick. We’ve also got Google Routing as well, so you can actually type in a start address and an end address. It’ll work out latitude and longitude for those addresses. It’ll work out the distance between those two addresses. It’ll actually plot the route on the map. You can use that data in calculations to then work out maybe you’re a delivery company and for every mile you’re going to charge a dollar, you can actually build calculations and use that system to build calculated forms.

[00:17:03] Jeff: Or you’re running The Events Calendar and you’re running a marathon and you could use that form to generate how long that route is going to be and you could show that through the Google Maps.

[00:17:12] Mark: Absolutely, yeah. And then that distance can actually be submitted as part of that form. You can then integrate, send that data off to another integration like Airtable or whatever you want to do. So the whole system, all these integrations glue together and work well together.

So that’s Google and then on the WooCommerce side, we have a WooCommerce extension which is available in the WooCommerce store directory that they have on there with all of their extensions. And what that does is enables you to put any of our forms on a product to customize a product. So you can use that for example, to just build a regular donate plugin, donate page, so you can actually ask them how much they want to donate and then that amount that they type in would then go into the cart as that amount. But you could do a lot more complex stuff so you could even do things like t-shirt designing. We’ve actually got like a pizza demo on there where you can order a pizza.

All of our features such as tabs, repeaters, conditional logic calculations, can all be used on the products themselves to build product customizers. So we have people using that for all sorts of things from very simple type in what you want to appear on this product through to people that actually use it for things like ordering windows for a house. They can literally choose interactively, what window type they want, what the dimensions are, it calculates the price and then when they click on add to cart, that gets added to the actual cart metadata.

Now that can also tie in with all of our actions. Our actions are what run whenever a form is submitted or saved. So you could send an email to somebody, you could push a Slack message somewhere, you could actually send an SMS message and you can choose which order state in WooCommerce that will occur on using that extension. So it provides a lot of functionality in WooCommerce that you would otherwise need three, four or five different extensions for all bundled into one. Because all the features of WS Form can be added to it.

[00:19:21] Michelle: Yeah, I love that you can even push or use it to push into custom post types, which is what we did with WP Speakers, is create a custom post type so that every person that submits that now has a speaker profile once it’s approved. It’s brilliant.

[00:19:38] Mark: Yeah, and that’s done with our post management add on and that’s integrated in with ACF mailbox toolset, pods and jet engine. So all five custom fill plugins you can create posts. You can actually read data from posts and create and edit forms as well. And that supports things like image uploads in ACF. It even supports repeaters.

For each integration that we’ve done, we’ve tried to use as much of the functionality that’s available with these third party products as possible.

I think that’s evident with things like our integrations with email marketing and CRM packages.

We use the API. We pull down, for example, with Mailchimp, we pull down your lists in Mailchimp, show those as templates, and when you click on those, it will then create a form for you. So it pulls down all your custom fields or your tags, builds the form, maps it all for you so you no longer have to build a form. Click on add map, map all the fields individually, and then that often takes what, three, four, five times to test it to see if it’s working. And that’s where our debug console comes in. When you can just go populate and submit it, fills the form out, submits it and off you go. Really does save an immense amount of time.

[00:20:59] Michelle: You can do a lot of sophisticated things, too. I was talking earlier about how your form is a call to action, right? But I love that you could even use it kind of as the top of your sales funnel. So you capture an email address on the home page, you ask a couple of questions about which area of, let’s say that you’re a contractor, a home builder, and people are interested in are they interested in having their bathroom redone or their kitchen redone? And so they click one of those boxes, and instead of just saying, thank you for submitting your information, you can direct down a path that talks about bathroom changes or down a path that talks about kitchen changes and things like that. How you style your form is also important, right? And your forms are very easily styled with additional CSS, obviously, you could do a lot right within there, too, but I’ve used CSS a lot on them just to make them look exactly how I want them to look.

[00:21:56] Mark: Yeah, we have very clean code behind the scenes, so it’s very easy to style those. And if you’re familiar with CSS, you can either use our classes or IDs, or you can actually add custom classes to pretty much every element in the form as well to style it.

[00:22:13] Michelle: And maybe forms aren’t sexy, but they can be fun.

[00:22:18] Mark: They can be.

[00:22:19] Michelle: Did you look at that text I sent?

[00:22:22] Jeff: Yes, yes, I was checking this out, and apparently WS Forms puts the fun in function.

Yeah, I was checking that out. And Mark, I’m going to put you on the spot here. What is your favorite feature of WS Form?

[00:22:40] Mark: I would say conditional logic. I think it’s the one thing well, not the one thing, but one of the things that really makes us stand out. We noticed a lot of form plugins, they do have conditional logic and they’ll do something like if this value equals ABC, then show this field, but it didn’t seem to go much further than that. That’s one of the areas where you can build truly interactive forms with WS Form. A lot of people say to me, you’re not a form plugin, you’re an app builder because of what it can do. But you can do things like if a mouse cursor hovers over a field, or if there’s a mouse down event, or if a field is valid or if the form is valid even like a color field, for example. You can actually check the hue level, the lightness level, et cetera on those fields and do things based upon the hue level or the color field.

And the things you can do with conditional logic, you’ve got the usual stuff like showing and hiding a field, but you could also show and hide a tab for example, or you could submit the form, or you could save the form, or you could run JavaScript, you can even run PHP code with conditional logic. So as a result of somebody doing something on your form, you could actually run a WordPress hook and the data that comes back from that hook. You can then actually inject onto your form as content, so you can use it to build dynamic forms that way.

[00:24:09] Jeff: I wonder how many people listening to this is going to listen to you describe conditional logic and their heads are just going to be spinning with ideas because it sounds like the possibilities are endless.

[00:24:22] Mark: You know, we listen to our customers a lot and we like to implement things that people suggest as much as we possibly can. That’s really how we drive the product. And a lot of the conditional logic stuff that you’ll see in WS Form is as a result of listening to customers and certain use cases that they had, and if we’re able to implement it, then we go ahead and do that. So we have a huge feature request list, I think because of that, because we do listen to people more, so more requests than we can manage.

But there are some fantastic ideas that come up. I work with some of our customers actually on accessibility, so they will try things with accessibility on our forms, and if they find a better way of doing it, then we love to implement those ideas and try and improve on that. Because accessibility is always changing, there are always new things that are happening to improve the way things work there, and that’s something that we like to focus on, but then just other pieces of functionality that people have needed on their forms that we feel would be beneficial to other people, we implement those as well. So one of the things that we’re working on this week, which hopefully will be launching shortly is the ability to put like a loader spinner on the form. We have some customers that just have these almighty forms that are huge and they can take two or three seconds to load. So we just want to be able to have the ability to show a loader on that. Also, when the form is submitted, if the form is huge or there’s a lot going on on the back end, then sometimes a loader will be useful for that. So we’ve got this really cool new loader editor coming up where you’re going to be able to choose the kind of loader that you want. You could even use your own custom HTML for that and you can choose when and how that loader will appear on the site.

That was something. We had some feedback from a few users saying, hey, we’ve got this really slow form because we’ve put too much data in it and we’d like to show a spinner. Some of the forms that we get sent are just crazy. I mean, they’re thousands and thousands of select down options and things, but there are use cases for everything, so we want to make sure it works for everything.

[00:26:42] Michelle: So I was just looking at your WordPress.org page and you have 177 reviews and all of them are five star reviews. So congratulations. That’s pretty exciting.

[00:26:52] Mark: Thank you. Yeah, all genuine reviews and a lot of those were just unprompted. People just wrote about the product, which was really kind of them, and I like to write to them personally and thank them when they do that.

But yeah, it’s been great feedback.

Our number one focus is on support and if somebody comes to us with an issue and they’ve got a problem, they can’t get their website to work, then we’ll help them out with that and we’ll help them by asking them to send us their form. We can have a look at it for them and then we can send the form back and say, here’s where the issue is. This will get your form working the way you want it to.

And often we’ll get thanks and we use that in turn to say, hey, if you wouldn’t mind giving us a testimonial, then that would be great. And a lot of people oblige, which is really nice. So we’ve got a great community of people that use the product. We’re very lucky in that regard.

[00:27:52] Michelle: I love it. That’s awesome.

How can people find WS Form online and socials? How do we find you?

[00:27:59] Mark: There’s too many to mention now, isn’t there?

So the main website is just WSForm.com and you can find us on Twitter? Not Twitter. What is it called?

[00:28:09] Michelle: X.

[00:28:11] Mark: Find us on X.

[00:28:15] Jeff: W comes right after Y just before Z. Yeah.

[00:28:19] Mark: It is so complicated. Yeah. WS underscore Form, I think. What’s the new one that just came out? I can’t remember the name.

[00:28:26] Michelle: Threads.

[00:28:26] Jeff: Threads.

[00:28:26] Michelle: Threads.

[00:28:27] Mark: Threads. Yeah, we’re. On there as well, WS Form, and then we have a Facebook community group as well. So if you just do a search for WS Form community, you’ll find us there. And, yeah, some great people on there asking good questions.

[00:28:43] Michelle: We’ll add all of these links in the show notes as well. So you can go to StellarWP.com and find this episode of the show under our podcast episodes and all of the information will be there, including a transcript of this episode. Mark, any last words before we close down our episode for today? Anything that you’d like to add that we didn’t ask?

[00:29:09] Mark: I think, you know, take your forms seriously. They’re an important part of the website. They’re often the one thing that people like, oh, I’ve got to build a form, but they’re the channel that enables your customers and whoever you’re dealing with to be able to communicate with you. So if you make that experience a good one and make that form easy to use, then you’re going to improve your conversion rates for sure in terms of getting those forms through. So, yeah, take a bit of time. Look after your forms and your forms.

[00:29:43] Michelle: Any last words today, Jeff?

[00:29:45] Jeff: No, just WS Form sounds amazing and apparently it sounds like it could do everything, yet you have feature requests, so it could obviously do more you think it’s just a forms plugin, but oh, no, it’s so much more. I just want to thank you, Mark, for coming on the show and telling us and describing the product in ways that our listeners will be able to actually hear and probably generate ideas on how they can implement WS Form on their own websites.

[00:30:13] Mark: Yeah, thank you for having me. I appreciate it.

[00:30:15] Michelle: Yeah, thanks for being here and we look forward to seeing what things you come up with for WS Form in the future. Thanks.

[00:30:22] Mark: Appreciate it.

Outro: WP Constellations is a production of StellarWP, home of The Events Calendar, LearnDash, GiveWP, Kadence, Iconic, SolidWP, Orderable, and Restrict Content Pro. Learn more about the StellarVerse at stellarwp.com