Building interactive forms – WS Form Webinar Series, Episode 2

[00:00:00] Nathan Wrigley: Hello, mark.

Hello, Nathan.

How you doing? Good. Good? Yeah. Good. It's Mark. It's, look, it's hard. Got the right way. Look, Mark West Guard from W uss Forum joining us today to talk all about we're gonna have a conversation about politics today. Mark doesn't know, don't do that. Yeah. We're gonna talk about forms in WordPress, particularly WS Form.

Just a quick bit of context. Mark and I decided a little while ago we'd throw together this series, so we're doing this live. Because it's a good way of doing it. You never know. An audience might show up, maybe not, but the principle really is to get the content created and then he can put it where he puts it.

I can put it where I put it. He can link to it and so on and so forth. But because we are doing it live, if you fancy dropping in some commentary, last time we had a few people who asked a couple of questions. So if at some point today you are confused or you want to know, Anything about WS Form? Mark knows the answer and if he doesn't know the answer, I don't know who does.

But yeah. So if at any point during the course of today's presentation you wanna drop in a question, I'll try to provide a little bit of time at the end. If not, we'll just end it a little bit earlier. But just a couple of quick bits of housekeeping. If you do feel that, somebody might benefit from this, just send them to that url.

It's wp builds.com/live. Send them there and if they're logged into a Google account, they can comment cuz it's YouTube comments. If you're on our Facebook channels, then you have to go through a further step. You have to go to chat dot restream io slash fb. Otherwise we won't know who you are.

Facebook keeps that information secret. It's about the only thing they do. So there we go. The pitch is over. How has the last week been? My, I'm sure you were inundated by sales.

[00:03:56] Mark Westguard: It's we actually had some really good feedback from the last week. Oh, did we? Yeah, we had, yeah. People just saying thank you and just by watching it, they've learned a few things they didn't realize that it could do before.

So Oh, that's a great, is that Yeah. Value in this? Yeah. Like you said, we're not looking for massive. Viewing during it. This is really a long-term resource that we can post and let people access

[00:04:18] Nathan Wrigley: later on. So I'm posting them all on the WP builds.com website and each time I produce a newsletter, I'm dropping in the link.

So hopefully people have found it. In fact if you go to the wp builds.com website and at the top we've got, a menu as you might expect. And we've got one called archives. And the demos archive is where this is living, so you'll be able to see them all. In there. And yeah, that is, that's nice.

Okay, so last week we touched on the sort of foundations of what it was that we that you do in WS forum. We just made a beginning showed around the interface, and so on and so forth. And this week we're gonna step the pace up a little bit. You wanted to just do a little bit of a slideshow first, didn't you?

Shall I share that

[00:05:08] Mark Westguard: slide before? Yeah, just a few things to, to run through. Yeah. Okay. So first of all, wanted to mention the special we have with WP Bills. We didn't mention that last week. And if you are interested in buying WS Form, you can get 20% off through WP builds. And if you go to wp builds.com/wp builds deals you'll find the offer on that page and it's 20% off, as I said, using coupon code WP builds.

So yeah, take advantage of that.

[00:05:41] Nathan Wrigley: Cool. Thank you so much for doing that. That's really appreciated. Yeah.

[00:05:44] Mark Westguard: So today we're gonna go through interactive forms. And first of all what is an interactive form? And I must admit I went on chat g p t to try and get some explanations that work well. But this is what it came back with.

An interactive form provides real time feedback and dynamically adjust its behavior based on user interactions. I thought that was a good summary of it. The interactivity makes a form engaging user-friendly and efficient in collecting data. So in summary, what we're really gonna be doing is switching things on and off on the form to make that form a bit easier to digest by the user.

So if you've got a form with say a hundred fields on it, you don't necessarily need them to fill out all of those fields. So you may switch off sections of fields or individual fields to make that easier to digest. And that will hopefully improve conversion ratio as well, which is ultimately what we want with a form.

Nice. So there's several ways In WS Form, you can make a form interactive. You can use conditional logic, and we're gonna touch on that first. And that's where basically where you are checking a value or some other element on the form. And then based upon whether or not that's true or false introducing behavior on the form, maybe hiding or showing something.

We have variables. So you can use, say, hash count, for example, to actually do calculations on a form to help a user out. So you could use that maybe to make a mortgage calculator or car payments calculator. Cascading fields are where you basically drill down through information, perhaps with a car that would be make model style.

So cascading fields can be used to drill down users to information they're looking for without giving them a massive list. So you almost browsing through categories. Web hooks. They web hooks enable you to make calls off to. Third party or even APIs that you have developed, and the information you get back from that web hook you can incorporate into that form.

So you can take maybe something somebody's typed in, send that off to a web hook, get the data back, and then use that and show that on the form itself. And then actions are a little bit more advanced. That's why you can actually run things on the server, such as a WordPress hook. So you can actually run p h p on your server, send information back, and then show that on the form.

So there's a variety of different ways that you can make a form interactive, and we're gonna run through some of those

[00:08:18] Nathan Wrigley: today. I love all this. This is where it's really gonna shine, right? So that's, yeah.

[00:08:23] Mark Westguard: This is where the

[00:08:24] Nathan Wrigley: power comes out. Grunt. Yeah. Nice. Just in case you are interested, we have done one episode so far.

I would say if you're watching this live, just keep, stay with us for this one probably. And then you can always go back and watch that one and it, that will, Mike will be able to guide you around the interface. So if the interface looks unfamiliar and you've never seen it before, there is the previous video number one in this series, which will give you all the low down on how to navigate the UI of WS Form.

So shall I share your screen at this point? Are we at that? Yes. Yeah. Okay. So let's do that. Let's get your screen.

[00:08:58] Mark Westguard: Here we go. Alright, so yeah last week we spoke about templates and there is actually a demo template in WS Form. So if you click on the demo tower and then you go to conditional logic and click use template, there's a little template that we're gonna run through now that just shows you how the conditional logic in WS Form works.

Let me just preview this so you can see what we're looking at, just for a bit of fun. So what we've got here is a rating field and it's asking us to give it a five star rating. So if I click on that, you'll notice a field appears and then this is saying drop me down below 50. If I bring that below 50, another field appears, it's nice, a bit bigger, so we can see it and choose the second radio button and it shows another field.

If we scribble in the signature field that then it shows a color field. If we change that color to a darker color, it will then ask us to type three words. We do that, lift it into two check boxes, and then that shows a button. Click the button and we may it to the bottom of the conditional logic. Nice.

[00:10:03] Nathan Wrigley: Exactly. That's so contrived, but so cool at the same time. Yeah,

[00:10:08] Mark Westguard: it's utterly random, but it shows you what conditional logic does. So really, so what we're doing is the conditional logic is just analyzing what state of field is in. And based upon the rules that we give it, it's then gonna show or different things on the page.

So let's let's start off with some really simple conditional logic and I'll show you how that works. Now, conditional logic in WS Form is what we call form centric, not field centric. And what I mean by that is a lot of form plugins will have conditional logic on a field. And it may say, if the value of Field X is equal to something, then show this field.

And really that's the extensive conditional logic with a lot of form plugins. They don't really go much further. So we wanted to make that a bit more powerful and a bit more fun. So what I'm gonna do, I'm gonna add three text fields here, and we're gonna open up the conditional logic, and that's done by clicking on the conditional logic icon at the top of the layout editor.

And here's our conditional logic list, and you can add as many different conditions that you want for a form. What I'm gonna do is I'm gonna expand this out and make it a bit bigger, and then we're gonna click the add row icon on the right hand side here, and that will then create a new condition for us.

