Form building basics – WS Form Webinar Series, Episode 1

Get 20% off WS Form, click this button and use code “WPBuilds”

This is the first in a series of 6 webinars in which WS Form founder and developer, Mark Westguard, explains how to use the plugin. Starting with the basics we’ll delve into more complex form implementations as the series progresses.

Today, we cover:

The template library

  • Static templates
  • Dynamic templates

The anatomy of a form

  • Tabs (Multi-Step)
  • Sections (Logic groupings of fields)
  • Fields

Layout editor features

  • Adding fields, sections and tabs
  • Resizing
  • Copying
  • Reordering
  • Moving
  • Undo
  • Export / Import

Fields types

  • Basic: Text, Number etc
  • Choice: Select, Checkbox etc (Show data grids, data sources)
  • Advanced: Google Address

The section library

  • Quickly build forms with sections
  • Importing and exporting

Responsive forms

  • What is responsiveness?
  • How do you build a responsive form?

Conditional logic

  • Basic conditional logic (Mention future episode about building interactive forms)

Actions

  • Sending email notifications (Mention future episode on email deliverability)
  • Saving and viewing submissions
  • Other types of actions
Read Full Transcript

[00:00:00] Nathan Wrigley: Hello there Mark. How you doing? Hello Nathan. It's Mark Westguard. Look, Mark Westguard from WS form. I apparently am in heaven. This one day of the year, when it's sunny in the uk, the sun comes directly through that window and there's nothing I can do about it other than being complete. I'm stuck in a blue box.

Yeah, you are stuck in a blue box. Just do that with your arms cuz it is funny. Yes.

What would be funnier if I put that arm out and it came into your screen that would be genuinely

[00:00:44] Mark Westguard: afford a bigger green

[00:00:45] Nathan Wrigley: screen. Thank you for joining me. I really appreciate it. If anybody is watching this live, we, me and Mark, by the way, just so that we're taking this as an opportunity to record six six primers, if you like, six videos in a series, all about how to use w s form.

And so we're doing it live. We thought let's do it live. So that's the process. If people. Wish to ask questions, they can, but we're treating this as an opportunity to get some content recorded, and then both Mark and our AW WP Builds can make use of it and so on. Yeah, it's a six part series.

This is gonna be the first episode. We'll get onto that in a moment. First thing, a little bit of housekeeping. If you are watching this live and you want to make a comment, feel free to do that. That's fine. The best way to do that is to either go to this page, which is wp builds.com/live. If you go there, then you'd need to be logged into some Google account because it's got Facebook, sorry, it's got YouTube comments.

So if you logged in to Google in some way, shape, or form, then you can comment there. If you are in our Facebook group, then you can also obviously make comments through the Facebook system. But Facebook don't allow us by default to know who you are. So you have to go to chat.restream.io/fb. That's the platform that we're using, chat.restream.io/fb and tell Restream that you are happy to share that data.

But that's fine. If you don't wanna do that's completely fine. But yeah, I would say if you want other people to come and join us, please send them to that u r l WP builds.com/live. So first off, mark, we're on the first of our six part series. I think probably it's Apropo that you just introduce yourself, tell the audience who you are, how you got into.

WordPress, and for goodness sake, why on earth did you build a plugin in an already competitive marketplace?

[00:02:49] Mark Westguard: Utter, utter madness. No. I'm Mark West Guard. I'm the founder of WS Forum. I've had a web agency for more than two decades. He, to the graying here but decided to get into WordPress. I think we started probably about 10 years ago, so we're not a real veteran like some people, but about 10 years ago, and then decided to get into plugin building and decided to build WS form because we just wanted to build a better environment for building forms, basically.

And as a as a developer saw some shortcoming short, a small little gap in the market and wanted to jump into that. Improving integrations and things like that. So that's where we are with WS form.

[00:03:36] Nathan Wrigley: It's it is, as you're about to find out a really fabulous, totally credible form solution.

I wouldn't be having Mark on if I didn't actually think that the product was ridiculously useful. And in all honesty, it's so good that it requires a bit of explanation. And what I mean by that is there's a whole load of hidden extras and whilst you could read the documentation and all of that, and Mark's gone out of his way to make sure the documentation is full on it, I just thought it might be a good idea to do a little primer.

And so this first episode is gonna be about form building basics. So that's episode number one. And Mark's gonna go through a laundry list of all of the different things that you need to set up a basic form. It's like the primer for the whole thing. Episode two, which we're gonna do in a week's time, will be all about creating, building interactive forms.

So forms that you can in somehow interact with. I guess there's conditional logic and things like that. The third one will be, and I, this topic rarely gets covered in all honesty how to prevent form spam. This bit specifically interests me deliverability, cuz that always confuses me. I know that there are ways to make your form entries more likely to hit the inbox and efficiency.

So that's number three, preventing form spam deliverability, and form efficiency. Number four, we're gonna look at custom field plugin integration. So how you can get forms to send data to custom field plugins, a ACF and so on. Number five, this'll be a good one all about Woo Commerce. I noticed that Rob can showed up asking about his pizza.

That'll be, he said he said, yeah, where's my waiting for my pizza? Show us all about how to tell Pizzas in that episode. And the last one we're gonna do is gonna be number six, AI. Informs all the hotness at the moment, isn't it? And how can you actually make use of AI informs? So that's our six part series.

I think we've got the first five booked in consecutive weeks. The sixth episode is out on a limit at the moment. I'm not sure if we've got the date nailed down for that one, but it'll be coming and it will be coming soon. So Mark West indeed. Ws form. What should we do, should we kick off the first one form Building basics?

Do you wanna share your screen or is there some preamble you wanna do

[00:06:01] Mark Westguard: first? Yeah. I think I'm already sharing my screen, so you might have

[00:06:05] Nathan Wrigley: to, I will enable

[00:06:06] Mark Westguard: it. There we go. Enable that. Yeah. Yeah, course. So

[00:06:10] Nathan Wrigley: make us a bit smaller. Oh, no, not that one. Let's make us, let's make

[00:06:13] Mark Westguard: us, there we go. There we go.

Yeah. So in this episode, we really wanna just cover some basics, but even people that use WS four may pick up a few little tips. As I, I click around. There are, as Nathan says, WS four is certainly, More of a learning curve than other form plugins, but behind the scenes there's a lot of features that make Ws form a lot more advanced than other form plugins.

So we're gonna start off by looking at the template library just very quickly so you can understand how that works. So we're gonna assume at this point that you've installed WS form and there are two flavors of WS form. There's a light edition, which is a free version that's available in the WordPress repo in the plugin directory.

And we also have a pro edition as well, which has all the bells and whistles with it. The pro edition is this, we actually have three flavors of the pro edition. So we have a personal edition, which is a one site license. We have a freelance edition, which is a five site license that comes with some of our add-ons as well.

