Custom Field Plugin Integrations – WS Form Webinar Series, Episode 4

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

Find out more at go.me/WP Builds. Good morning, good afternoon, good evening. Good. What? Yeah. Hello, mark. Hi, Nathan. How are you? Yeah, good thanks. Good. We're we're here with Mark Westguard. There he is. Mark Westguard looking. There he is. Yeah. There I am looking very dapper. It is, it's Mark from WS Form.

So we're here to talk about. WS Form. Believe it or not, WS Form is a WordPress form plugin. If you've been tuning into the previous three episodes, you'll have got a real idea a real understanding of just how amazingly complicated it can be. The intention of this webinar series is to reduce that complexity and let you know how it works under the hood.

This is the fourth one. Like I said previously, we've done the form building basics, then we followed that up with interactive forms. Last week it was all about preventing form spam and getting deliverability improving all of that. And then this week we're gonna be talking about custom field plugin integrations.

I think that's right, isn't it, mark? That is right. Yeah. Is there anything you wanna add before we begin or should we just crack right on?

[00:01:47] Mark Westguard: I think we should just crack on.

[00:01:49] Nathan Wrigley: Yeah. Oh, actually there is something I wanna add, which is not usual bit at the beginning. Yeah, sorry. Apologies. That is to say that if you are joining us live, firstly, appreciate it.

Secondly, if you want other people to join this, the easiest way is to send them to our. Website, WP Builds.com/live. Over there, you need to be logged into some kind of Google account because we've got face sorry, YouTube comments. If you're on our Facebook group, you can make comments over there, but you do need to let us know via Facebook who you are, and you do that by going to chat.restream.io/fb.

The link should be in the post at the top. Sometimes it appears, sometimes not, but there it is. Anyway. chat.restream.io. Slash fb The intention really is just for me and Mark to to talk, but we obviously will raise comments. If you have a question or you are confused by something that Mark says, or you just want some further clarification, please drop a comment in and if it's pertinent, then we will hopefully add it onto the screen.

Looks like, oh, good grief. I've just put the the chat bit on. We've got quite a few comments already. I might as well say hello to these people. Rob Cairnes joining us all the way from Sunny Toronto. He says, Hey Rob. Hello. And we've also got bud Krause. He says, how is everyone?

I'm fine. What about you, mark?

[00:03:05] Mark Westguard: I'm fine too, bud. Yeah, I'm doing good.

[00:03:08] Nathan Wrigley: Yeah. Thanks bud. The inevitable pizza comment from from Rob. He wants his pizzas now. He does. We will, I'm sure at some point get to that. And we're also joined by Marcus Spin from GoDaddy at Sky Verge. We always greeted folks with a good may.

When we logged in May, morning, afternoon, evening. I like it. There you go. What about extending that to Maine? M a e n. And you could have Knight as well, couldn't you? Yeah. There you go. So Good. Maine also join, oh, sorry. That's just somebody saying, hi Marcus. And somebody randomly saying hello. I yell.

I can be, I think that might be a spam comment. I'm just gonna make that one go away. Okay episode four, talking about custom field plugin integrations. Let's hand it right over to my mark. Just tell me when you wanna put the slides up and I'll do that for

[00:04:03] Mark Westguard: you. We can go straight

[00:04:03] Nathan Wrigley: for it. Oh, let's do it.

Okay. There we go.

[00:04:07] Mark Westguard: Yeah. Okay. Yeah. So today we're gonna talk about custom fill plugin integrations and how you can work with those with WS Form. So one of the things. That we just wanna remind everybody about is that we are doing a 20% off any WS Form edition. So that's the personal, the freelance and the agency and any of the other add-ons.

If you wanna buy those a car, if you go to wb WP Builds.com/link/WS Form and use coupon code WP build, you'll get 20% off. Nice. And I'm not gonna torment people with you coming up from the bottom of the screen this week. Oh no, that was

[00:04:46] Nathan Wrigley: funny. Oh, that was fine there. But yeah,

[00:04:48] Mark Westguard: that's moving on. Ok, so let's, I just wanna, everybody hates a PowerPoint, but I just really wanna give everyone a brief overview of how WordPress post tables and user tables working by press.

Just a quick refresher. So there are two tables in WordPress that are used to store posts. One is called WP Under School Posts. I've put the WP. In square brackets on purpose. And that's because sometimes that database prefix could be different. Your hosting provider may have changed that, but usually it's WP posts and the different fields in that table for storing those posts are anything from the id, which is a unique identifier.

The post author, which is the person that authored that post, the post type, which is the typer post, and we'll come onto that in a moment. You've got other things like the title, the content, the et cetera. There's actually quite a few fields in there. And then in conjunction with that, you then have a WP Post table.

And post is where you can store custom stuff about a post. So you may wanna store I'm trying to think. Could be an image, could be anything that you want. So really the WP Post meta is for extending that post and that data gets stored in what's called a key value pair, and there's a link between those two tables.

So the WP Post Meta Table. As a post ID field, and that links to the ID of the post. That's how those two tables are glued together. So this is what a post looks like in the actual WordPress database when it's stored. And this is what we are gonna talk about today, actually pushing data. To these posts in WordPress.

So there's various different post types in WordPress. You've got default post types that come with WordPress. So you've got regular posts. So those are your blog posts. So if you're running a blog with WordPress, that's where your blog articles actually get stored to. If you make a revision to that blog post, it's gonna go in as a revision post type.

If you create a page on your website that is a page post type, so really that post WP post table can be used for all types of things because of that post type. You've also got custom post types. One example is a WooCommerce product. So when you install WooCommerce, WooCommerce will create a custom post type called product, and that's where it stores all of its products.

And you can actually add any number of custom post types to WordPress that you like. So the way that the WS Form post management add-on works is you will take data from a form and you're gonna push that to a post. You're gonna create a post from the form fields, and that's gonna populate those two tables that we just spoke about.