So you can call that whatever you like just by typing in a label for it immediately. And the first thing we're gonna look at is the if condition at the top. So the if is basically gonna say if something equals or doesn't equal is greater than or less than, or whatever it may be. Then if that's true, it will then run whatsoever under then.

If it's not true, it'll run whatsoever under else. So let's do a really simple one to begin with. So we'll say if, now when we click on that, you'll see that we've got several options. We can do stuff at a form level, a tab level, a section level, or a field level. You can also do stuff at a user level as well.

So for example, I could say if a user. Is logged in or has a role or has a capability. So you can actually switch things on and off on the form based upon the user's roles or capabilities. But we'll stick with a field for now. We'll just do if a texts filled, so if this texts filled, and then we choose the next dropdown along and you'll notice there's a ton of different stuff that comes up.

Wow. Now this list is, Sensitive to the field type that you have selected in that first column there. So for a text fill, we can say the usual stuff, does it equal value? Does it not equal, does it contain a certain string? Does it start within with is it blank? Not blank. But there's also some more advanced features does the character count equal something?

So you could use that to say, okay, you've typed in too much, for example, and you could show a message. You can do it on word count. You can even go as far as matching JavaScript, RegX expressions. So if you're familiar with Redx and RegX, and we said in the past, we're not gonna go into Redx in this tutorial, but you can actually do RegX checks with this as well.

Furthermore, you can also check if a text field is validated or not validated. You can add things to a text field such as minimum character count, maximum character count. You can add pattern matching on them and things like that. So you can check to see whether a field is valid or not.

You also have events on pretty much every field as well, so you can say, has this tech field been clicked on? Has there been a mouseover event on it? Ha has there been a non focus event on that text field? So you can see there's an incredible amount of different stuff that you can check. Wow. Yeah. With just a myth condition on a text field.

So let's do something simple to begin with. We'll just do equals. Let's just put a, B, c in there. You can determine whether you want that to be case sensitive or not. You can switch that on and very easily with this checkbox. On the right hand side, you can also add additional conditions to an if statement.

So you can say if text equals A, B, C, and then we could say, or the text equals d, e, F. So as well as having the ands and alls between these different conditions. So basically just to explain alls and ands. This would be true if text equals A, B, C or the value is d e f. If we change that to, and that obviously would never be true cuz it's not gonna equal A, B, C and D, E, F.

Yes. But we would perhaps have a second text field and we could say, if that equals d e f, then run this. Yep. You can also do grouped, ands and alls, so I could add another group. And I can basically build very complex if conditions using these nested, ands in all groups here, we'll keep it simple.

For now, we're just gonna do an and between these two values. So on the, then we can then tell WS Form what we want to do if that condition is true. So we can, again, we can do stuff at a form tab section, and a field level. You can even run actions as well using conditional logic. So if you wanted to fire an email, for example, when that condition is true, I can say run that, send email action immediately if this condition occurs.

So there's incredible amount of stuff that you can do when a condition is true or false. Let's just do something on that third text field for now. So we'll just do text field and then here are the options we have for a text field. So we can set that visibility on that field to on or off. You can make that field required.

You can focus on it. You can even add classes to it. So if you wanted to use some CSS to adjust the dis how that field looks, you can actually add classes to it. So for now, let's do visibility. Let's actually make that hidden, if that's false, and make it visible if it's, sorry, hidden if it's true and visible if it's false.

So if we save and close that and we'll preview it, we type in A, B, C, D, E, F. Oh, hang on. It's not working. Must have something wrong with my conditional logic.

[00:16:39] Nathan Wrigley: Yeah, let's have a look. But this is normal, right? This is the process. Yeah. Let's just

[00:16:43] Mark Westguard: do, let's just make this a bit more simple. Let's just do A, B, C, we'll make that visible.

Yes. And hang on and intrude. Lifestyle. My mouse has run out battery. Ah, we'll just talk about it for a minute. Okay. Yeah. So the idea here is we're gonna say if the text filled seven 30 is equal to abc, then we're gonna make text filled 7 32 visible. Otherwise we're gonna make it hidden. Ok.

[00:17:11] Nathan Wrigley: Your text field seven 30, we can obviously now see, because you've got the two things side by side.

You've got your little sidebar and you've got the, you can see that the text field is clearly labeled as seven 30. Yeah. Are you able you are right, you are able to rename that ID to something a bit more like the,

[00:17:27] Mark Westguard: so the IDs stay the same. Oh, is it be, yeah. But you can change the label on the field so we can change text to be my input.

We could change the 7 32 to be my output. So yeah, you can change the field labels all the way through. And you'll notice that because we are looking at a condition, it's actually highlighted the fields in yellow. So you can see which fields on your form apply to that conditional logic.

[00:17:55] Nathan Wrigley: Ah, so in the previous example where you had the d e f bound to ID 7 31 that would also have been yellow. But because you've removed that condition, we're now seeing that at no point so far is the second field, 7 31 that's got no conditional logic applied to it. So on a complicated big form, that's super helpful, isn't it? Cuz anything yellow you've gotta inspect and see where troubleshoot the yellow ones not worry about the white

[00:18:21] Mark Westguard: ones.

Got it. Yeah. Yeah. Correct. Yeah. So if we save and close that right back here. Yeah. So you'll see if I type in a abc, there it is. Got it. Then it shows if we get rid of that, it heights it. Yep. And as we were just saying, so if we wanted to rename that. This is kind of stuff we were going through in the last week's video.

Yeah. Then we can make it look a little bit easier. That way when we edit the conditional logic, you are then gonna see those field names there as that's exactly

[00:18:50] Nathan Wrigley: what I meant. Yeah. Yeah. Perfect. Yeah. So the ID stays the same cuz that's something that's created by WS Form, but you can change the name to something memorable.

[00:18:57] Mark Westguard: Got it. Correct. Yeah. Yeah. So that's a very simple example. And then let's have a look at a different type of field. So if we add a, let's just for a bit of fun, we'll add a a color field. So let's put a color field under here and if we go back into our conditional logic and we'll edit that condition again, make a bit bigger actually let's just create a different condition.

So we'll do one based on color. And if we choose if color. Then you're gonna see here that the options have now changed. So rather than it so you can choose if it equals a hex value, if it has a hue level or saturation. A lightness. So we can say lightness greater than a per particular percent. So we'll do 50% brightness and then on, then we can say let's do, we'll put it, we'll put it in the output as well.

On the output, we'll do set value to bright. And dark.

[00:19:59] Nathan Wrigley: Okay. Got it. I think I know what this is gonna do. Great. Yep.

[00:20:02] Mark Westguard: Yep. So he's kind, getting the idea here. Yep. Yeah. What we'll do as well, you'll notice on the right hand side of conditionals here, you can actually disable. So just so that this one doesn't clash with what we're doing, just to be sure, we'll disable that.

Run the second one that could be useful for diagnosing really complicated conditional logic. Sometimes we have some users that maybe have a couple of conditions that clash with each other. Yep. So maybe an elf statement is blocking out something that another condition is doing. So by disabling conditions you can actually almost, use as a debug tool to work out what's not working.

Yeah. We go to, here we go to light. You say it says bright. If we get a dark color, it goes dark. That's cool. Yeah. And then, and that's just on a color field again. So every single field type has its own set of conditions that you can work with. So for example, a file upload filled if you wanted to do something based upon whether a file upload filled has something in it, we can get a conditional logic and we can say if file upload file count equals file count doesn't equal, has a file being selected, has no file being selected.