We'll go through those later on. And then we have an agency edition, which is an unlimited. So if you're an agency or a serious developer, the agency edition's a good option cuz that gives you pretty much everything that, that we offer in one package. And what I'm gonna show you today pretty much all of it works with the light edition and the Pro Edition.

So we're not really gonna go into too much pro stuff today. Okay. So the template library, so when you click on new under the WS form admin menu we'll show you a bunch of different tabs and each of these tabs are different types of templates that come with WS form. And we've got a popular tab here.

So these are some of the more popular templates that people tend to use just to get you going. We've also got things like application forms, booking forms we have a demo tab as well. And that shows you how to build some of the more complex stuff in WS form. A lot of these are in our knowledge base as well with some further explanation, but if you just wanna click on one of these to build a certain type of form you, some of the pro templates that we have are things like e-commerce templates.

Calculators. So you can do things like loan payments and car payments. Also things like Google Maps, for example. So if you wanted to put a Google map on a form and let people choose a location or have a Google address filled, you can use these templates for that too. Now the, everything in these templates can actually be built in the layout editor itself.

So these are just pre-made forms that you know, you can use to investigate WS form a bit more, or use it as a foundation. So these are all static templates. When you click on these, it'll just create the form that you see in the template. And we also have what are called dynamic templates.

And dynamic templates are where we connect to a third party platform. For example, Google Sheets or MailChimp or Salesforce or something like that. And when you click on those templates, it's actually gonna pull information down from those services and build a form for you. For example, if you're using MailChimp, it'll actually show you your MailChimp lists that you have set up in MailChimp.

And when you click to user template, it's gonna build the form based upon what you have in MailChimp. So it's not a static template, it's actually built dynamically.

[00:09:30] Nathan Wrigley: Can I just drill into that cuz that's dead Cool. Yeah. So you are, at some point prior to having MailChimp enabled, you would've gone into a setting somewhere and set up your MailChimp API key or however MailChimp works.

And at that point, WS form is consuming information about what you have set up, so the names of your lists and all of that kind of stuff. And then how many, what fields you've got in there and things like that. And then when you go to create the form, it's gonna pull that in automatically for you,

[00:10:02] Mark Westguard: correct.

That's, yes. So cool. Yeah. So in MailChimp you can set up custom fields, you can set up categories, tags and things like that. And it will pull that information down from MailChimp and build those forms for you. It really does speed the process up. So I'll quickly show you how that's done. If you go into settings on WS form, and

[00:10:23] Nathan Wrigley: again, this API keys by the

[00:10:25] Mark Westguard: way, just yeah.

There's no API keys case. We use owa. O is a much nicer way of connecting to a third party service. So with some form plugins, you'll have to go and get the API key copy and paste that into your setting to get it, to connect with ours, all you need to do is just click the connect button. It'll take you to MailChimp.

It'll ask you to authorize the connection between WS form and MailChimp. And then once that connection's established, you'll, it'll just say connected in settings here. And then when you go to a new, you'll then see the MailChimp template category up here. And it'll then pull down your lists.

Excuse me. And when you click on use template, it'll then build that form for you. So I'll click on it here so you can see what it does. So this is it. Now talking to the MailChimp api, it's pulling down the data and then we. So it's got all the custom templates that I've create, created any interest groups, it's ready with opt-in on there and that form is basically ready to go.

[00:11:24] Nathan Wrigley: So all of the fields that we can see on the screen now are mapping directly to things that you've pre previously set up in MailChimp. Correct. And it's automatically given you some kind of GDPR checkbox as a field as well. Is that

[00:11:38] Mark Westguard: what Wow. Nice. Yeah. So all the templates are GDPR compliant out of the box.

And it's also this form is basically ready to put on a page straight away. So all you have to do is click publish and then add it to a, add it to a page. And under actions up here, I won't go too far into this cause we're gonna talk about that later, but you'll see this is actually mapped ready to your MailChimp list.

So everything is set up, ready to go for you. So you really don't have to do anything other than change the layout of the form or remove fields or add whatever you need to make it look the way that you want. So those are the two different template types. We've got the static and the dynamic. We're gonna start just with a static template to begin with.

Yeah. Can

[00:12:21] Nathan Wrigley: I just ask, sorry, another question there. Yeah, go ahead. Is there a, was there something in the UI there that showed us was what that little sort of circular icon that I noticed next to MailChimp and Google Sheets? Is that the indication that one's dynamic? No. Yes,

[00:12:34] Mark Westguard: yes. Yeah. And then, and if you click on on that template, let's say for example, you've added an additional list to, you can click this little icon here and it'll actually update that list for you.

Got it. So that little circular icon there is clickable and it'll actually refresh the data that you're seeing on that page. Perfect. Thank you. Yeah. Yeah. So let's go ahead and we'll just create a basic contact task and we'll go into the layout editor. And next thing we're gonna talk about is the anatomy of a form in WS four.

And it's pretty straightforward, but at the outer part of the form, you have tabs. All forms have one tab by the four. And if you have one tab, that tab doesn't actually show. But if you add additional tabs, then you'll start to see those tabs on the form itself. And tabs can be used to build a multi-step form.

So if you've got quite a complex form and you wanna split that up across three or four different steps, you can use tabs to do that. Now tabs will show as a tab on your website. You can actually hide those tabs and use next and previous buttons if you want. You can style those tabs and we have some information in the knowledge base about doing that.

So there's lots of different ways that you can use tabs to split a form out. And in the next series, we'll show in the next show that we do, we'll actually show you how to build interactive forms in other ways, cuz you can actually hide sections, show sections, hide tabs, show tabs, and you can make things a lot more interactive.

But if you wanted to create an additional tab on a form, you can just literally click the add tab icon here, and then start building out your next tab in this section here. So you've got tabs, and then you have sections within a tab. And a section is just a logical grouping of fields. So you may have billing address, shipping address, you might have personal information.

My inquiry, however you want to lay it out. You can do that with WS four and sections can be resized. So by default they're gonna be the full width of the device or the space that you're putting the form in. But you can actually resize those sections if you want as well. So you can just drag these three little icons here, which are actually part of our logo, and you can drag that whatever width you want.

You can also can

[00:14:57] Nathan Wrigley: ask, can I ask at that point, can you gimme a scenario where making it say 50% is a good idea? Sure. Because obviously if you put that into a, I don't know, let's say a short code on, in a short code block in the WordPress editor. So half the space will be empty, but you can't fill that space with anything else.

Yeah. Yeah.

[00:15:18] Mark Westguard: So an example of that would be, and we'll go into the responsiveness stuff in a moment, but maybe you want to have two sets of fields side by side. So you want ah, got it. Set the width of that to 50%. Maybe this would be, I dunno, maybe this would be fitting address and then you'd wanna have a set of fields next to that.