That should be post meta without an underscore, actually. And then from the post, we can actually populate a form as well. So it's bidirectional. And when you submit that form, it'll then go and update that post. So you've got bidirectional post management here. We can also do that with user tables in WordPress as well.

So users have a table that's where your login and your password, your email address, et cetera, is stored. That also has a WP user meta table, so that's where you can store custom information about that user. And again, there's a link between those two tables to glue those two tables together. And a user management add-on works in pretty much the same way as the post management add-on.

So you've got a form which will then register a user. And that data, that user data could also be used to populate form. And then when we submit that form, it can be used to edit the profile of the user. So again, bidirectional management on that. So with custom fill plugins the weird thing about WordPress is there's actually no way of creating that metadata.

By default, WordPress out the box. There's no way of doing that. So we rely on custom fill plugins to do that. So again, with a post, you're gonna have your default fields like title, content excerpt, those come bundled with WordPress. But if you wanna add some additional fields, you're gonna be using custom fields.

Custom field could be anything from like a testimonial here, a photo or location could be a map. All kinds of different things that you can do with these custom fill plugins. So we're gonna talk about. Different custom fill plugins and how WS Form can work with those. There are five different custom fill plugins that WS Form works with out the box, with the post management and the user management addon.

So we've got a c F, which is one of the most popular advanced custom fills. That's the one I'm gonna go through today. Jet engine, MeBox pods and tool set, and some of these are free, some of them have, some of them are free, so they have a free version that a paid version, and some of them are just paid so.

It's just, really down to preference. My personal favorite is a c F. I've been working with it for years. It's just the one that I'm used to. But all of them do pretty much the same thing. They enable you to create custom fields in WordPress for any type of custom post type. And also enable you to create fields for users as well.

So let's have a look at it. That's nice. That is the end of the the PowerPoint.

[00:10:28] Nathan Wrigley: No more PowerPoint for you. Very good.

[00:10:31] Mark Westguard: That's right. Let me close this down. Get rid of it. Be gone. PowerPoint? Yes.

[00:10:37] Nathan Wrigley: Go on.

[00:10:40] Mark Westguard: All right. All right, so the first step is you are gonna want to create those custom fields in, in WordPress, and we're gonna use a ACF in this example.

All, again, all the custom field plugins work pretty much the same way. They will have a group of fields for a particular custom post type. So I've already put these in, so you'd have to sit here and watch me go through these one by one. But here we've got a group for posts and we've got a group for users we're gonna focus on, just on posts to begin with.

So if we edit this group now I've added a lot of fields to this just to demonstrate all the different types of things that WS Form can do. But we've got things like repeaters. So repeat is basically a collection of fields that you can repeat over and over again. And then you've got basic fields like text area number.

And we've got some more complex fill types such as select checkbox radio. True false. And then you've got things like image upload, file upload and then you can even do things like Google acf, which is quite cool. You can also do relational fields such as post object relationship fields, which will link different posts to this post.

So you can actually link one custom post type to another custom post type. You can also add taxonomy links to posts using a cf. And that basically means you could have a selector to choose different taxonomy items. If you're not familiar with taxonomies in WordPress, it's basically a way of categorizing a post.

So you can add a category, you can add a tag you can add any type of like checkbox select list where you can allocate a post to a certain taxonomy. And within a taxonomy you have terms and terms. For example, a taxonomy may be color. And then the terms will be red, blue, green. You can also have a user selector as well.

So I've added all these in here so that they're basically ready to go. Now, if we were to go and add a post in WordPress, you'll notice that all of those custom fields actually now appear on that post. And I can go in there, edit all of these fields, and I can assign those fields to that post. You'll notice here as well that I've put a 50% width on text and text areas.

You can actually do a little bit of layout in here. Now, ACF does actually have its own form element, but it's very limited in what it can do. So if you want a lot more flexibility, that's where WS Form comes in, and I'll show you how to do that. Now, traditionally what you would do is you would add a form, create a blank form, and then you would start adding your fields.

That relate to your ACF fields that you've created, and you'd maybe resize those to get 'em the right size you wanted, and then you'd have to go in and map all of those fields so that when the form is admitted, they are mapped to the post. Now that takes a long time sometimes when you've got a complicated Yeah.

Form and a lot of different posts. So WS four makes that a lot easier. What we can do is go to WS Form. We can click on. And we can go to the post management tab. And what the post management tab does is it will now pull out all the custom post types that you've got installed in WordPress. So if you had any other custom post types registered, they would actually appear here.

You'll notice on post we've got a little Baby ACF logo on that template. And that's because WS Form is detected that you've got a CF installed and that you have some fields that are associated with that post. If I then click use template, WS Form is now going through all those a ACF fields I just created, and it's building a form for you.

So in one click, we've built a form that's basically ready to go.

[00:14:40] Nathan Wrigley: So just to be clear on that if you'd have, let's say you'd configured a real estate agent post type and you'd assign custom field and you'd give it, I don't know, price how many bathrooms and all that kind of stuff, by clicking that button, that one button, those exact fields would now be mapped.

Right there in the, what was that, two seconds?

[00:15:01] Mark Westguard: Yeah. Yeah. Nice. All built for you. Nice. So you'll notice at the top of the form, we've got all the regular fills that we would expect with a post, all the ones I just showed you in that database table. So you've got the title, the content, the excerpt, and also the featured image that you see on a post as well.

And then below that we've got all the a c f fields that we had just created. So we've got that repeater that we had at the top. We've got the text field. You'll notice it's actually made the width of the field Yeah. Accurate to what we had in, in a cf. And all those other field types are here. So we support all the core a, ac, f fields.

Any one of those can be used on a form. And if we then go to actions in WS Forms. So if you click at the top, you have this little lightning icon. And just a reminder, the actions are anything that runs when a form is submitted. So on this one we have a post management action and we expand this out by clicking the the expand icon on the top right hand side.