Nice. You can do stuff with a file filled. You can do things with a select dropdown. So if we add a select fill to the form and we go into conditional logic and we say if select, then you can say, has a rob been selected? Has any robe been selected? Has x number of rows been selected? You can also do stuff with select two, for example.

So Uhhuh select two on a on a form. We'll give you a nice drill input where you can do a search on that data and you can actually enable Ajax on that. So it's a bit more efficient cause then. With Aja, what it's doing is it's not loading all of the available options into the form. Those options sit in the background on the server, and when you query it, it'll make an Ajax request.

And then if results come back, it'll then show that on the form so you can actually determine whether or not that select two Aja has return results or not. Let's have a look at the

[00:22:15] Nathan Wrigley: events as well. Can I just ask a quick question? Sure. Just very quickly, you see you've got the stack of conditions, you've got three currently.

Do they run in the order from top to bottom? So is the hierarchy of that of significance

[00:22:28] Mark Westguard: or not? It is, yeah, it is hierarchy. You'll notice on the left hand side, There is a little arrow. You saw that? Yeah. You can actually reorder these, right? Okay. If you find that you need to adjust, most of the time you don't need to adjust that order, but there may be a case where the output of this may impact a condition below that.

In which case you would want that to be above or below it. So yeah, you can adjust that. Can I just hijack

[00:22:56] Nathan Wrigley: the conversation a moment because Absolutely. Richie, in the comments as asked a question. Yeah. And I guess if we move on, it might not be pertinent, so it's not sure if you're taking questions.

However, I'm curious if you could do this based on our value from another field in the form. And I don't, yeah. Yeah. So do you wanna just quickly answer that

[00:23:13] Mark Westguard: or Yeah, let's, yeah, let's show that. I apologize for clicking my mouse in and out. I've got the classic apple mouse that you have to charge

[00:23:19] Nathan Wrigley: up from.

Beautiful design. Lovely on top, but if you need to charge it completely unusable. Absolutely

[00:23:26] Mark Westguard: unusable. Yeah, it's ridiculous. It'd be nice if you could just leave it plugged in, wouldn't it? Yeah. So yeah, let's use the und undo tool for a second and we'll go back. To just the input A and input B that we had.

So yeah, this kind of bleeds into the next thing we're gonna talk about, which is A is variables, right? Let's go back to this. So we're back to input A and A, B, C. So when we have A, B, C in there, it's gonna show input the output. Let's make it so that when input A equals input B will show the output.

So what we'll do is on input B, let's just put a default value in there of a let's put something different in there. X, Y, Z. We'll hit save and then we'll go back to our conditional logic. Excuse me. And here we're saying if input A equals A, B, C, so we don't want to use A, B, C, we want to use the value of input B.

Got it. The way you do that is you use a variable. So we can put hash filled and then we put the field ID in there, 7 31 cause we want it to match input B. And you'll notice that we've, even though we've typed that in, it's actually highlighted input B it know you wanna work with input B.

Yeah. Yep. Let's save that. And now if we type an X, Y, Z on input A, it will only show when it matches input B. Got it. Oh, you can mix up variables with regular techs. So we could say, if input A equals A, B, C, and then the value of the hash field, 7 31, then show the output. So for that, if we save that and go back here, we'd have to type in A, B, C, X, Y, Z, and then it will then show the output.

So you can combine variables with regular input. Let's have a quick look at, did that answer,

[00:25:20] Nathan Wrigley: Richard? Yeah. Yeah. I dunno if it I think it would have done, and then he answered a asked a follow up question. I dunno. If you want to go into that now, you can see it. I'll raise it. And if it's something you wanna hold off until the end, we can, he says.

Okay, great. An example that I could see being used would be you have a dropdown select field. Yeah. That's dynamically populated with a custom post type of teachers. Yeah. And then after a teacher is selected, yeah. It will display basically information about that teacher. So in this case, the classes that person teaches.

So we've got a custom post type, it's called teachers, and if you select a particular teacher, it shows they do biology, history, math, or

[00:25:54] Mark Westguard: whatever. Yeah. Yeah. I think my posts are empty. So we could show a quick example of that. Oh, brilliant. Well done. So let's do, we'll just very quickly, put some data in here.

Yep. Teacher one,

[00:26:08] Nathan Wrigley: Validation photo. Oh, have you got some conditional things there? Yeah,

[00:26:12] Mark Westguard: I've got some conditional I've got some ACF stuff in here, so let's just put. Teacher one WS Form.com. Let's just try that.

[00:26:22] Nathan Wrigley: Oh, I see you've got a mandatory email address

[00:26:24] Mark Westguard: in there. Yeah, because I wanted to show the integration with a CF eventually.

Okay. Let's just add another one. Teacher two, I'm guessing. Teach teacher

[00:26:35] Nathan Wrigley: two in there and teache[email protected]. Yeah, I know what you are gonna do. Mark, you've

[00:26:43] Mark Westguard: got

[00:26:43] Nathan Wrigley: me sass. I've got you sass. Yeah. Simple stuff. Yeah. Yeah.

[00:26:47] Mark Westguard: We'll do one. Let's just quickly do one more. Okay. Cool.

[00:26:49] Nathan Wrigley: Teacher three by any shots.

Yeah. Yeah, I can do it. Teacher four, just to throw you. Yeah, that's right. Yeah. Just to keep me on my toes. I'll tell you what, Richie, you're getting the best outta mark today. Yeah, that's it. Yeah. Getting

[00:27:02] Mark Westguard: the full service. Yeah. So there we go. So we've added some posts now. So let's refresh this.

And so Richie mentioned adding a select field. So we'll go to select. And we're gonna open that select filled up. And he wants us to populate that from those posts, correct? Yep. So we're gonna go to data source, we're gonna choose posts, and we're gonna choose. Now this would obviously say teachers, but we don't have that custom post type setup.

So we're just gonna choose post. And if we go down here and we do get data as our teachers. Yeah. Nice. And so if we hit save on that. Now let's just double check something on here. Now because the data is dynamic, we don't allow choosing by row because if you, if we said, okay, choose row three, that dynamic data may change.

You may add another teacher or remove a teacher. Got it. So what I'm gonna do for now is I'm gonna map the title. Title, right? Yeah. Just for arguments sake. Yep. Yep. To the value that will be selected for that select field, just so that we know what we're working with. Yep. Okay. So we'll go back to conditional logic.

Now let's just delete the conditional logic that we've got and add some. So we're gonna go if the select field, and then we can say the selected value e equals teacher two, for example. And we'll save that information. Now this is not gonna be

[00:28:26] Nathan Wrigley: an no, it's not gonna map exactly cuz we don't have the

subjects,

[00:28:29] Mark Westguard: do we?

But yeah, I don't have all the details in there, but just for argument's sake, let's just create a text editor field here. And then we'll maybe make that information about teacher two. Was it teacher two? I chose? It was, yeah. Yeah. Okay. And then in the conditional logic in here, we'll then say, okay, if that's true, then we'll make that section about the teacher visible.

Got it. Save that, preview that. So we want to go, oh, hang on a minute.

I must have done something wrong with this logic. Let's look,

[00:29:13] Nathan Wrigley: if selected value equals teacher two, then you've also got an else. I dunno if that's important.

[00:29:19] Mark Westguard: Yeah. I don't know. Let's see, let's try switching that text editorial on instead. Visible,

selective vape. Cause that should work. Let's see. Two. Yeah, we go. Yeah. So if it's anything other than that particular value, then it's gonna Yeah. Show, show that information on. And