So you can actually click on the settings icon, click copy, and it'll put it to the Right. Got and then nice. There's your shipping address.

[00:15:48] Nathan Wrigley: I hadn't picked up that was even possible. That's so cool. Nice. Yeah.

[00:15:52] Mark Westguard: Yeah. That's why these two tour. It is, yeah. Yeah, that's great. Yeah. And then, on, on this size you may wanna make these full width and adjust the size of the fields as well.

Now we'll go, and again, we'll come onto this a bit more later on, but we've got, at the bottom here, we have the the breakpoint selector. Now a breakpoint selector basically pre allows you to preview the form on different devices. So here we have mobile, and I can drag this across. So I can go from almost like an iPad to a laptop, to a full-size computer.

Now the way that responsiveness works is typically you're gonna wanna build your form in a mobile centric way. So you start off with a mobile layout where you're using a full width. So for that, you may wanna have the sections full widths, all a mobile device. You've got as much space as possible to fill out that field.

You can then move up to maybe a laptop size. And on a laptop you may want to have two columns. Yeah. And then as you go up to desktop, you may want to introduce another column, cuz you've got so much more space there. Now, as I now drag this left and right, you'll notice it's remembering the layout for each break point.

So when you preview this form, if I preview that, I'll pull that away from the editor. If I now resize this. Yep, there it is. You'll see. Yep. There. Your form is now responsive. So the very briefly, that's the responsive side of it. And that's where a couple of columns, comes into effect.

Yeah. That's cool. So really you can build different layouts for each device type. And we're, I think we're the only form plugin that does that where you can actually develop different layouts for different sizes and you have full control over the width of the sections and the fields within those.

So going back to the anatomy, we've got the tab, we've got sections, and then we've got the fields within those sections. And you can add any number of fields that you want within a section. You can add any combination of different fields that you want. And again, with a field, you can resize those fields and you can also offset those fields as well.

So you can choose where you want those fields to appear within that section. Now, obviously if you resize, I make that half width and then I make the section half width. Yeah. Then the field's gonna adjust in size according to the size of the section. So you've got a lot of flexibility around, the placement, the width, the offset of the field.

You can also click Andra Elements within the layout editor as well. So I, if I want to move the first name, fill below last name, I can just click and drag it. Very easy to do. You can also click and drag sections. If we just put these backers, two sections side by side, I can actually drag the sections side by side if I want to as well, so you can reorder those.

Nice. In addition to that, you can also drag sections between tabs. So if you decide you want this section here to be in this second tab, you can actually drag that into that second tab and drop it in there, and it will then enable you to split up a much longer form between different tabs. And again, I can copy that.

I can copy that. Just to bring back another section to the side of it. You can also drag fields between tabs. So if you find that you wanna move the email field itself to a different tab, you can do that. Oh, nice. Different tab. So you can move things around very easily. Each of the sections and fill and tabs can be copied.

So if I go to a tab at the top here, I can actually copy that entire tab if I want to, and then I can make whatever edits I want to that you can copy sections, you can copy fields so it's very easy to duplicate content within WS form. Now, in addition to that, we also have what's called a section library. And if we go to the section library to get to that from the toolbox, you click on the section tab at the top right here. And what I can do is I can actually drag full sections onto my forms.

So if I wanted to pull in an address filled without building that manually, I can just drag this section across and it'll build that section out on the form for me. Nice. So super quick to build forms that way. Now you may build a section that you like the look of and you wanna use it somewhere else.

So let's just make a change to this. Let's just for arguments sake, we'll make that three column and we say, yeah, we want to use that somewhere else on the form, on this form, a different form, or even on a different website. I can actually add this to my own section library. So if I click on edit on those section settings, I can click here and I can do add to my sections.

So if I click on that, it'll then add that to my sections up here, and then if I go maybe to a different tab, I can then drag that section. Into that tab. There it is. So sections are like a little, almost like a pin board where you can put bits of forms that you like the look of and you wanna use them elsewhere.

You can also download these sections. So if I download that, it'll give a little js o file down here on my browser, and I can then drag that into a completely different website and move sections between sites if I want to. You can even put an entire tab into this section library as well. So if I edit the tab and then I do add to my sections, That will then pull in that entire tab as a section that I can use somewhere else.

Oh, nice. On a nice, on different website or on that side. Yeah. So use, use this as a, a way of capturing pieces of the form that you wanna use elsewhere. The nice thing about that feature as well, and we'll come into this probably in the next show that we do, but if you have any conditional logic, if there's any interactivity in that section, that interactivity is actually stored in that section.

So when you drag it into another field, that interactivity will still work. So you're

[00:22:13] Nathan Wrigley: gonna have to explain that to me. I don't know what what do you mean by interactivity in

[00:22:17] Mark Westguard: that case? Yeah, so let's just say for example, we had some conditional logic that showed dress line two. If you filled something out Got it.

Line got it. Yeah. That interactivity, that functionality you've put into that section would be saved in that section library. So when you drag it to another place, it'll still behave in the same way. Got it. Perfect. Thank you. Yeah. Yep. Okay, so that is the anatomy of the form.

We've got the tabs, we've got the sections, we've got the fields. Let's talk about adding fields to the form. So there's two ways that you can do that. And we have about 55 core field types. All the field types are very feature rich. And this is where Ws form can be a little bit of a learning curve cause the fields just do so much.

But if you wanna add a field to a form, you can either drag and drop that field anywhere that you like within a section. And the other way you can do it, if you are more familiar with this, you can just click. The field and it'll add it to the bottom of the section that you were last editing. Got it.

So if I were to edit a different section and I click on that, it'll add it to that particular section. So it kind of remembers where you are in your editing process. Each field, if you click on field settings, then has a bunch of different settings in there. I'll go through some of the basic ones now, just so people are aware of what those are.

You've got the usual things like adjusting the label of a form. So if we wanted to change the label, you can just type in the label here. You'll notice when I'm typing that and it's actually editing that on the layout editor as well. You can also double click on the label in the field as well.

And edit there if you want. So you can do it both ways. Whichever way you're more comfortable with doing show label determines whether the label is actually shown on the form itself. So if you wanna hide the label, you can do that. Some people like to maybe just use a placeholder, you. And not show the label.

Or if they wanna show the label or not have a placeholder, they can do that. They can. I like your

[00:24:22] Nathan Wrigley: default of on though, for accessibility. That's the, that's a good approach, isn't it?

[00:24:26] Mark Westguard: Yeah. Yeah. And everything in WS form as far as we possibly can is a R i a compliant, in, in terms of having all the.

Accessibility text behind the scenes to make sure that the form is accessible. And there are ways of editing that, and I'll come onto that to show you how you can do that. You can make a field required by just checking the required checkbox. If you don't want the field to be required, you can just uncheck that.