And then we edit that post management action. It's now gonna pull in all of the fields that we have for a acf and you'll notice that everything is mapped for you. So rather than having to go through line by line and map your form fields to the ACF field it's done that all for you automatically. So it's very quick and easy.

So what the mapping does is when the form is admitted, we are telling WS Form that we want this field here, this text field, to end up in this a c f field on the post. And you can add as many methods as you want. If you want to edit this, you can remove mappings. You're basically in the WS Form layout editor, so you can do anything that you want with this form to make it look however you want.

For example, I can resize section I can resize these fields if I want to, and I can make this form fully responsive. So everything within the l normal WS Form layer editor is available to you. So let's preview that form and have a look at what that looks like. So if we preview, so here's our form here.

Now you may recall from the previous sessions that we had this debug console at the bottom of the page. Just to recap on that. So what the Debu console does, this is unique to WS Form, and what it enables you to do is to instantly populate a form in one click. So you'll see here under the tools tab here, we have a populate button.

If we click that, it has now populated that form and put data in every field. So it's selected options, it's selected check boxes for you. Anything it won't do is file up uploads cause it can't upload a file for you, obviously. But all the text fill are done. It'll even fill the map out for you as well.

Each time you hit populate, you're actually gonna get different data. So it will take you around the world.

[00:17:57] Nathan Wrigley: That's nice. That's quite off fun just doing that. Could we do that 10 minutes? Yeah. Just keep,

[00:18:03] Mark Westguard: see. See the world. Oh yeah. So you'll see how much time that saves when you're testing a form. All you gotta do is hit that populate button.

If we click on populate and submit. It'll populate the form and it will submit it, and it will create a post for us. So that's it. That's it. Done. It's that easy. So if we go into posts in WordPress, there's our new f post that's been created, and if we click on that post, you can see all the fields completed that we just populated.

So very easy to create a form to create a post. Again, you can change that form any way that you want. Now, once you've created a post, you may want to edit that post using a form, and that's something you can do in WS Form as well. So if we go back to that post, what I'm gonna do is I'm gonna grab the ID at the top here, which is 3 3 99, and I'm gonna show you how to populate a form using post data.

So if we click on form settings at the top right hand side. And then we click on the data tab. I'll expand this out to make it easier to see, and then we'll click populate using action. And what this is doing, this is gonna tell WS Form that we wanna populate this form using the post management action, and we're gonna populate from this post type, and I'm gonna tell it to populate from Post ID 3, 3 99.

Just a quick point on this Post Id field here. There are various ways of populating a form with the ID with a particular post ID and this sometimes this stumps people a little bit. You can put a direct ID number in there if you want to, and that will read the data from that particular post id.

I can also leave that blank. And if the form is on a particular post, like the form is physically sitting on a post or a page, it will use that post id, right? So you can actually put a post form on the post itself. You can also do things such as hash query var, then we can put post ID in that function.

So let's put post. Id like that. What that will do, that will actually pull the post id. Is specified in the query string. Of the url. And use that to populate the post. So I could do something like Sam Post ID equals 1, 2, 3 in the url. So if you want to link to a post from another page and then have this form populate using that query string parameter.

You can do that as well. You can actually put any other WS Form variable in here to determine which post ID you want to populate. We also so an example of that would

[00:20:57] Nathan Wrigley: be, you would have a form, but you then want to collect that data and immediately show it back on another page to somebody let, so for example, the real estate site, it could show me what my listing might look like, for example, on the very next

[00:21:10] Mark Westguard: page.

Yeah. And we have some people, for example, looking at that example there, so you might have an estate agent or realtor. That will have the ability for somebody to post, say, three or four different properties. Yep. And they could click an edit button and then edit that particular property.

Got it. So you can use that to make that dynamic. Basically, you could also restrict population to an author, and what that will do is that's a nice security feature. So if the post was created by a particular user, only that user can edit that post. Yeah, or pull all the data from that post.

So if we scroll down, you'll see that all of those, a ACF filterings, again, are done for you. And what this is saying is that for the post that we're gonna populate and we were gonna use

[00:22:00] Nathan Wrigley: three something I've forgotten. 3 3, 9,

[00:22:03] Mark Westguard: 9, 9, 9. So let's put that in there.

So we're gonna take the data from Post ID 3 3 99, and these are the ACF custom fields, and we're gonna populate those into these fields. So we're gonna take, for example, the text field here. And we're gonna populate that into the text field on the form. So all you need to do really, if you're using that template, is come in here to tell me which post ID you wanna update.

It's saving close, and that's it done. So if we now look at that, you'll notice now the form is populated from the post itself. So we've taken all of that post data and we're now populating that on the form. Now that will actually work as well with repeaters. So you'll notice here that we have a repeater just with one row.

If we were to go into that post, and let's just scroll up on the post itself and we'll add a row. Let's just put row two. Row two there, and we'll update that. If we then refresh that, you'll then see that we've got. No it hasn't because it's sa Sorry, this is saving a session ok. Okay.

But yeah, but that would basically add additional repeater rose to that. Also if you were to add an image, let's just go, let's go down to, there's one of our image films. There's so many image, so many fields. I can't find them.

[00:23:29] Nathan Wrigley: Image was quite near the top, if I remember. Oh no, it was about halfway down.

Oh, here, it's here.

[00:23:33] Mark Westguard: It's, yeah. Yeah. So let's just pick a rough image there and we'll update that. See, this should update hopefully. Yeah, there you go. So there's your image. So you've got as soon as that post is updated, the information's gonna update actually on the form itself. And if we were to change this, so let's just make a change to this.

We need actually to configure the post management action to do that. So let's go to actions and we'll go back into post management. And you'll notice here that the post ID for updates is blank. When that post ID for updates is blank, it's going to create a new post. Got it. So in this instance, we don't wanna do that.