[00:29:44] Nathan Wrigley: presumably in the case of that being a custom post type, you, instead of saying a text editor, which has just got the hard coded data of teacher two, it could dynamically pull in Yes.

The, I dunno, the repeater field in a cf, which is all the subjects that you Correct guard. Yeah. No, it works Richie. It can be done. It

[00:30:02] Mark Westguard: can be done, yeah. And if we go to let, just try something else, we gotta select here. You'll notice that we can actually include a ACF field data. Oh, nice. Yeah. In there.

So let's see what we've got. Post, I don't think I've got much fun stuff in there. You

[00:30:19] Nathan Wrigley: you sent the email, didn't you? Yeah.

[00:30:21] Mark Westguard: Let's email. Let yeah. So there's, if we add that and then go to get data. You'll notice now if we scroll right, we've got the email. So

[00:30:30] Nathan Wrigley: you've added that into the list of consumable content.

[00:30:32] Mark Westguard: Yeah. I put teacher four instead of teacher three, but

[00:30:35] Nathan Wrigley: alright. We're after teacher two. It's

[00:30:37] Mark Westguard: fine. Yeah. Yeah. Let's just try something on input b I just wanna show, cuz this kind of goes onto the next section, which was variables we're talking about. So if we go to input a on here and then the default value, what I'm gonna do is I'm just gonna put hash text, then I'm gonna put hash filled and then we'll put 7 36 in there.

Now what, so what that's gonna do is it's gonna pull out the value from that select and show that in this default value for that input. Got it. And the hash text qualifies it and makes it dynamic so it'll update automatically. Got it. Okay. So if we

[00:31:17] Nathan Wrigley: hit something new just

[00:31:18] Mark Westguard: Nice. So if we put teacher one, you'll see that the ID of teacher one is now gonna appear there cause we're asking for the value.

So we go teacher two, then we've got the value in there. So you'll see that's changing dynamically. Yeah. Now what you can do is you can actually choose which column you want to appear because we are using data grids. This is what, this is one area where WS Forms very different. So the four, the syntax for that is you actually put a separator for multiple values.

Yep. And then we're gonna put the column, which would be email. Yep. So if we save that and then look at the form, you're notice, oh, ah, we

[00:31:57] Nathan Wrigley: were so hopeful. What did you do? We were so hopeful. Yeah. What did you do? What is that called? Is it email? Was it called Email? Yeah.

[00:32:05] Mark Westguard: Let's have a look. Option. James's breaking today, isn't it?

Let's

[00:32:11] Mark Westguard: see. Let's go get data. And Oh, you know what I made? I not have saved it. That was probably the problem. Yeah. Let me just go title save and close. Let's see. That's each value. Yeah. I dunno why that's not working. I must have

[00:32:30] Nathan Wrigley: maybe a bug, maybe not. Could be a bug. But

[00:32:33] Mark Westguard: that's very unusual cause we have a lot of people using that.

[00:32:36] Nathan Wrigley: I know Mark well enough to know that this is gonna annoy the accountable. Yeah,

[00:32:43] Mark Westguard: it is. Yeah. Email

7

[00:32:48] Mark Westguard: 36. It's weird cuz we've got a demo on the actual site. It does it. I'll show that in a second. Then I have, this is our test server. Yeah. Is email. So that should work a quick look on the W form site.

I'll show you. So we do search for column and we'll use fill column, see if this one works. Yeah, so here, this is an example of that, actually, I dunno why it's not working on that other site. Cause this is actually running exactly the same version. But here's an example of a data grid where we've got several rows and several columns in that data.

And what we're doing is we're using exactly the same format as I was just showing you. So if I click on product one, it's pulling out the label column into that label field. Yep. So you'll see that there for color, which putting out that color column into that particular default value, material width and length.

Enables you to pull multiple columns out and you could then use those columns in a calculation if you wanted to. So for example, if you wanted to show the area, you could multiply the width by the length using our calculated fields to show you that in a second as well. So that's another way of making data on a form dynamic is by putting out data from different columns and then putting those into.

The default value of fields now. Yep. You can go a little bit further than just setting the default value as well. Let's see. So if we do a search in here for label maybe Yeah. Dynamic label placeholder and how as well as changing the the default value of a field. You can also change the label, the placeholder and the help tax dynamically as well.

So I can actually change the label by using Oh, yeah. Hashtags hash field on an actual label. You can change the placeholder, you can change the help tech. So you may wanna change the help text based upon different things that have gone on, on, on the form. So that can all be done dynamically as well. So the variable we're using for that is hash text.

So let's just start a a new form and we'll just build a blank form out. And let's just add a couple of texts filled. So in here, if I put hash text hash filled, if I could type properly 7 38 and save that. So all we're doing now w form, we wanna echo the value of that into that second fill.

So if we preview that, whatever I type in there, ideal in the below it, that could be useful for maybe an address and a shipping field. So you could copy address line one to address line two goes a little bit further than that, so not just text fields. You can do that with other things, maybe like with a range slider.

So if we have two to, this can actually copy the values between those two elements as well. So I can put hash.

If I save that down, I can actually do that in multiple fields as well. So if I wanna show that in a text field as well, we can do that too. So if we preview that, you'll notice now the rainers are in sync with each other cause we're copying the value between them and we're putting that value into a text field down at the bottom.

You can also put that in other types of fields. So if you wanted to maybe put in a text editor field, which text editor fields let you just put some text on the field, maybe some instructional information, but we could maybe put a, an H one, put the text in there, save that, and now we've got that shown. As, a nice piece of text in a text edit, it's filled at the bottom.

That's great. In addition to that, you can then do calculations. So this is where the, so we've done hash texts, so hash text is basically used for copy of one value to another. Got it. You can also do hash calc. So if we do that, let's go. Let's change that hashtag to hash calc that at the moment's gonna do exactly the same thing.

It's just gonna calculate that value, which is gonna give you literally that value. But we can do something else like multiply that by 10, make that bitty, you can see it. So we're gonna take the value of Field seven 40, and we're gonna multiply that by 10. We save and close that and preview it. You'll now notice it's now doing some calculation on that.

You can do calculations between fields as well. So if you wanted to multiply that by the value of Field 7 41, which is the other rain slider, this

[00:37:33] Nathan Wrigley: number's gonna get big quickly.

[00:37:34] Mark Westguard: Yeah, it's, yeah. Yeah. So you can see now it's multiplying. These two values together. That's so cool. Yeah. And you can load that value maybe into a hidden field and then use it in other parts of the calculation to build much more complex calculations.

So if we go into calculated, actually let's go to WS Form up here. We'll go down to the footer. We've actually got a template library you can have a look at, and we've got calculators. So these are some calculators that are actually built in to WS Form that you can load. You can actually download these, use them.

They're also in our template library. And this, these give you some examples of how to build out some more complex forms. So here, for example, is a mortgage. Nobody likes looking at these figures, right? Yes. But yeah, you can use this to build out a mortgage calculator, a car payment calculator, you wanna, with those

calculators. Here are those demos and we can go into mortgage calculator, for example. So that's just

[00:38:40] Nathan Wrigley: pulling in the template that you've just Oh, and there it is. Okay. There

[00:38:43] Mark Westguard: it is. Yeah. So there's the horrible looking calculation that is used to work that out. But if we look at that, what this is doing, it's using hash e-commerce underscore price.

And what that will do is format that number into a nice looking price based upon your currency settings that you have. If you're using w actually it'll use those w currency settings and then the hash calc, everything between here and that second bracket. Yeah. Is the calculation used to work out what the monthly payment is?