You can also hide fields, and again, we'll come onto this in the next show where we're talking more about interactivity. So you can hide and show fields dynamically if you wanna. It's often a good idea if you've got a very long form to only show the fields that are appropriate to the person filling out that form.

We can use things like check boxes to switch on sections, switch on fields and that's where that hidden feature comes in. You can set the default value of the field, so you can literally just type in a value if you want. So default value, there are ways that you can do that as well. So we actually have complete library of variables that you can put into that field.

So if you wanted, for example, to put the name of your blog in a value, you could put hash blog underscore name, and I won't go into those in too much detail. But there's a, an awful lot that you can do with the variables to make forms interactive. You can even copy values between fields as well.

So if I wanted, just for argument's sake, if I wanted dress line two to match dress line one, I can do something. Filled and then put the idea of address line one in there like that will then copy dynamically the value of address line one into address line two. Got it. And yeah, so that's where it starts getting a little bit complicated, but we are gonna try and stick to the basics today.

Yeah. But that default value can do an awful lot. You can also even do calculations with it. So you can do things like summing numbers together, cosign tangents and all kinds of stuff. Oh, so

[00:26:33] Nathan Wrigley: a good example there would be, I don't know, you want 12 months of a subscription and you want tier two of the subscription, which is $10.

So you could do this field multiplied by this field, gives you $120 in the Correct.

[00:26:46] Mark Westguard: Yeah. Got it. Got it. Yep. Absolutely correct. Yep. So you can do Cal. That's how our calculated templates work a lot of the time. We use calculated fields to do that. So that's but neat

[00:26:56] Nathan Wrigley: having an actual physical calculator there.

Yeah.

Yeah.

[00:26:59] Mark Westguard: That's neat. So you can actually choose the fields and then insert them using this feature here. That's okay. Yeah. And these are where Ws form comes into its own. As you go into the settings, you'll see more and more things opening up that just speed up development of forms for you.

Nice to make it easier. There's also a variable library here as well, so you can actually insert the value of another field and then you can see how many different variables we have it here. There's just all kinds of stuff. Yeah. There's a couple we won't go into right now, but Yeah. And then, and we've only got as far as default value.

So yeah, you've got placeholder. Again, you can put variables in there, so you can actually use the variables pretty much anywhere in these settings to, to make the field dynamic. Help text, enables you to put text below the field to give the users some explanation about what that field is used for.

Always a good idea to, to fill that out. Yep. You've got some more advanced features here, like auto complete. So when you go to some forms, sometimes it'll try and auto complete those fields. Maybe it'll try and put your first name, your last name, your email address based upon other fields that you've filled out.

And you can act, it'll do that automatically with WS form, but if you want to force it to use a particular element for a text field, then you can use this to instruct WS form how to do that. You can also determine which virtual keyboard appears on mobile devices. So in some cases you may just wanna have numbers or you might just wanna, or you may be using an email address.

So you can actually choose the virtual keyboard that's used for that field when someone taps on it. And that just gives, that's great. Yeah, so it just gives you a lot more control over what the user is interacting with when they're using your form. Because it's always frustrating, isn't it? When you have to fill an email address out and it comes up with a normal keyboard.

You've gotta try and find shift to get the ax symbol when Yeah. So if you can actually show the email keyboard, most of the time it'll do that automatically again, but you can use this to override. Can

[00:29:05] Nathan Wrigley: I ask a p peculiar question about that? Yeah. If I'm on my phone Yeah. And I'm in and I'm in a form field, which is just the keyboard, it's an address or something, and then I go to a number field.

Yeah. How does that work? Does it collapse the keyboard on the mobile and then reintroduce the new keyboard? Does it, I think

[00:29:24] Mark Westguard: it literally just changes. Yeah. Just on the fly. Okay. Yeah. Yeah. So it just changes it. Now a mobile device will do that based upon the type of field that you are interacting with.

So do it'll do that automatically most of the time. So this is just a feature if you It's an override. Yeah. Yeah. It's an override, yeah. Prefix and suffixes. So that enables you to put things like a percentage sign at the end of a prefix. I can show you a quick example of that's prefix.

So there's some examples there of prefixes and suffixes. Got it. So if you want to put something before it that they can't necessarily change, but it just helps 'em fill that format that you can use the prefix and suffix to do that. In terms of accessibility we set the label for the field.

The a r it's called an A R I A label. And that is what is used by screen readers and other accessibility software to identify that label. So we'll use the label of the fill by default, but if you find that label doesn't read very well to a screen reader, you can override that and put in whatever you want here.

So you could say, enter the second line of your address. Yeah, great. Yeah. For example. So you can use that feature there to override that if you want to improve the accessibility. I'm not gonna go through these other features here right now cause we're gonna cover those in another show, but that's just some of the settings that we have now, those are just the basic settings.

Then we get into advanced stuff where you can change the label position, you can actually change the vertical alignment of that field with in relation to other fields. If you are familiar with css, you can actually put field wrapper and field classes on there, which enable you to have more control over styling fields.

And then we also have, so just going back a step, all of our fields, we've basically taken the HTML five spec for that field type and given you control over all the attributes that are available for those fields. We also have some additional functionality which we feel is useful for that field that isn't browser standard, but we've built that in just to make it easier for you so you don't have to write any custom Java script to, to make it do that.

So things like minimum work counts, maximum work counts. You can also put input masks on field as well. So for example, if you wanted to have, maybe you've got a special code which has to have two characters at the beginning. And four numbers after it. You can use this input mask feature to aid people when they're filling the format to make sure that they're entering it in the correct format.

You can also make sure that when the input mask is entered, that we validate that mask to make sure they've entered it incorrectly, in which case they can't submit the form until they've filled it correctly. More advanced features are things like pattern matching where you can put regular expressions in.

And I'm not even gonna go into regular expressions. That's a whole

[00:32:23] Nathan Wrigley: nother series.

[00:32:24] Mark Westguard: Yeah. That needs its whole week. And this things like transform as well, so you can force it to the other case, lowercase, so on and so forth. So that, this, these are just the options on a text field. Yeah.

Every single field type has its own set of options and as I say, there's about core fields and then. Ws form add-ons such as maybe the stripe add-on, or I know a commerce extension. Those introduce additional fill types as well. So you can actually plug additional fill types into this. If we look at a different type of fill, maybe a choice field, like a select field, if we track one of those onto the form again, you've got all the usual options in here.

I'm not gonna go through those now, we've gone through most of those. But if we go to options, which is where you choose what options will appear in that select dropdown, you'll see here we've got a data grid. At the top right hand side, there's an expand icon, which makes this a bit easier to see. Ah, nice.

Yeah, so you can expand any of the side paths just to make them full screen. And it just makes interacting with that a bit easier. Most form plugins, you're gonna be able to add additional options to that select dropdown. And you can do that with WS form. So I can click on add, I can add another option here.