We actually wanna put a post ID in there. So we're gonna put 33 99, which was the Post id. Yep. And. We'll leave all the mappings as they were, cuz we wanna make sure that we're updating all the fields on that form. And we'll hit save and close and go into post management and we'll just change the title to 1, 2, 3 and put a 1, 2, 3 in the content.

And then we'll go down here and hit submit. And if we then edit that post again. Oh look, there's our repeater row, right? Sorry. Yeah.

[00:24:54] Nathan Wrigley: Better late than never, right? Yeah.

[00:24:55] Mark Westguard: Yeah, so there you go. So there's the update on the post. So you've got full bidirectional capabilities on post updates. You can update the titles and you can update any of the custom fields on that as well.

All right, so that is, that's post management, so that is where we're basically creating posts and editing posts as well. Now you can. Let's just go down to the images. I just wanna show how those work. Try and find it again. Yeah, there we go. Image, file, upload, and image upload and file upload. So in ACF you have different types of file upload capabilities.

You can upload images, you can upload files you can also do galleries as well, which is where you can upload multiple images to a gallery. So if we go to the image, I just wanna show how those are set up in. A c f they have a nice kind of drag and drop capability for uploading images. And you they also use like the media gallery as well.

So we have a similar thing in WS Form and we use a thing called Drop Zone. Oh, it's nice. This, it's lovely. Yeah. And the nice thing about Drop Zone is that, let's just refresh this is the user can just drag a file into this area. So you see we've got that on the featured image as well. So if we go to files here I could take a screenshot straight away here and they could just drag that in.

It's a really nice way of being able to upload images. And the reason that we like to use drop yeah, the drop zone is the file is getting uploaded to the server in the background while the form is still on the page. Oh, nice. So then you submit, you don't have to wait for it to upload. Yep. And when you create a form, automatically WS Form's gonna automatically set that file type two drop zone js for you.

So in WS Form we have various different ways of uploading files. You can actually use the default file upload that you sometimes see Yep. In WordPress when you're uploading a plugin. You can set that to drop zone js and you get that nice looking interface and all you gotta do is literally just select that drop zone js.

We also have various different ways of saving files in WS Form as well, so you can save it to WS Form private, which will actually hash the file name. And make it, very difficult, almost impossible to find that file. But because we are using a c f, we need to make sure that we're using the media library.

Because that's how a ACF stores its files. So you've gotta want make sure, if you were manually creating a form and you had a file upload on there, you wanna make sure that you are using drop zone js and that you're using media Library. Again, if you're using the template, it's gonna do that for you and you don't have to worry about it.

Let's just see, what else do we wanna go through? Taxonomy. So let's just talk about that quickly. So just a recap on taxonomy. So on posts, for example, in WordPress, if we were to create a new post, and you're probably familiar with this, you would categorize. Your blog into a particular category, you can also tag it as well.

Now, categories and tags are, in fact terms in WordPress, they're actually exactly the same. And tags and categories are two different taxonomies. So what you can do is you can actually map those categories and tags between a post and a form as well. And that's done very easy. Very similar way to mapping those fields.

So if we go into form settings and then we go to data and populate using action. So this is where we're populating the form. Yeah. At the bottom of these field settings here, you'll see we've got tag mapping. Okay? And all you need to do is just tell it which field you want to populate with that tag information.

Now, when we're using the template, that category field is automatically created for you, so you don't have to do anything. But if you were to create that manual, I just wanna show you how that's built. So if we go into this section here where we've got a category check box, and we'll edit that field under check boxes, you'll see we're using a data source of terms.

Yep. What that's gonna do is it's gonna pull in the terms from the category taxonomy, and it's gonna populate those check boxes on your form. If I click get data, It'll pull in the text. I've got figured on there. So we actually, what we do is we store those terms as the term id. You'll see this number here.

Yeah. And that's basically what we then send to WordPress to say, Hey, assign this term to this particular post. So likewise, on the post management action, which is where we are sending the data to the post itself, if we scroll down here, You'll see we've got term mapping. So this is saying, please map this category field here to the taxonomy of category.

And that's how you get that two-way population going on the bidirectional population going on. So that's that. So it's fairly straightforward. Most of the time I would recommend people just set up their ACF fields or pods or MeBox or whatever custom field plugin that you're working with. Go into a hip post management.

Choose your custom post type, hit use template and let WS Form do the work. It's,

[00:30:33] Nathan Wrigley: it's, yeah, it's more a process of deleting at that point, isn't it? I feel. Yeah. Like you might just not want certain data pieces of data to be gathered. Yeah. But But it's all there. There was one curious thing that I noticed on when you populated it and you scrolled down.

Yeah. The repeater field sits outside of the A C F group or SE section there. Oh, here? Yeah. Yeah. Is that just because it behaves in a different way or it,

[00:31:00] Mark Westguard: yeah, so with a c F. They have repeaters and they have groups. Yep. So a repeater in a c f is a collection of fields that you can repeat over and over.

A group is really, it just basically is a grouping of fields, a logical group in a field. So it's like a little section itself. Yep. So in order to do that in WS Form we do have repeaters and they're basically called a section. And you'll see that this is a section containing those two fields.

We add these icons to that repeater for you because it's a repeater. And if you click on those section settings, you'll see that repeatable is enabled on that. It's also indicated with a little repeated icon here as well, so you know that Oh, I

[00:31:46] Nathan Wrigley: got it. Got it. Because that's your repeater

[00:31:49] Mark Westguard: field. Correct.

Got it. Yeah. So we don't actually have a repeater fill per se. We have a repeatable section. Section. Yeah. And acfs a little bit different, isn't it? It has, if you go into, yeah, acf if we go into that post, Theirs is actually like a field. It's like a field, but it isn't Yeah. Within that. Yeah.

Yeah. And then within that, you then have your fields. Fields, yeah. Yeah. So our version of that is basically a repeatable section. So rather than field, it's just a section. In the same way