You'll notice there's a hash pow Yeah, I was gonna ask that. Yeah, so if we go to our knowledge base and we'll go to calculated. There are a bunch of different kind of arithmetic and other math variables that you can use. You've got basic stuff like addition, subtraction, and you'll see this is very similar to what we were doing.

You've got hash capital.

[00:39:38] Nathan Wrigley: Yeah. So that's an ad of subtract to star and a

[00:39:41] Mark Westguard: slash Yep. And then on the math variables, you've got some more complicated stuff that you may need for working out some complex stuff. So we, for example, we have some customers that will build roofing calculators or calculated costs based upon window types and stuff that you are using.

So there's a lot that you can do with this to build some quite complicated calculations. You can also do average as well between fields. So if you've got four different number fields here, you can work out the average using the hash AVG variable. And in that, you then just put a common separated list.

Just working out the

[00:40:20] Nathan Wrigley: mean of that. Is it, yeah. Yeah.

[00:40:22] Mark Westguard: Yep. Of, of those numbers. Yeah. It'll even work with repeatable sections as well. So it's, this gets a little bit complicated, but here is a section that's outside of a repeater here. We have two repeatable sections. So we've got two roti.

You'll notice we've got the little icons here that let you add and remove rose. And then we've got another normal section below that. But let's just have a look here. So this is outside of the repeater? These are inside repeaters. Yep. And within here we are saying, copy this, the value of this range slider into this row.

So as I reduce that down, you'll notice that the repeatable section there is adjusting according to what's outside, but it's doing it to both repeaters cuz we've got two. If I had another row, it'll do the same and automatically it'll copy those. This one here is calculating 100 minus. Yeah. Yeah. So if I adjust the outside value, they all adjust.

If I adjust it inside the repeater, only that row will update. Got it. So you see there's a chain reaction going on. Yeah. And the way we do that is that all of our calculations, our conditional logic and everything, they use standard browser events. So what I mean by that is if I move this and it adjusts this value here, we fire a change event on that.

Rain slider, which in turn will trigger any other calculations that rely on that field. Got it. And it, but it won't run it again if the value doesn't change. So we don't get any, crazy loops going on. So the nice thing about that is if you've got some custom JavaScript that you are running and you wanna do it based on events, it will work with WS Form.

So you can actually mold your own JavaScript into this if you really wanted to. But that's way off topic. That's fun though. Yeah. Yeah. So that's there's a lot that, that, that does. Let's talk about the hash if and hash end if variable, which is another thing that you can use to make fields dynamics.

Let's just do a search for if end, if we find a lot of useful information in this knowledge base. So the hash if hash if and hash end if variables let you switch content. On and off based upon an expression. A little bit like conditional logic, but it does it in line with whatever content that you're playing with.

And here there's an example here. So what we've got is value A and we've got value B. And this is saying, does value A equal value B? Yes. Value A does equal value B. So if I change that to a banana, you'll see that those values change dynamically. Yeah. In that concept. Yeah. Yeah. So again, if I put that back to apples, if I put something else at the end of it, you'll now see it doesn't match it.

But it does contain it. Yeah. Yeah. So if we go to back to temp, I believe we've got this as a template, let's have a look. Demos, let's see. If not, we can download it and I can show people how that works. Yeah. We don't this that'd be a good. Good time to show that.

[00:43:36] Nathan Wrigley: So this is, yeah, you just go to the website.

You can download that demo with that there, right? Nice. Yeah,

[00:43:41] Mark Westguard: so you can download that. That'll give you a js o file. And what you can actually do is drag that into a blank form. Oh, simple. And there's our hash if and hash end if form we're playing with. If we go into that message, we'll expand this out. Oh, hang on.

This might be, I'm trying to remember how I built this now. Yeah, here we go. There it is. Yeah. Now this is a little bit complicated, but you can see how it's working. It's just a bunch of ifs and end ifs. And here are the conditions within that. Yeah. To say whether or not it equals or does not equal. So we're saying if field 7 48 equals field seven 50, then show this text.

If it does not equal, then say, value eight does not equal. Now that's an example of putting that into an H G M L field. You can also put that into an email template, for example. So you can actually use those conditions in email templates to adjust how an email template behaves. So you could, for example, have a checkbox or a radio button with A and B and based upon A and B.

You could then show different content within that send email that gets sent out. So you can build dynamic email templates. We do have an example of that, so you can do, you do a search for custom html. I believe we got writing custom HTML and email content for PDF templates and email templates. Then this gives you an example of how to actually build dynamic templates in an email.

So by default, when you create an email in WS four, let's go to actions where that would be sent. And we look at that, send email action, it's a very simple template. It just has the email subject, you'll see that's got a hash on it as well. So it shows us one of our variables. And then we have a variable called hash email submission.

And that hash email submission will automatically create a nice looking summary of your submitted form, right? If you wanna build something much more complex or custom or dynamic, you can do that. And there's an example here of how to do that. So you can see here's a row that shows the field label and the value of the field within a P tag, which is the paragraph tag.

We've made that label strong. So if you are proficient in H T M L, you can use this method to actually build a custom template. You, and again, you can put those if conditions within there to switch fields on and off if you want to. Got it. You can even build nice looking tables for repeatable data if you want to.

There

[00:46:21] Nathan Wrigley: you go. This is amazing. Yeah.

[00:46:23] Mark Westguard: Yeah. So there's a lot you can do. I'm not gonna go into that in detail. Ok. Cause it's, we would be going on forever, but just wanted to show that the capability is there. So as well as having those dynamic variables on the form itself, we can also use those inactions and do things like that.

Just wanted to show back on the conditional logic as well. How to use events on particular parts of a form. So in its simplest form, let's just add a button. So we have what's called a custom button, where you can do pretty much anything you want with it. Let's add a custom button there and we will add some text and let's go to conditional logic.

And we can say something like, if that button is clicked. So you'll see here in the event section. Yep. The button got clicked. And then we can do, then, and then on that text field, let's just do, set visibility on it. We'll say otherwise text. Actually no, we're not gonna do an else on that. I'll tell you why we're not gonna do an else on that.

Cause the button doesn't have an else condition. Okay. So we'll save that and we'll make that text filled hidden by default so it doesn't show. And we'll preview that. Okay. So we hit the button and a text field shows Got it. Simple. So you can use buttons to show and hide content. You can also do that with tabs as well.

So if we go to, let's add a second tab and we'll just put a number filled in there, for example, and we'll go to conditional logic and we can say if that button is clicked, then tab will set that tab visible.

[00:48:06] Nathan Wrigley: Oh, nice. So this is like the next section button, right? You can't

press.

[00:48:10] Mark Westguard: Yeah, I can't, I mean we, yeah, we have navigation.

I know, but yeah. This will show you how that's done. Yeah, so if we hit that button, then that is then made visible, so you can actually use conditional logic to switch tabs on and off sections, on and off fields, on and off all kinds of stuff. Now, we do, as you just said we do have next tab and previous tab buttons built into WS Form already.

So you can use those, but if you wanted to do something custom, you could do that. So you can do, more crazy stuff with this. We do have some customers asking about form abandonment and what they can do to preserve data as someone is filling out a form. Now, obviously you've gotta be careful with GDPR and make sure that people are aware that you're doing things like that, right?

But for example let's do something like an email address. In WS Form, we have a thing called a save. So there's a form submission, which is when the form is actually submitted. There's also a save feature as well, and what save will do, it's very easy to use. If I just go down to buttons, we can add a save button to that form.

And if we preview that, if I just put something in here, like test to test.com and I hit save, that has actually saved that information as a submission in WS Form. If I refresh that page, it'll bring that data back cuz it has remembered that we've got a session in play. So what I'm gonna do, I'm gonna clear that session from the debug console down here, you'll see there's a nasty looking string here.