Super simple. Now, you may want to have different values submitted for different labels that are shown. So the way a select field works is there's a label that you see, and then when you actually choose that, what gets submitted is a value for that particular option. So with a data grid, you can actually add columns.

So I can add a values column, and then I may actually want that value to be 1, 2, 3, 4. I. That's what I get when I receive that form from the user. Yeah. Yep. Now, because I've added that column, we want to choose which column is gonna be the value column. So I just click on here and choose values.

[00:34:20] Nathan Wrigley: Oh, I see. So whatever you label.

So it doesn't have to be labeled values, it could be anything you like.

[00:34:25] Mark Westguard: Got it. Yeah, so that could be anything at all. So I could put ABC there. Yeah. And then I would then just choose that down here for the value column mapping. Now this is a little bit like a spreadsheet, like a Google sheet, and I can actually add even more columns to it if I want.

And I could call this column A,

column B and column C. Now I can then choose those columns for those mappings. So if I happen to have a spreadsheet that's got a lot of columns in it, but I don't wanna use all of those, I can choose which columns I want to use for that mapping. So to give you an example of that, you can actually drag and drop CSV files into these data grids.

So I hear No way.

[00:35:09] Nathan Wrigley: That's so

[00:35:10] Mark Westguard: cool. So I, if I take this CSV file here, which is a CSV of countries, I can drag that into here and it'll pull that data in. And then you'll see all the columns that are available in that CSV file. That's, so again, what I can do is I can choose which column I want to be for the label and which column I wanna be for the value.

So maybe I wanna use the alpha three column for the actual value. So you can see where the power of these data grids comes in. On the right hand side here, we can determine which row is selected by default, I can actually disable rows if I don't want them to. Sorry if I want 'em to appear disabled on the front end.

And I'll show you this in a preview in a second so you can see how it looks. Yeah. And I can also hide row as well, so if I don't want these rows to actually show, I can actually hide those as well. Got it. Now there's another cool thing you can do with this and you. Do what's called an OPT group. So with a select field, you can actually make the list that's shown il ideologically grouped into what are called OP groups.

And I can do that automatically with data like this. If I go to settings and I do auto group by and then I can say on an group that by region, it will now go through my data and actually automatically op group that by that region column. And now we've got six different op groups. So if we save that and we preview it, you'll now see we've got our country list and it has been opt grouped automatically for you.

And see here's one, there's one stabled. Yeah. Yeah.

[00:36:53] Nathan Wrigley: And there's a bunch that you may have hidden as well, which we can't say. That is super cool.

[00:36:57] Mark Westguard: Yeah, we can't see those. Yeah. So that's yeah, so that just shows you the power of the data grid there. Now it goes a little bit further than that.

So we can also use this data source option up here to speed things up for you. So if you don't have a CSV of countries, we actually have some presets for you that you can use. So if you choose data source preset down here, you can actually choose some preset lists from our server. So I can actually pull in, stage Us, for example, click, get data that will pull it from our server into this data grid.

And there's your select dropdown automatically built for

[00:37:34] Nathan Wrigley: you. So it's a pre-built bunch of data sources, a little bit like the CSV that you just dragged in. Yep. It's if in effect it's doing that. Can you just show us those again, just to give us communication?

[00:37:44] Mark Westguard: Yeah. So let's go back to preset. Yeah. And then we choose the different presets here.

Okay. So you've got everything from. Business codes, colors, date, time options e-commerce, like currency lists, geographic lists personal stuff maybe for a survey. Yeah. And there's some more survey stuff down here as well, so you can use any of these. Free charge. We've actually got them on the website as well as CSV files.

If people want to download them they're very welcome to use those. You just click on, get data and it'll pull that data down and there it's loaded up for you. That is so cool. Now if you've built a data list yourself a data grid yourself, you'll notice at the top right hand side here, we've got an import CSV at a download export CSV as well.

So if I download that, click here, I'll get a CSV file from that data grid, and I can then drag that into another one. Another site I want. Yeah, so a little bit like the section library, but you can actually drag and drop the data that you've got in our select dropdowns. Now with select fields are just notoriously slow on forms on, on, in a browser.

Dunno why they've always been really slow, particularly when you've got lots and lots of options in there. And obviously lots and lots of options means there's a lot of data on your page. Yep. Now, you may wanna, you can actually speed that up by using a system called select two. Select two is a library and select two you've probably seen before where you start typing in a name and it'll select that from a list of options.

Yep. So normally with a form plug, you'd have to write some JavaScript to make that work. With WS form, you can just click enable. And it'll actually add select two to that field. So if we save and close that, and then we preview that, you'll see now select two is out on this field, so I can now type in Got it.

And it'll bring up a list of results. Now, we, there's also an option to enable Aja on that. Now what Ajax does is it actually removes the options from your page, and as you type in, it will make a request to the server to pull back options that match what you're typing in. Yeah, nice thing about that is it can speed up the rendering of your form if you use that option.

So that, that's as far as I, I'm gonna go right now with select two. It's just an option that I want people to be aware of because it can really speed up big, long list. So there you go. So there's two field types that we've gone through. You've got everything from, text area, a number field for literally typing a number in.

Even the number field has a multitude of different options in it or things like, maximum minimum. You can also do a step on it as well. So number tens or something? Yeah, exactly. Yeah. So you can do 10. A lot of people dunno. You can actually type in any in there as well. Which will just let it be any number of decimal points.

For what you're typing in. If you wanted to do, maximum two decimal steps, you would actually set that step 2.01. That's how it works on a number field. Okay. By default. That'll be one and just a whole number. Then we've got choice fields. You've got things like the select that I just showed you, check boxes and radios work in a very similar way to select.

So use that data grid to control what check boxes appear and what radios appear. You've also got a nice feature with these as well called cascading. And I'll show you a very quick example of that. Yeah, please. So if you go to Knowledge base and we'll go, we'll just do a search for it cause it'll save me building app.

Yeah. So let's do, let's see what we've got here. Chris. Cascading, lookups. This one's probably a good one to do. So very simple example would be like a, a vehicle make model and year selector. So when you click on Dodge, it'll then give you the models for a Dodge click on Challenger. And there's the years for that.

And that's called Cascading. Again, I'm not gonna go into that in great detail, but it is a feature of the select checkbox and the radio. So you can actually do that with checkbox Oh yeah. As well. And you can do it with radios, you can even do. That's great. You can actually do mixed as well. So I could say I want those two.

And then I wanna choose a sub region, and I wanna choose that as a select. So you can actually do it between different field types as well.

[00:42:13] Nathan Wrigley: Oh boy. Yep.

[00:42:17] Mark Westguard: Okay. And then we've got some more advanced field types. We've got things like file uploads file uploads. We could probably do a whole episode on that as well.