[00:32:19] Nathan Wrigley: could you map, so for example, could I drag. Could I drag the repeater field between the number and the range field in the post a c, f section there?

Or would I have to have, would I have to split the ACF section up and then drop it in between, if

[00:32:36] Mark Westguard: okay, so here's one of the basic rules with using custom fills. This is the same for all form plugins, is that you need to map the same kind of structure between a CF. Then you as you have on your form.

Yeah. So if you've got fields in a repeater, they need to stay in the repeater. Got it. But I can move those around anyway that I want. Yeah. With regular fields that are at the root level, I can put those anywhere that I want. So again I can move those around. I could, if I wanted to add another section and I can drag those fields into another section.

So I can yeah,

yeah.

[00:33:19] Nathan Wrigley: That's what I was wondering. Just that, yeah so I could, let's say for example, I wanted that repeater in the middle of all the other fields. Yep. I could duplicate it, delete the delete half from the top of one half from the bottom of the other. Yep. And then put the repeater section in the middle, right?

Correct.

[00:33:35] Mark Westguard: Correct. Yeah. So what you could do is I could take this section and I could move that, way up here. I've got so many fields on this. There. It's, yeah. There, it's there. And then I could move that repeater down here Exactly. That have it exactly that. Yeah. So you can move things around.

Yeah. Yeah. You can, even if you want to. So when you create an ATF form by default, hugely just gonna be one big, long list of fields. And that's a very long form to have to fill out. If you wanna split that into multiple tabs. You could absolutely do that. And then you can move these fields between tabs,

[00:34:13] Nathan Wrigley: right?

So that now occupies its own little unique part of the form.

[00:34:16] Mark Westguard: Got it. Yeah. So you can move these fields around in pretty much any way that you want. The only ones that have to stay it a repeater are the ones that are in a repeater in a c f, because ultimately when we submit those to a c f, they're sent with some certain tags on 'em to say, Hey, this belongs in a repeater, and it's row one.

Or row two or row three, whatever it may be. So that part of it just has to stay the same. If we

[00:34:44] Nathan Wrigley: were having so let's say that this was publicly available on the internet and we put this form out there and we wanted members of the public, obviously we can put your we've talked about this last week, we can put capture like turnstile on it to prevent it being spammed and so on. Yeah. Is there a way that, so two questions. Firstly, Is there a way that we can do a save and continue another date? So if we get halfway through it and then somebody shouts, jot a cup of tea, and you're like, oh yeah. And then you come back half an hour later, can you do that?

And the second question is, can it, can this post go straight to draft? So you fill out the WS Form and rather than being rather than it all going into the post and being liar, you've, can it go into a draft status straightaway?

[00:35:27] Mark Westguard: Yes it can. Okay, so on the first question doing like a save continue we have a saving continued feature in WS Form built in, and it's very simple to use.

All you need to do is go to your toolbox on the right hand side here. Go down to buttons and then you just drag Oh, look at that. Yeah.

[00:35:47] Nathan Wrigley: Save button. Yeah.

[00:35:49] Mark Westguard: Yeah. So if you preview this if I were to populate that and then we go down and we'll hit save, that's actually saved that form not to a post. In WS Form so you can recall it later on.

We also have an email method of that as well, which is described in the knowledge base. So you can actually email the user when they hit save. They'll receive an email with a link in it, and they can click on that link and come back to that solution. Oh, nice.

[00:36:17] Nathan Wrigley: As well. So one of the, it would consume one of the fields, the email field.

Probably, yeah. You click save and it will email them a copy saying Come back. Yeah. Nice.

[00:36:27] Mark Westguard: That's correct. Yeah. You could even show that save button if they complete the email field using additional logic. Got it. And that was something we went through in episode two. Yeah. So you could say if email let's say you can actually say is validated, right?

So we make sure we've got an accurate email address in there. Then, and then you can go to that safe button. Sorry our icons

[00:36:50] Nathan Wrigley: are in the way here. Let me just move us right the way that's, there

[00:36:53] Mark Westguard: we go. Yeah. So that, that basically would show that safe button. If the email address on the form is validated, then the user can click safe and then you could send them an email.

Perfect. So that's how you can use Save On here. And that works in conjunction with the post management ad on the ACF integration. Oh, works fine. If you want to save that actually as a draft, then you can go into actions, go to post management. And you can actually change the status here. Oh, there easy.

Yep. Yep. Now, if you were updating a post, you probably don't want to change the status of the post, right? Cause it may have a draft status or a published status, you're not quite sure what it may be. Yep. You can actually set that to default. So on an existing post. So if I were to put a post ID in there, I can set the status to default and it would then inherit.

The current status and not change it. Oh,

[00:37:47] Nathan Wrigley: so if it's already draft, it maintains draft correctness and if it's published, it maintains published ness. Yes. I've just invented a word, two words ness and published

[00:37:58] Mark Westguard: in 60 seconds, you think? Yeah, and then also populating the form with data, you can also restrict updates to as well.

So that will make sure that when the form is submitted, They'll only update that post if the person logged in originally authored that, that post, right? So that's just a little security feature there as well. There's a bunch of other options on here as well, and this changes from custom fill plugin to custom fill plugin.

But for example, a c f has its own method of doing validation on fields, so you can actually do custom validation on fields and write your own PHP validation functions with a c f. So that is actually enabled by default. We will actually process those validations when the form is emitted, right? And if any validation there come back from your custom php, we'll then show that on the form.

You could also do custom mapping as well in conjunction with the A C F mapping as well. So what that does is it enables you to create your own. Key value pairs on that post data if you want to. And then this basically determines which fields are attachments which you know, should ultimately end up in the media library.

And then this is your featured image mapping. So your featured image is the basic featured image that you have on all posts in WordPress. That's usually your big blog image. And you can choose which field you want to use for that. You can also deju as well. So if you wanna make sure that you've only got one of a particular title or one of an email address, you can actually deju by that form.