That's the session Id. We'll clear that. So when we refresh that form, that data's now gone. Now you may not wanna have a save button there, you may just want to save the fact that an email address has been entered. So what you can do is get a conditional logic. Let's delete the old condition. We'll add a new one.

We can say if the email go down to events let's do on change, then we'll go form and we'll run a safe. Whoa. Cool. Save and close. So if we watch this debug console at the bottom here, and I put in some data, when I move my mouth away, it's gonna trigger a change event. And you'll see now it's actually save the data in the background.

So you can use events to do stuff that the user may not necessarily see. So you could also do things like if the email address is changed here, then copy that email address to another field on another tab. So you may want to, if you wanna duplicate data at the point that it's changed, then you could do that.

It goes on and on, on. There's a lot more stuff that we can do. Let's just quickly look at the validation side of this as well. So we'll just create a very simple form. First, let's do, actually, let's use a contact us form. You may wanna run a save event or do something when a form has validated.

So you may not wanna save that data until the actual data that's been entered is valid. But let's just do another example. We'll put a text field here and let's say go into conditional logic and we'll say if the form is validated, then we'll set that text filled. We'll set the value to say validated.

Save that and we'll preview it. And now that is now empty. Let's now fill the form out.

We'll check that box and now the form is validated. That text now says validated, so you could do anything you want. Yeah. With that being validated,

[00:52:03] Nathan Wrigley: so that could be like, you finished this section, all of the required things are done. Move on. Yep. Okay.

[00:52:08] Mark Westguard: You would got, yeah. Yeah, so you could show, for example, we could add a message field, and in that message field we can make that a success message and we could put Well done in there.

Whatever you wanna put. Yeah. Yep. It's safe. Go back to our digital logic and then we can say, then message set. Visibility to visible. Delete that old bit there. So we've got, if the form is validated, we'll show that message. Otherwise, we'll hide it. Got it. Save that. Get it back here.

[00:52:40] Nathan Wrigley: Oh, you gotta fill it out again.

Sorry. Yeah, fill it out again.

[00:52:44] Mark Westguard: So you could use that to, to show a message whether or not the form is validated or not. Yeah. Now we would need to hide that by the default, obviously. I think that was maybe what was going on with the other stuff that we were doing. There we go. So we do test, [email protected].

Click on that and yay. Yeah. So you can switch things on and off by using that conditional logic. See, I think I wanted to show, trying to remember,

[00:53:12] Nathan Wrigley: you had data variables post meta, user meta. Was that

[00:53:15] Mark Westguard: it? Oh, no. I wanted to quickly show the the JavaScript cyto condition logic as well. So let's delete that condition and let's add.

A condition here to say form when a form is validated. Then you can also do this, you can do form and you can run JavaScript. So if you wanna run your own JavaScript when something happens, ah, the old alert. Yeah, the old yay. Yeah, save on that and go back to contact us. Now you

[00:53:49] Nathan Wrigley: gotta to fill it out again.

I'm not, am I? Cuz I've got a debug. Oh, that's true. You got the debugger.

[00:53:54] Mark Westguard: Yeah. I can hit populate and yay. It populates of course. And shows the alert. Nice. Yeah, so the populate feature is a nice feature because it automatically if you didn't see the previous video that we did, the populate feature fills out the form for you.

So when you're testing you can use that to very rapidly. Complete a form. So if I refresh this, oh, hang on, let's just save that. Save. It's gotta save it. And you'll notice here in the deeper console we have a populate button. When I click that, it puts different data in every time. So that's a really nice feature for testing forms.

And that is super cool. That is super cool. Yeah. Nice and quick. Yeah. So I think, that's most of the condition logic stuff covered. So there was a question.

[00:54:41] Nathan Wrigley: I say it was, it's Marcus Barnett. Hi Marcus. Thank you. He says, is it possible to show the next tab when the current tab is validated?

[00:54:52] Mark Westguard: Yes, you can. There's two ways you can do that. I'll show you the hard way first.

[00:54:58] Nathan Wrigley: Yeah. And then the builtin way. Yeah. Let's,

[00:55:00] Mark Westguard: so let's copy this tab. Let's just put tab two there. Tab one there, and we'll just put a bit of text at the top so that we know. This is tab one. And in this one we'll add some text to this one and we'll put tab two.

So just so we can, yep. See where we are. We'll preview that. So we've got tab one and tab two. So Marcus wants to show tab two if tab one is validated. So what we're gonna do is put some conditional logic in here and we'll say if tab one is validated, then tab two, set visibility to visible, otherwise make it hidden.

[00:55:50] Nathan Wrigley: Got it. So it's gonna be actually hidden.

[00:55:52] Mark Westguard: Yep. Hidden initially. Yep. Yep. So we'll put some, I'm not gonna use a popular tool on this just so you can see it working. Just put this down a bit and then we'll validate it by clicking this check box. And then there's tab two. There it is. Yeah. Now we can get to tab two.

Now there's an easier way of doing that, but it does show you how you can do that with conditional logic. Let's remove that conditional logic. Now, one of the nice things about WS Form is we have a lot of functionality built into it, so you don't have to build some of this stuff. So if we go to form settings in the basic tab, if you go down to the tab section, you'll see here it remembers the last tab that was clicked.

You can enable or disable that. There's also a thing called tab validation. And what tab validation will do is it'll prevent the user from moving to the next tab until the current tab you're on has been completed. So it's

[00:56:44] Nathan Wrigley: not a show hide thing, it's just a You can't get there. Yeah,

[00:56:47] Mark Westguard: you can't get there.

Yeah. Yeah. So this will actually disable it. Yeah. So you can't actually see it. It's only when I fill that form out.

But it will then enable that tab, right? I can then move to it. Now you, what'll happen is if I add on tab one, if I add a next tab button to it, let's just put it on the top so we can see it. It'll actually control that button for you as well. So if I fill this out and then we check that box, you'll see now that next yeah.

Button is now valid. So it actually, as well as handling the disabled on the tab itself, it'll handle any navigation elements related to the tab navigation too. You go a little bit further,

[00:57:33] Nathan Wrigley: so Go ahead. Sorry. No. I was just gonna say he's got follow up question and I agree, Marcus. It's probably not the best ux.

But anyway, he says, is it possible to automatically switch to the next

[00:57:42] Mark Westguard: tab? Yes, it is. Yeah. So you could do, and I'll show you how you do that. Let's get rid of the automatic. Let's have validation. Just quickly on that, you can also show invalid fields as well. Okay. So if someone clicks on the next button, it will say Uhuh and show all the Oh.

[00:58:03] Nathan Wrigley: As if you've submitted the form. Okay. Yeah. Got it. Yeah.

[00:58:06] Mark Westguard: That's cool. Yeah. But we'll switch that off just for now. It's save and close. So let's go back to our additional logic. We'll build that same conditional logic again. So we were saying if the first section is validated, that was it.

Then show tab two,

[00:58:24] Nathan Wrigley: and hide. If not.

[00:58:25] Mark Westguard: And then when we h show it, you wanted to move to the next tab. So the way you do that is you choose the tab and you say click it. Oh

[00:58:36] Nathan Wrigley: Yeah. Even close.

[00:58:37] Mark Westguard: Yeah. So we go into here. So it's currently hidden. Test, test that test.

[00:58:45] Nathan Wrigley: Here we go. Click that and then,

[00:58:47] Mark Westguard: oh, let's do that.