Yeah. But in its simplest form, it'll put a nice upload area on your form simply. I actually

[00:42:31] Nathan Wrigley: really like the way this looks on your forms. Yeah.

[00:42:34] Mark Westguard: Yeah. And you, if I just take a screenshot and then I can drag that up. Into there. Very simple for people to be able to upload files. Yeah. You can upload multiple files, single files.

One of the other cool features with the file upload field that other form plugins don't have. If, for example, you've got a form that you wanna use specifically on a mobile device, you can even choose which camera will be used when they click on that field. It's so good. Take a selfie or or what's called the environment facing camera, which is the outgoing camera on the back of your phone.

Or you can just leave that off and it'll pop up and ask you how you want, take your photo that integrates in with things like Dropbox and Google Drive. Or you can use the media library, you know how, however you want to use that. So that's one of the more advanced fields in WS form. Now we've also got mapping Google Maps, spam protection, which we're gonna go into in another episode.

And then you've got things like content. So if you wanted to add some description to your form, you can just drag and drop a text editor filled onto your form here, edit that, and then you can write some instructions, not literally some instructions, but write some instructions in there. And that will then appear on your site as some text to, to help that user out with using your form.

If you wanna add some internal notes about your form, maybe you've done something that you wanna remember about, you can actually drag a note onto your form as well, and you can write whatever internal notes. About your form that you want there. And that'll then only appear in the layout editor and not on the front end of the site.

Oh,

[00:44:17] Nathan Wrigley: that's great. It's like css, it's like commenting

[00:44:21] Mark Westguard: basically. Yeah. It's that's cool. Adding comments to your form and you can end as many of those notes as you'd like and you can put them wherever you want. So I'm

guessing

[00:44:28] Nathan Wrigley: the yellow is indicative of this won't show on the front

[00:44:31] Mark Westguard: end, correct?

Yeah. Yeah. Yeah you can add as many of those as you need. I find though, I've actually started adding those to our form templates. Cause I think it's quite helpful to have some Oh, does Buttons. You are always gonna wanna submit button on your form, otherwise people can't submit the form.

So you can a, you can put a submit button anywhere you want with Ws form. So a lot of form plugs, just have the submit button at the bottom of the form. It's kinda fixed with Ws form. You can put that anywhere you like. You can change the size of that submit button. You can put one at the top, put one at the bottom, wherever you wanna put it.

But you need at least one of those, otherwise your form's not gonna be much used. Yeah. There's also a feature as well. This is a pro version, but if I add a safe button to the form, simple as that. When I preview that form, you'll see we've got a safe button here. So if I put something in this number field here and hit save, and then I refresh that form and when I come back, that's gonna be filled out cause I'll save that form.

No JavaScript required, just add the save button. It's as simple as thats everything for you's. Also a saving continue feature that you can use. With email. So they'll actually send an email to the user, give them a special url, and then they can use that URL to come back to the form later on if they want to.

That's, that would be

[00:45:51] Nathan Wrigley: super cool with WooCommerce and things,

[00:45:53] Mark Westguard: isn't it? Yeah. Yeah. Yep. Yeah, and that's really helpful if you've got a really long form and people just don't wanna fill that out in one go by having a safe button on there. You can give them the option of coming back later on.

Yep. You've got things like previous tab and next tab. So here we've, as we've been mashing this form together, we can actually add a previous tab button to that form and we can add a next tab button to that form. And we probably don't want a previous tab button on the first tab, but anyway but if we look at that, you'll see us dis disable the previous button because we're on the first tab.

But if I hit next, it's gonna take us through to that next tab. So you can use those buttons to build up interactivity and build up the navigation for your form. And again, you can put those anywhere you want. You can put 'em at the top, put 'em at the bottom, star 'em however you want. It's very easy to use.

You can also do tab validation as well, which I'll show you real quick. So let's make a couple of fills required. Let's just make a dress line one and city required, just for example. And we'll save that. Now, you may not want people to progress to the second tab unless those two fields are completed.

So what you can do is if you go to form settings at the top right here, these are all settings that relate globally to the form itself.

[00:47:16] Nathan Wrigley: This is all the entire thing, right?

[00:47:19] Mark Westguard: Yeah. Yeah. And if we scroll down on this basic tab here, under tabs, you can go to tab validation. So if I check that and I hit saving close, you'll notice now that the second and third tab are now disabled, I can't click on them.

Ah, I haven't filled out everything I need on this first form. And there are various different ways of doing this. You can actually as well, if somebody hits a next button, I can say show the invalid fields. So if I hit Got it right, and if I got here and I tried to hit that next button, It's gonna highlight all the fields that haven't been completed.

It say, oh, fill those out before you hit that next button. You can even hide those tabs if you want. So if don't, if you don't even wanna show those tabs and you just wanna rely on that next and previous, I can say hide tabs, it's saving close and they'll hide those tabs for you. And now I've just got a pure next and previous got it set, perform.

Got it. Nice. Yeah. Yeah. So a lot of control over how that user interface works. Again, this is where WS forms a little bit more complex in some form plugins a little bit more of a learning curve. But once you to know where these things are, it really does become quite powerful. So those you buttons you've also got repeatable sections as well.

So let me show you what those do. Let's start with a fresh form, cause we're getting a bit a mess with that form there. Let's, so let's add a new section to this form. So to do that, you click on the add section icon. At the bottom of the form here. I'm gonna direct that to the top here. And we may just want to have a very simple section where we can add people to it.

So let's just do two fields. We'll put 'em side by side. First name, I'm gonna hit tab here. You'll notice that takes you

[00:49:10] Nathan Wrigley: the next one. Yeah. Accessible again. Nice.

[00:49:12] Mark Westguard: Yeah. And then we want to change this and make it repeatable so we can have multiple people. Super simple. In WS four, there's no coding required or anything.

Just edit that section and click enabled on Repeatable. If I hit saving close, you'll notice it's gonna do something for you. It's added a field automatically for you. So it's added some icons. And those icons are the user interface for that repeatable section. So if we preview that, you'll see it's added and add, delete, move up, move down Icon so I can put in first and last name.

Add and I could add another row or I could remove a row or I can move those up and down. These icons can be completely configured as well. So if we go into the icon settings, you'll see here are the icons that we're showing. We give you the ability to change the accessibility labels on those as well.

So those are fully configurable. And you can add additional icons. So you've got things like drag reset clear. So if I didn't wanna move up and move down, I can just remove those. It's saving close. You'll notice while I make changes as well, it automatically, yeah. You're not refreshing,

[00:50:21] Nathan Wrigley: are you? I was just about to point that out.

It's just refreshes itself. Yeah. That's just a nice little times over. Yeah.