Oh. So

[00:39:40] Nathan Wrigley: that might be useful for a, I don't know, a username or a. Something

[00:39:44] Mark Westguard: like that. Yeah. And we'll come onto that in a second. We're gonna look at the news in just a moment. And, there's various other options on here. These are all explained in the knowledge base. It gets more and more detailed as you go through.

One of the nice things about the post management add-on is that when you have created a post, that post then becomes available to WS Form variables. So if, for example, you had a post management action here, And then maybe you wanted to send an email afterwards. I can actually put in that email fields from that post so I could say, you just added.

Hash post title and it'll then put the title of the post. It just created. Nice. Yeah, and you can also put like the the post url, which will put the perma link of that URL in there so people can then click on it to get to it. So you can use any of the variables that relate to posts, and those are a detailed, again, in the knowledge base, if you just do a search for variables, you'll find a list of all the variables that are available.

You can even do things like hash, post meta, and then put a meta key in there. And it will pull out that particular meta key. Now, the reason that we have these integrations with a c f is that some of their fill types are quite complicated. For example, Google Map Google Map has a lot of data in it.

It's got the latitude, the longitude, the address, the zoom level, the map type and things like that. And that's not stuff that you can just put in as texts into one of those meta keys. So one of the reasons for the ACF integration, Is to make sure that when we save our map, the data in a CF is saved correctly.

Yeah. And vice versa. So it's kinda interfacing and gluing those two fill plugins together. Alright. Let's have a look at the user management side of things. So all of the a c F fields that we just created, you can also attach those to a user as well. If we go into. Edit this particular field group in a acf.

You'll see I've actually just copied all these fields across for users, but you can use all of those. If I edit my user on here, you'll see that all of those ACF fields are in there. They are look, yeah. The longest page in the world. And I just have that for testing basically to make sure everything's working okay.

Yep. Okay, so if we go to WS four, we're gonna add new. Now again, you could create your own registration form, map it to user registration and all that, but. B Ws four away. It is. We like to have templates for everything. So if you look in the user management template tab you'll see that we've got templates for register to user editing a user.

We've also got log in, forgotten password. Reset password and log. Let's have a look at register and edit profile. So this is basically create, like creating a post and editing a post Yep. For a user. So if we click on register and hit use template. WS Form is now gonna build a form for you again. So instead of the post fields, now we've got all the standard user fields like username, email, first name, last name.

These are all the standard fields that we expect to see on a user account. And then below that, we've got all the a c, F fields for a user. So you've got all those custom fields that we created. I

[00:43:08] Nathan Wrigley: am keen to see what this looks like. It's sign up to this website, here's some information that's required.

Yeah.

[00:43:16] Mark Westguard: Yeah. No one's gonna sign up.

I'll repeaters. Let's populate. So luckily we've got that populate done. Yeah. Nice thing about this is when you do populate, it actually does exact copy passwords for you. Oh, nice. So those are all filled out. Everything else on here should be completed. I think we're all good. And then we'll hit register.

And there you go. There's a user registered in WordPress, so if we go into users, open that on a new tab. I'm assuming it's probably the top one. Yeah. Yeah, it

[00:43:54] Nathan Wrigley: will be. You get which one it was. Yeah.

[00:43:56] Mark Westguard: Yeah, there you go. So there's all of our data. There are our repeater rows and there's all the other fields filled out for that user.

Now let's have a look at the edit profile. Now the edit profile, cause I'm logged in as me, is obviously gonna bring up my details, but I'll show you how that works. So if we go to, and we'll go to user management. And we'll use the edit profile template. So this is now gonna create a form that user that you can put on your website to enable user to edit their user profile.

You can actually change the password with this as well if you want to. So here you've got, again, all the a c F fields that we have added to a c f. If we preview that, this is gonna pull back my test data cuz I'm logged in. And we'll go ahead. Actually, I'm not gonna, I was gonna say, do you wanna this up?

Cause it's gonna change my name and everything. Yeah. Let's just change the first and last name and then we'll scroll down to the bottom and we'll hit update profile. That's updated the data. Nice. If we go into here and go back to my user profile, we've now got first name and last name instead of first name, last name, 1, 2, 3.

So super easy again. Yeah. For creating, adding a user and editing a user. Now the crazy thing is that when you actually create one of those forms, if for some weird reason you had a c f and meta I was gonna ask that. And yet Engine Yeah. And editor Tools, you'll actually get multiple icons under here and it will add every single.

Custom fill that you've got regardless of the custom fill plugins that you're using. And it'll do that bidirectionally as well. I don't

[00:45:47] Nathan Wrigley: recommend they're all gathered into A section. So you got the ACF section in there. Yeah. So you can easily delete the ones that you don't want, I'm guessing.

Yeah. Okay. That's handy. Yeah,

[00:45:56] Mark Westguard: Yeah. I don't know if, does a CF enable tabs? I can't remember. Let's see. They may not. Oh, they do? Yeah. There is a tab. Yeah. So that's,

[00:46:10] Nathan Wrigley: yeah, I haven't, yeah, you can tab. Yeah, that. You definitely can. Yeah. I'm just thinking of an implementation of it. You

[00:46:15] Mark Westguard: just,

[00:46:16] Nathan Wrigley: let's just put a tab.

You can, yeah. Up there. Do you have to nest them or is it just everything below? I think it's

[00:46:21] Mark Westguard: everything below, isn't it? Yeah. Yeah. So if I edit that, there's no fields within that. So Yeah. I just wanted to try this. Yep. So let's go add new, oh, you got Save it. Save it first. I do the new ACF interview.

Oh, it's lovely.

[00:46:37] Nathan Wrigley: And they do custom fields as well now, sorry. Custom post types. Yeah. Yeah. They've been doing custom fields for quite a while.