And let's move to tab two. Yeah. Got it. Yeah, there you go, Marcus. So it is possible, yeah, it's possible you can

[00:58:56] Nathan Wrigley: Slightly discombobulating, if that were to happen. Whoa. What went on there? C can I just throw something in quickly cuz we've got Sure. John, who thanks John for joining us. He says, how do you activate the debugger?

I'll show you how

[00:59:10] Mark Westguard: to do that. Yeah. So the debugger is a pro feature. It's not in light. So you'd need to have the WS Form pro edition. And then if you go to settings on the left hand side in the admin, you'll notice in the basic tab under preview, you've got debug console. And it sounds, John like you might have it set to off.

So you wanna set that either to administrators only or show always. So the administrators only will only show. The console. Oh, I've disabled my preview will only show if you're logged in as an admin. Yeah. So that means that regular users coming into the site won't see it. If you're still in the development process and maybe you want that debug console to be available to a client, perhaps you can set it to always on.

And then everybody would be able to see it and interact with that deeper console. Great. Thank you. Yeah and if you, when you go through the onboarding process with WS four, if you selected that you are quite new to forms, we actually disable that D console by default. So you can come in here and switch that on if you need to.

This incidentally is where you switch on and off the live preview feature of WS Forms. So if we create a form let's just do a contact us form. John says, thank you by the way, just so that you Oh yeah. So let's do that. Let's preview that form. So I'm gonna pull that form out just so you can see the preview on the screen at least.

Yep. If we adjust something on this form, maybe, let's see. Move way bit. Yeah, I get, get what you're trying. Bit squashed. Yeah. Yeah. But if I maybe adjust the width of the first name field here, you'll notice it updates in real time here. So it's just a nice, if you've got, a nice big monitor or a couple of monitors, you can actually interactively modify that

[01:00:56] Nathan Wrigley: for.

So that's the live preview toggle.

[01:00:58] Mark Westguard: Got it. Correct. Yeah. Yeah. And that's what that does there. So you can actually. Switch that on and off. Yeah. You can also choose which template you want to use for that preview. So we try to choose the correct one, but some themes have some funny layouts that you might not wanna work with.

Yeah. We have a full back here to blank page and that just gives you a very blank looking template preview if you want. So there, yeah. Thank you. There you go. Yep, that's that.

[01:01:25] Nathan Wrigley: That's all the questions so we can

[01:01:27] Mark Westguard: Keep going. Yeah. Yeah. So just another couple of variables I wanted to show people.

If you go to our knowledge base and type in variables, we've got a couple of knowledge base articles I just wanted to make people aware of. First of one is the variable reference. Now that one actually has a library of all of the available variables that we have in WS Form. There's a lot of them.

There really is. But if you wanted to say, show the blog name somewhere on your form, let's just show that. Then we can go into here and we could maybe add a text to editor filled and we can just put that in there, save and close. And then when you look at that form, it'll put in the actual blog name.

So you can use variables to pull in all kinds of stuff like the current date. You can even pull in post metadata as well. So if your form is on a post, you can use the variable post meta, so it's hash post underscore meta. And then this would be your meta key here. And you can use that to pull out data dynamically from the post to page, whatever custom post type your form is sitting on to put in data dynamically with that.

It's kinda handy in

[01:02:43] Nathan Wrigley: like emails, yeah. Email that goes out, you were on such and such a page or Yep. I don't know the calculated total was, or, yep. Yeah.

[01:02:52] Mark Westguard: Yep. Yeah. Yeah. I think we've got one, which is, I think it's request. Save.

[01:02:59] Nathan Wrigley: Oh, you've actually got, okay, nice.

[01:03:01] Mark Westguard: Yeah, so that will pull in the current URL and you can put that in a hidden field and map it somewhere.

We do have some tracking features, which I believe we went through on the last video that make that a bit easier. But, so you can use those variable. There's lots of different variables in there that you can choose from. There's actually a little hamburger like on here as well. If you click on that, you can use that to insert the fills.

So if you can't, see a field name, you can actually just click on here and pull that in. Nice. And all the other variables are in here. There's all, all manner of stuff that you, there's a lot. Yeah. So yeah, have a play around with those and that variable page shows all of them.

We also, if you type in the word cheat into knowledge, into the knowledge base, we've actually got a variable cheat sheet, which shows you some of the more common things. You don't have to trundle through that variable list to find what you're looking for. So you've got things that we were showing today with the.

Putting in a column dynamically from a data grid. You've got things like calculations. Let's just see. So this is quite a useful one. Submit id if you in an email, you can actually show the submission ID as a reference.

[01:04:12] Nathan Wrigley: Oh. So you can track that down real quick.

Yeah.

[01:04:15] Mark Westguard: Nice. So you could say, thank you for your inquiry. Here's your ID number and that would give you, submit id, and then you can use that in submissions to pull that back. The yesus that we went through. Stuff like the blog name the blog date, blog time. You can even put in stuff from query variables as well.

So I'll show you a quick example of that. If we go into our form and our default value here, let's put hash query variable. Test like that. Save. So if we preview that form, there's nothing in there right now, but if we add a query variable up here, put test equals 1, 2, 3. It's gonna pull in that query variable we need.

Nice. So you can pass

[01:04:59] Nathan Wrigley: data from around all over this place. Yeah.

[01:05:02] Mark Westguard: Yeah. Yep. Okay. So that's some of the other variables that we've got. And I think we're gonna do. Another episode on custom fill variables. So custom fill, that was one of them. ACF and things like that. Yeah, I think that, so I'm not gonna, I'm not gonna go into that on this one.

That's episode four, I think. Okay. Yeah. So let's just quickly have a look at cascading fields. I know we're starting to run short. No worry. I'm

[01:05:27] Nathan Wrigley: good for time if you are.

[01:05:29] Mark Westguard: Yeah, I am. Yeah. Okay. As long as there's enough megabytes in the world to record this video. Yes. Yeah, so's have a look at cascading and what that does.

So cascading enables you to show multiple fields to drill down on information. So an example would be choosing a vehicle. So here we've got, say we could choose Ford and it'll then show models for Ford. And if you choose a model, it'll then show the available years for that model. So that's what cascading is.

Yeah. You're basically drilling down on information. You can do that with select fields. You can do that with check boxes, and you can do it with radio fields.

You could also mix them up. So you could do a region, could be a checkbox sub region, could be a radio country, could be a select box so you can got it mix in between. Yeah. So I'll show you how that's done. If we go into Let's Dashi, I think we've got that as a demo. So let's see. It's got avenue and go to demos.

There you go. Cascade. Cascade. There you go. Yeah. This is slightly different. Demo, but it'll show you how it works. So we've got make model in year. So the first radio here is pretty straightforward. So you've got, you go to radios in the sidebar. Here's our three different mics. Go to Ford and Honda. If we go to model, this is where it gets a little bit more complicated.

But if we edit that field, we go to options and we expand that out. So now what you'll notice is we've got a make column. Oh, I see. Yep. And we've got model. So this is saying if you choose Toyota, we're gonna show Camry, matrix and Prius. So there's our three for Toyota. If you choose Ford, it's gonna choose Focus Mustang and Taurus.

So it's a two column situation. And the first column is basically saying if the first filled selection equals that, we're gonna show these three rows. Yeah. The way that's configured is below column mapping. Here we've got a cascading section and all you have to do is just enable it. And then we say that our make column is what we're gonna filter it by.

And we're gonna use this field and we're gonna filter on that column, if that makes sense. Yeah, it does. Yeah. So yeah, this first field here is selector make, and we're gonna filter the value of that in this column and show those rows. Now, if you've got a huge amount of data, you can click on use Ajax, and it'll actually retrieve that data dynamically from the server.