[00:50:26] Mark Westguard: That's set, add, be there so you can actually drag and drop these and move them perfect around any way you want. So that's repeaters. And we'll go onto that a bit more in the, the next series that we do.

But it's just a nice way of, if you've got something where somebody maybe wants to type in a list of people or maybe an order form then you can use that repeater to enable people to add rows rather than having 10 rows already visible. You can use that repeater just to make that easier to use.

And again, that's, fully responsive. You can change the layout of this. You can even change the width of that repeatable section as well. So if we preview that, I hit add, I'll actually put it next to it. As you click add. So that's repeaters. What else have we got? I'm not gonna go into e-commerce today or we'll talk about that later on.

So I think, that's the basics of the layout editor. The other thing I just wanna quickly show as well is if we, let's just make some changes to this and we'll make resize these fields. We'll do whatever we wanna do with it. So you've got undo in Ws form as well. So this third tab here, next to the section library is undo and it remembers every step that you've got.

Wow. Form. And I can go back to the initial form and then go back to any part of that development process. So if you accidentally delete something or you've made a mess somewhere, then you can come into here and actually go back and get the form back to a previous state. You can also use the undo button at the top here to go back.

It's one at a time, right? Yeah. And you can redo as well. So if you wanna go back up. So you'll notice on that undo history, that little blue icon is moving up and down.

[00:52:12] Nathan Wrigley: Are there any caveats to that? Is, in other words, is that saved in the cash?

[00:52:18] Mark Westguard: It's saved in the browser. Yeah. Yeah.

Yeah. So if you come out of this session and come back in that und undo, history's gonna reset. Got it. We don't store every single form change on the server. Cuz it would just start kill you. Yeah. You'd have so much data in there. Yeah. Yeah. But it's all done. It's actually stored browser sites.

So if you do make a mistake while you're the form, you can go back.

And then, so this, let's just quickly look at the debug console on the front end. Let's go back to a simple form so that we've got something to look at. And when we preview the form, and this is a pro feature, this is not in light, but at the bottom here, you'll notice we have a debug console. And this debug console only, it only usually appears if you're an administrator logged in, this one appears to your users.

You can actually hide this as well if you don't wanna use it as a developer by clicking the close button at the right hand side here. But what this debug console does, it's a really useful tool for speeding up the development of your forms. And I'll show you how that's done. At the top here, you've got a tab called con.

This is showing that we've got contact us form loaded on this page. If you have multiple forms on the page, which again is something Ws form supports and some form plugin don't, you can actually have multiple forms on the page, even of the same form. So if you wanted an email sign up, like a newsletter sign up and you wanted that the top of the bottom of your page, then you can do that so that this tab here shows all the different forms Below that, under tools, you've got populate. Now this is the cool part. So if I've got a really complex form and I wanna test that, usually I've got type that all fill that form out every time I test it.

With this, we can just click populate. Oh, how about that? That is cool. Every time I hit populate, I get different data. There's also a populate and submit button here. If I click on that, it populates the form and submits it in one go. So super easy to test forms. And that works with pretty much all of our field types.

It'll even do signatures. So if I add a signature to the field, let's just put it at the top of the form. I'm curious to see what

[00:54:33] Nathan Wrigley: is

[00:54:34] Mark Westguard: John Doe comes up. So yeah, e every time you hit populate, you're gonna get different data. There's also a log tab here that shows you what's going on with your form. And we'll go into that in the next episode where we do an interactive stuff.

It'll show you any calculations that happen, conditional logic and things like that. And if there are any errors, then we've got an error here as well. So that, that this tool here can really speed up your form development process by using that populate feature. That's things we're gonna do. We wrap again, we're into in more detail in the next episode, but have conditional logic.

And this is the conditional logic icon at the top of the site here, and this is where you start to add interactivity to your form. So you can do things like if the first name equals A, B, C, then set the last name. Set the value to d e f. Again, you can expand this out to make this easier to read. So if we hit saving close on that, we gotta contact us.

If I then type in A, B, c, you'll see last name becomes d e f. So the conditional logic enables you to build very interactive. So the, that's a very simple example Yeah. Of, yeah. A condition, and we'll go into this in more detail, but you can do things like with color fields, check hue levels. You can check to see if the form is validated or not.

There's all kinds of stuff you can do with this and all of these options are contact sensitive to the field that you're editing. You'll notice as well as I fill out that conditional logic, it's highlighting the fields that I'm interacting with. Yeah, that's, no,

[00:56:15] Nathan Wrigley: I hadn't noticed

[00:56:16] Mark Westguard: that.

That's good. Yeah. If I choose something to do with a section, I'll actually highlight that section. So it just makes it a little bit easier to work out which parts of the film fill form you are interacting with in conditional logic. And then finally, actions just quickly touch on that. So actions run whenever a form is saved or submitted.

So usually when a form is submitted, so by default you're gonna wanna save that submission to the WordPress database so you can record it later on and look at it. You're gonna wanna show a message. The message would say something like, thank you for your inquiry, or, thank you for your booking, whatever it may be.

And you're gonna wanna send an acknowledgement email, maybe to you or to the user, or both, and you could add any number of actions that you want. So you could send an email to myself, and I could also, I can copy that. And I can say, send an email to the user and then I can adjust the fields in there to send that to the user.

And we'll talk more about that in our email deliverability one that we're covering. So that's action. So there you go. There is a whirlwind. I just wanna

[00:57:27] Nathan Wrigley: say that's where you would find like the sort of Mail Chimp stuff. It Correct. If you were using a Mail Chimp template that market automatically consume the data in one of those actions would be some something like submit to MailChimp or whatever it

[00:57:44] Mark Westguard: may be.

Correct? Yeah. And so you don't have to use those templates. So if you build a form and you find you want to push that to MailChimp, you can just say, okay, let's add an action. And we would do add to MailChimp. Got it. And then we would choose the MailChimp list that we want and then we would map those fields.

So I would say, I want to map this form filled first, name two. First name in MailChimp, and I wanna map the last name to the last name in MailChimp. So this is basically your form fields being pushed to MailChimp field. Yeah.

[00:58:23] Nathan Wrigley: Templates handle all that for you though. It'll do the fields.

[00:58:27] Mark Westguard: Yeah. It knows exist.

Yeah, that's right. There's also an auto map feature. Click on that. It'll actually analyze your form and analyze what you've got in Mount Jim and also map it for you. So

[00:58:40] Nathan Wrigley: these little nuggets of buried treasure mark, it's just a little icon here, which does a ton of work

[00:58:45] Mark Westguard: for you. Yeah, amazing. Yeah. So you notice it's actually Matt phone to phone number, so it finds the closest match it can and map size.

Yeah. Look for these icons. Just click on them and see what they do. Yeah,

[00:58:56] Nathan Wrigley: yeah, that's right. You've always got the on undo button,