[00:46:46] Mark Westguard: Hence the name, quite good at it.

There you go. So it's added a tab for you? It has. Look at the map. Yeah. So if you add tabs within your custom fields, it would actually add, they'll

[00:46:59] Nathan Wrigley: get consumed by that as well. Yep. So you're building like here are the basic building blocks for a really complicated website consuming almost anything from anybody.

And you could get super nerdy with this. And

[00:47:17] Mark Westguard: people do and they get very confused with it as well. Yeah, I do have some poor people coming to us to say it won't work. And one of the most common reasons it doesn't work is there may. Mapping wrong field types with each other, right? So they might be mapping a number filled accidentally to a select fill, for example.

In which case the data types behind the scenes are not gonna be correct. And that can cause some problems with when a c F is looking at that data. So basically what we do is if you submit a form and maybe you submit it to a, an image filled, We take our image format and we convert that into the data format that a CF requires, so everything is converted for you.

And we and we do that again, bidirectionally. So when we're populating the form from a post, we take the file data from a c F, and then we convert that into our format, onto our form, and then vice versa. But it's completely seamless. It's very easy to set up. You don't need to worry about any custom coding, any PHP coding, any JavaScript.

Everything is done for you. So it's very easy to do the other thing that it works with as well. If we just do this quickly, let's go to. My ridiculously long plugins list you got? Yes.

[00:48:38] Nathan Wrigley: Yeah. This is not a typical website.

[00:48:39] Mark Westguard: No, please don't do this. Yeah. I've got one server with about 200 plugins on it.

Nice. Just for testing. But we're gonna enable WooCommerce on here. Oh, we notice, so we go to post management. You'll notice, yeah. Yeah. Registered that product post type we were talking about. See this little woo icon? Yeah. Yeah. Because it's detected that is a a woo custom post type. If we use the template on that, it's now gonna create a form which when submitted will create a product in Woo.

So it's pulled out all of the different fields that you need to actually create a a product in Woo. And

[00:49:19] Nathan Wrigley: Rob cans. We got dangerously close to pizzas there. We

[00:49:23] Mark Westguard: almost there. Not quite. Yeah, I don't. That's the next episode. But yeah, so that's, you can also use it to create simple product types in work.

Now, it doesn't yet support variations. Variations is actually a very complex data format cause it's a master post and then there are multiple child posts under that. So this is really just for building a regular WooCommerce product. But you can do it and you can do that bidirectionally as well.

[00:49:56] Nathan Wrigley: So can I ask you showed us you showed us a acf, which I think is definitely the right choice. Cuz it feel, it feels like it's the dominant force in that market. But you mentioned tool set, jet engine. Yeah. Metal box and pods as well. Does it offer. Basically the same functionality.

If you've got Yeah, if you've created a custom post, like with pods and Yeah. You've grouped a bunch of fields, it will do the same thing. You would click Yeah. And it, there, there would be the fields all mapped correctly.

[00:50:25] Mark Westguard: Correct. Yeah. Okay. Yeah. I don't know. Let's just see. I might have,

[00:50:29] Nathan Wrigley: Meta box you had there, I

[00:50:31] Mark Westguard: think.

Yeah, that one you've gotta win. Let's see. Oh, you need a license for that, do you? I've got a license for it, yeah. Oh, okay. But I just, it's a little bit of a pain to get that one started up. Cause there's so many different, I don't have the what's it AI version on there. Okay. Yeah. Which has everything on it.

Let's see if jet engine will work. So they use meta boxes? I believe so. Yeah. It's very similar. So you'll see on MeBox here, You have a meta box, which is a bit like an ACF group. Group. Yep. And then within that, you can then add multiple fields. And again, it supports tabs, it supports repeaters and all the core custom fields as a repeater here.

So you can do, multiple fields that repeat themselves on the page. So if we go to WS Form, let's just actually, is this Yeah. So that's assigned to a post. Yep. Yep. Let's go add new. I apologize if this looks a bit rough. This is probably just a test, but you'll see now we've got two icons on.

Yeah, got it. The poster there. Got it. So if we hit, so now it's gonna be mighty. This is gonna be an absolute mess. Yes. Still pretty quick. Still happen pretty quickly. Yeah. But there's the tabs that we got set up in jet engine. There are the fields that are within those tabs. If we preview that form, you'll see that it's actually built tabs for you.

Everything's ready to go.

[00:51:49] Nathan Wrigley: It's such a time saver. And do you know what's really nice? Like the thing which you glossed over at the beginning was the fact that it's okay for a start. It's all done for you. That's really nice. Yeah. But also the fact that it's done inside the interface of the form.

Whereas a lot of the other solutions that I've used in the past, you have to build the form. Yep. And then correctly, say, okay, I've got a repeater, then I've got a text field, then I've got a, I don't know, an image upload. Then you've gotta go to another interface. Yeah. And you've gotta start mapping them one to one.

Yeah. Whereas yours, it's done. And it's, and even if you didn't want it to map in that way, it's all in that one same interface, which makes it really easy to use.

[00:52:28] Mark Westguard: Yeah. And if you have an existing field and you want to convert that into the ability to create a post, you can do that. You don't have to use those templates.

So you can convert any form, add a post management action and off it goes. I'll see if I can get MeBox working

[00:52:44] Nathan Wrigley: quickly. Yay. Somebody in the chat, DD Clark. Thank you. Has said show MeBox. So they obviously wanna see you doing MeBox. Yes. Let's

[00:52:57] Mark Westguard: see if we can get it working. Here we go.

So MeBox and we'll go custom feel. Let's see if you've got anything. Not sure prebuilt, you've got a post one in there. Let's see what we've got.

[00:53:08] Nathan Wrigley: Fields. It's loading. It's loading. Oh, there, there's a

[00:53:11] Mark Westguard: lot in there. Yeah. We've got lots of groups in there. So here we've got a basic group of advanced.