So inform performance, like I said on the previous video, actually select fields are just notoriously slow. They just don't render very well. But by using Aja, you can make sure that all those options aren't already on the actual form itself when it's loading and they loaded. Run a lot quicker.

Yeah.

[01:08:21] Nathan Wrigley: Cuz this is the kind of area where you really could like, have a massive spreadsheet of stuff.

[01:08:25] Mark Westguard: Yeah. Yeah. We had a customer who had a list of all the prisons in the us which was separated, I think by state and county, and that was an immense amount of data. So they used the ax feature and it just made it run.

Just speeded it all up. Yeah. Nice. Awful lot quicker. Nice. Okay. Let's have a look at web hooks quickly. So what a web hook does is a web hook will make a request off to a third party API or even an API you've created. Return data back and then use that on the form itself. So you can use it as a lookup feature.

So you could do like a vehicle vin lookup or something fun like this. So let's go to Web Hook. We do a search for that. We got a demo on here. This is using the random user.me api.

[01:09:13] Nathan Wrigley: Oh, nice. There is such

[01:09:16] Mark Westguard: a thing. Of course there is such a thing. Yeah, it randomly generate there. She's there, she's, there's Kitty.

What this does is when you click this button, it runs an action to retrieve a random person and then loads the data we get back into fields on that form and every time you click get random person, it's gonna get another random person. I believe these are AI generated

[01:09:39] Nathan Wrigley: as well. Yeah. It's like that this person's not real.com

[01:09:41] Mark Westguard: or whatever.

It's Yeah, exactly. Yeah, they're just, it's amazing how that works. So if we download that demo, And we'll eradicate our current form. We'll drag this into there, the file that we just got. Oh, if

[01:09:55] Nathan Wrigley: you do that, you eradicate your previous form, right?

[01:09:58] Mark Westguard: There's no, yeah. If you do that by accident, you can use undo and go back to, yeah.

Nice. So yeah, you're not necessarily gonna break it. Now on this form here, you'll see that we've got a custom button similar to the custom button that we created earlier, and then we've got the fields that we wanna fill out. And then we've got a HTML filled, which I'm using to actually put that image into.

So that's a, there's a little bit of custom code there, but I'll show you how this works. We're using conditional logic and when we click on that, we're saying if the get random person button is clicked, we're gonna run the web hook action and we're gonna run it immediately. So let's go to our actions and have a look at that.

And there's our web hook action that we've created. And if we edit that, it's and whip hook action. And we are saying go to that endpoint there, which is their api. We're using a get method and there are different methods that you can use. Yeah, I won't go into that here. And then we are saying we wanna use JS O data to send it.

Cause that's what the API requests and it basically we don't send any parameters to that endpoint cause it just gives us a random user. But if you did need to send information using that web hook, you can use film mapping here and actually send data from your form across to them. Yeah. And then here is the response mapping.

So we're using the data that we're getting back from that API and we're loading that into these form fields. So you can add any number of different mappings from the data you get back into a form field. And that's basically what this is doing. And then we are loading in, I believe, let's see here, the picture URL into this hidden field here.

So if we look at that mapping again, I'll try and keep this fairly simple, but you'll see here's the picture mapping. Yep. Yep. Loading it into picture url, which is our hidden field here. We don't wanna show the use of the url. We wanna show them the actual picture. Picture. So if we go back into conditional logic, you'll see we've gotta show picture condition here.

And we're saying when that picture URL changes, oh, you're wrapping it in an image tag, we then pushing that into an image tag and putting that into this HTML filter to show that image.

[01:12:15] Nathan Wrigley: Okay. So there's a few hoops to jump through there, but that all makes total

[01:12:18] Mark Westguard: sense. Great. Yep. Yep. And you'll see, because you remember I was talking about the daisy chaining of events.

Yep. Because we've put the image URL into that hidden field, a change event gets fired, in which case this if statement here will run and it will then run this particular then condition here, this then statement. So that's how that works. So that's web hooks. You can do some really cool stuff. Oh, I'll

[01:12:41] Nathan Wrigley: bet you can get super nerdy with that.

[01:12:44] Mark Westguard: Yeah. So we have people using app for like vehicle vin lookups and all kinds of stuff. And that, that stuff all works on the flight. There's no form redirects or, form re sorry, page reflection going on. It's all done behind the scenes for you. And then you can get a little bit more in depth with it.

You can actually run WordPress hooks and I'm not gonna go into building a WordPress hook and everything, but if you are a PHP developer and you want to write your own code to do something server side and then bring back some data to the front end, yes, you can use a web hook, but you can also run a WordPress hook.

So we go to run WordPress Hook here. If you're familiar with WordPress hooks, there's basically two different types. There's an action which will just do something, and there's a filter where you're actually filtering the data and returning data back again. And all you do with this is you just say, I wanna run a WordPress hook.

You choose the type of filter or an action, and then you type in the hook tag. It's the name of the hook. So it might be, my hook in your PHP code. And then you can say whether you wanna run that after or before other actions have run. So there may be something, let's just say for example, you are adding a form to a Zendesk ticket support ticket and that gives you a ticket ID back and you want to use that in your hook.

Got it. You would therefore run that after actions and then you can use that ID number. Yep. If you want to use this to set something on the form and then that is then used by other actions, you can run it before other actions. So you can choose the priority there. There is a not article about that word, press hook.

This has a bunch of different examples on it that show you how to do that. For example, if you wanna run a filter hook or an action hook, and there's sample code in here for different things that you can do. So you can do things like set a field value based upon the response from your php, show a custom message show an error message, redirect off to another url.

You can even set a spam level. So if you wanna use your WordPress hook and you wanna check something and set a spam level on that particular submission, you can do that. And you can also halt processing altogether and say, no, stop processing this form. So there's a lot you can do with that wrong WordPress circuit.

Again, not gonna go into the PHP behind it, but if you're a PHP coder, everything is there for you. All right. And that's it. Wow.

[01:15:21] Nathan Wrigley: What, honestly, mark breathing, we're only onto session two of six. And I, I feel that like we're already discovering that it is truly mighty. There was an awful lot in there.

Thank you so much for giving us your time. I really appreciate it. Just in case anybody's watching this, where is the best place to hit you up for info about, anything they may have seen? Where can they go for that?

[01:15:45] Mark Westguard: Yeah, so WS forum.com is the main site. That's where you've got the knowledge base.

If you've got any questions, you can use our contact us form there. If you wanna learn about us and follow us, we're on Twitter, which is at WS under school form. And then we're on Facebook as well. We have a Facebook WS Forum community that you can join if you're interested. And we discuss all things WS Form there.

[01:16:09] Nathan Wrigley: Super nice. Now, so that was episode two. So that one you've just watched, it was about interactive forms. We're gonna be back next week, same time. So whatever time it is now if you're watching live. But next week we're on to the important subject of preventing form spam. Form deliverability, which nobody ever talks about actually, in all honesty.

But that's a really important thing. And and making your form efficient, form efficiency. So spread the word, let people know. If you wanna leave us a comment on the post, we will have them under our demos section. If you go to the archives menu on the wp builds.com website, go to archives. Go to demos, and it will be nestled in there somewhere right at the top.

Yeah. Yeah. So we'll see you next week, mark.

[01:16:58] Mark Westguard: Yeah. Thank you for having me, Nathan. No, appreciate it. No.

[01:17:01] Nathan Wrigley: Amazing. Thanks so much indeed. Take it easy. Take care.