[00:58:58] Mark Westguard: remember? Yeah. You can always go back and undo that if you make a mistake. That's right. Yeah. So yeah, super, super easy to modify an existing field and push that through.

Now, you can actually push it to multiple things. If you wanna push it to MailChimp and to Google Sheets, you can do that. You can actually just add another action and then map that across. I can choose what sheet I want and then I can map my filter accordingly. So first name, I can choose the column in my.

And my sheet. So yeah, you can add any number of actions that you want. You can even push things to Twilio as a text message. You can add them to Slack channels. You can, do pretty much anything that you want. There are some more advanced features on those, which we'll go through later on.

But there's things like, you can run JavaScript, you can run a WordPress hook, so when the form is submitted, you can actually run your own PHP code. That PHP code can actually return data back to your form. You can run a web hook, so you can actually query a third party api and then use that to populate a form.

Very simple example of that. We do a search on our knowledge base for webhook. This is just an example of another action. If I click random person, get random person that's gonna make a request off to this endpoint, and I'm loading that data into my form.

[01:00:23] Nathan Wrigley: There he is. Neal. Yeah. Osba.

[01:00:27] Mark Westguard: There he is.

Perfect person

[01:00:29] Nathan Wrigley: for that. Oh no, Hazel wa Hazel Wang. Yeah. That's sort. Yeah. Yeah that's so cool. So it's just consuming data. The action is to go out there, find something for these things, and then suck it back in. That's amazing. Correct.

[01:00:41] Mark Westguard: Yeah. And you may have your own web hooks that you wanna do that with.

You may have your own PhD p code that you wanna interact with and W's form enables you to do that. And later on we'll talk about post management, where you can actually use a form to create a post. Or actually pull post data into a form as well. So it goes on and on. Yeah, I was gonna

[01:01:00] Nathan Wrigley: say, it's almost like you know what you're doing, mark.

It's pretty amazing. So that was that in essence, that was our first one that was form building basics. And I think already you're getting a flavor that, if that's the basics. Hold on tight. There's five more to come and we'll take hold onto your hat. Yeah, that's right. We'll get the propeller, propeller helmet out

[01:01:22] Mark Westguard: and, yeah.

Yeah. One, one last thing I didn't show you. Oh, yeah, please. The top of the toolbox is you can actually search this list here. So if you can't find the icon you're looking for, just type it in here. So if I type Intel, for example, it'll bring up the phone. Yeah. So that, that's just a nice little tool for identifying a field that you wanna add to your form.

[01:01:43] Nathan Wrigley: That's great. Yeah. Thank you. So there we are form building basics. Next one. Next week is gonna be building interactive forms the week after that, preventing form spam, deliverability and form efficiency, not preventing form spam and deliverability. You don't wanna prevent deliverability, but you get the point number four, custom field plugin integration, number five W commerce number six, AI in forms.

So they're all, yep, they're all coming up. Just one quick question. We had right near the beginning, it was Excel, Vita ask the question. I guess it's a technical one. Are you using a C S framework for the front end?

[01:02:24] Mark Westguard: Yeah interestingly WS form will output HTML in different frameworks.

So we have our own framework which enable, which is basically what you'll see here very clean framework that you can install yourself. But if you are using Foundation or Bootstrap, we will actually output HTML native to those frameworks, which makes style forms super easy if you're using those frameworks.

If I show you the onboarding process with WS form, I'll go to the welcome screen. What this is actually doing behind the scenes is analyzing your theme to see what framework you're using. So if I do click start and I do, I'm a developer, you'll notice that we're asking if you are using a front end framework.

Now, if it detects bootstrap or Foundation, it'll actually say, are you using Bootstrap or Foundation? But you can choose these different frameworks here if you want. And yeah it literally outputs different html, all those frameworks. Good grief. Yeah.

[01:03:27] Nathan Wrigley: No messing. No messing. So Exel Vita, I hope that I hope that answers your question.

Yeah.

[01:03:32] Mark Westguard: And also if you're using Fred and Kevin Geary he actually has built a framework as well called A C S, which is quite popular with the Oxygen site builder. And he has compatibility with Ws form as well. So if you're using his framework, it'll work with that too.

[01:03:52] Nathan Wrigley: Coaching. But it's amazing.

I'm gonna, I'm gonna take this screen away. It'll just be me and you there now. There we go. Look at me. Still in heaven. Rob, Rob cans very kindly says good demo, mark. Thank you, Rob. Thank you, Rob. Appreciate it. And oh, yes accelerator says in answer, probably to me saying, I hope that answers your question.

Great. Great. And Marcus Burnett says, just go out of a meeting. You'll catch it by rewinding watching this. Set it in your diary. So we're on Wednesday, the 3rd of May. Exactly a week from now, we'll be doing the next one. And it goes on like that. You can predict the pattern. I think the sixth one, like I said at the top, we're not that sure when that's gonna happen, but the other ones yeah, the other ones are gonna happen in June.

We in some, yeah. And we'll be back next week for. Building interactive forms, and if it's anything like, as in depth as that, it'll be really worth watching. This is gonna be great. Thank you, mark. I really appreciate it. Yeah. Thank you for

[01:04:51] Mark Westguard: having me, Nathan. I appreciate

[01:04:52] Nathan Wrigley: it. That's all right. Let's just do that one more time, just for the fun of it.

Yeah. Look, we're not gonna wave

[01:04:56] Mark Westguard: on these. We're just gonna do no arms. Yeah. Yeah.

No

[01:04:59] Nathan Wrigley: arms, mark. I'll cancel next week's meeting, says Mark. There you go. Yeah that's Spirit Marcus. That's the spirit. All right. We'll see you again soon. Take it easy. Bye. Take care. Thank you. Bye bye.

Please leave a comment…


Discover more from WP Builds

Subscribe to get the latest posts to your email.

Filter Deals

Filter Deals

Category

Category
  • Plugin (4)
  • WordPress (4)
  • eCommerce (2)
  • Lifetime Deal (2)
  • Other (2)
  • Security (2)
  • Design (1)
  • Hosting (1)
  • Training (1)

% discounted

% discounted

Filter Deals

Filter Deals

Category

Category
  • WordPress (39)
  • Plugin (33)
  • Admin (30)
  • Content (18)
  • Design (11)
  • Blocks (6)
  • Maintenance (6)
  • Security (5)
  • Hosting (4)
  • Theme (3)
  • WooCommerce (3)
  • SaaS app (2)
  • Lifetime Deal (1)
  • Not WordPress (1)
  • Training (1)

% discounted

% discounted

SUBSCRIBE TO OUR

NEWSLETTER

WP Builds WordPress Podcast

THANKS.

PLEASE CHECK YOUR EMAIL TO CONFIRM YOUR SUBSCRIPTION.

WP Builds WordPress Podcast