So these are the different types of fields in meta that is

[00:53:19] Nathan Wrigley: attached to what a,

[00:53:22] Mark Westguard: where. We've got buttons, we've got buttons groups, we've got everything in there. So let's try that. They're all posts though, are

[00:53:29] Nathan Wrigley: they? They're all going into, yeah.

This is all post related,

I believe. Oh yeah. Sorry. That's how it works

in yeah.

[00:53:35] Mark Westguard: So very similar to ACF again. Really. So this is like your ACF groups? Yep. And then you've got you wanna assign this particular field group is to the post type

[00:53:44] Nathan Wrigley: of post.

[00:53:45] Mark Westguard: Perfect. Got it. Yeah. So you can actually assign this to multiple post types if you want. And they all do that, which is nice. So let's go to, This

[00:53:53] Nathan Wrigley: form is now gonna be

[00:53:54] Mark Westguard: breathtaking.

Oh, it's gonna be horrendous. Yeah. Yeah. There you go. So now it's detected. Yeah. It's got the m and you'll see. Look. Now I've got some other custom post types that are appeared because I've got those registered with but let's

[00:54:07] Nathan Wrigley: go to Oh yeah.

[00:54:09] Mark Westguard: So if we hit use template, I'm ho I'm crossing my fingers on this one.

It's taking,

[00:54:15] Nathan Wrigley: taking a little bit longer this time. It's having a bit of a think.

[00:54:18] Mark Westguard: Yeah. So somewhere in here it will be the MeBox feels. I don't know where they are, but yeah they're in here. But that's how it works. Yeah.

[00:54:31] Nathan Wrigley: DD Clark it works in the way you've seen, you just. Probably will have to, yeah, dig it out.

Oh, I see. Okay. You're gonna do it this way. Deactivate the others you're left with. Cause we've got,

[00:54:45] Mark Westguard: we've got a bit silly there, didn't we?

[00:54:49] Nathan Wrigley: Okay, here we go. Let's try again. Let's try MeBox. Use

[00:54:51] Mark Westguard: template if we can see them. Hopefully we've got this set up correctly. This is unrehearsed. So there you go. You go advance.

Look at. So there's all these different field types. Yeah. You'll notice these are at 50% width as well. Yep. I'm presuming in meta box somewhere. You set that up somewhere. We've set that up. Yeah. Let's have a quick look. So let's look at, let's edit that field group.

[00:55:12] Nathan Wrigley: Regular users of Metabo at this point are pulling their hair out like,

[00:55:15] Mark Westguard: no, mark.

Not that screen. It's, yeah. Not that one. Yeah. Yeah. Still amenable, I dunno where it's don't either. Somewhere in here. Oh, there you go. Column six, six outta 12. Got, yeah, you have to have the meta box column plug in, install to do that. But if you have got columns set up, it will actually set the columns up in your form as well.

So it'll pull that across. The other thing, I should have said this actually with ACF, but all the other custom fill plugins, what we do is obviously within. The settings for fields, you've got things like disabled default text, whether it's multiple, whether it's required, disabled, et cetera. We pull all of those attributes across as well.

When you are looking at the actual settings of these fields, if you set a field is required, it would actually be required in WS Form as well. One of the other things to bear in mind as well is that if you are using something like a c f and you've got a checkbox it will dynamically pull the checkbox options from a c f.

So if you change the options in a c f for a particular custom field, those will be automatically reflected on the form itself. So it'll keep those synced up for you. So there you go. There's MeBox as well. Nice. It's nice. Lots of,

[00:56:40] Nathan Wrigley: lots of, yeah. I guess the sort of utility on this will only dawn on you if you start producing websites, which are not just basic brochure sites.

As soon as you start getting into data and dynamic data and figuring how do I get that data? Yeah. Onto the post and what have you, all of this suddenly starts to become the utility of it becomes really obvious. Yeah.

[00:56:59] Mark Westguard: And it doesn't have to be this complicated. No. Some people may just have one or two custom that they want on a post.

And this will do that perfectly as well. But I just wanted to show, so you can see that this engine can really do. A lot. Yeah, indeed. Restricted to just text fields and things like that. You can do any type of field that you want. Across those different custom fill plugins.

[00:57:26] Nathan Wrigley: Marcus, you've made my day, your comment has obliterated mark's face, which Yeah.

Said it adheres to column settings, the attention to detail. Is astounding indeed. Yeah. Yeah. Honestly, every turn there's a little surprise, isn't there? It doesn't matter where you go. There's a nice little surprise. Just one last thing, just quickly again, if you fancy getting a discount on that, you can go to our link.

Mark showed at the beginning of the show. I've actually forgotten what it was, but I think it's WP Builds.com/link. Oh, yeah. There's me with there's the one with me going on now.

[00:58:06] Mark Westguard: I didn't.

Why is that funny? It's just brilliant. Why is that as funny as the expression? That's right.

[00:58:19] Nathan Wrigley: Yeah. Yeah. 20% off any edition. wp.com/link/w w nearly said WP WS Form. Professional as always, use coupon code WP Builds. We'll be back next week. Are we back next week or are you having a week

[00:58:34] Mark Westguard: off? I can't remember.

We're doing one next week and then we've got a break. Cause we've got break. And then we've got a little bit

[00:58:39] Nathan Wrigley: of a break. Yeah, that's it. Thank you. And next week we, hopefully we'll be tackling all the Woo commerce stuff. I think that's what we said. Yeah. So you've got a glimpse of it just there. And so Rob Kens is the definitely hysterical if Rob Cairns was unavailable next week and we built the most complicated pizza imaginable.

It's, that's right. We'll be back next week. I'll I'll see you then, mark. Looking forward to it. Yeah, thanks Nathan.

[00:59:06] Mark Westguard: Appreciate it. Take it easy mate. Take care. See ya.