Building Forms with Kadence Blocks: Introducing the New Advanced Form Block

5:30PM Jul 19, 2023

Speakers:

Nathan Ingram

Kathy Zant

Keywords:

form

blocks

field

kathy

site

question

label

progress bar

link

wanted

settings

email

put

set

users

add

chat

upload

beta

stored

kind of already a little bit broken as it is. We started I started just on a zoom call starting to make some changes. And I'm like, wait a minute. I think other people could learn from this experience too. So I stopped doing what I was doing and we're gonna switch the whole thing over and show how easy it is

doing it live. That sounds like fun.

Oh my goodness. All right, captions are live. If you'd like to follow along with the captions, you can click that link. And

those should be working for everyone now.

Welcome again, if you're just joining us, we are just now about four minutes away from getting started with Kathy Zant talking about the new Kadence blocks 3.1 beta that is out and ready for you to experiment with. I'm going to drop our link bundle in the chat again. If you're just joining us in zoom pop up in that chat. Say hi tell us where you're logging in from today. We have folks coming in from all over the world for this livestream. Super excited about that.

Welcome yoke in from Austria. Yes.

Glad to see everybody coming in so many new features to talk about in Kadence Blocks Three one including the one thing that is already on my list that I want to see. That's going to make me very, very happy which is being able to label your rows in the outline view. Yeah, see, that's like it's a little thing but how I need that. I don't want you know, I'm looking forward to seeing how that's going to flush out. So good to see everybody here as you're joining us. adna from Lithuania. Welcome. Marcus. Welcome Doug from Australia. Welcome. Doug it is early for you isn't it? It's like, what 4am or 5am in Australia. I'm not sure my math is right there but it's close.

Welcome at 4am Doug

May I tell you what, you get the you get the Ironman award for today. 4am on a live stream. That's awesome. So we are just now about three minutes away. If you're just joining us in zoom pop up in the chat say hi tell us where you're logging in from today. Glad everybody is here.

Busan welcome

I'm gonna drop in our link bundle again if you haven't seen that yet. Here are several interesting links first, the page that you're looking at right there on the screen to sign up for the blocks three one beta you can do that now get access, download it play along with Kathy as she is working through some of the things. Also there is a registration link for a YouTube livestream that Kathy is going to do on Monday at 3pm Central that where she's going to rebuild a and Elementor WooCommerce site in Kadence which ought to just be super fun. Also, we had I themes are in the process of transitioning to a new name and you brand solid WP I themes is evolving to solid web and if you'd like to know more about that couple of links there in the link bundle as well. Larry, welcome from Ottawa. Hey Barney from Virginia, about a minute and a half away before we get started, folks.

Hey, Doris from California. Right.

We have a lot to talk about today. It's gonna be a lot of fun. Hey, Derek from Poland welcome.

This is going to

be recorded as well. We'll have the recording up about an hour or so after we wrap up maybe a bit sooner, depending on how that goes. But if you want to rewatch or share, because this is going to be awesome. You're going to want to share this out with all of your Kadence friends. A guy from Tenerife. Welcome one minutes ago, folks, before we get started with the Kadence blocks 3.1 Beta reveal with Kathy she's going to walk us through all the features of all the things that Kadence team has been working on. And there are many things. Attendee count is ticking up so I'm going to share our link bundle. Again, it's there in the chat. If you're just joining us in zoom, pop up in that chat and say hi, and tell us where you're logging in from today. You can within the link bundle. You'll find the link to register for the blocks beta as well as a link to a YouTube livestream that Cathy's gonna be doing on Monday and then the link for the replay of this event which will be available about an hour after we finish. So just about ready to launch Alright, who's ready to see blocks 3.1 Can I get a yes in the chat? All right, it's three minutes after let's start the recording officially and get underway.

Well, good afternoon. Good

morning. Good evening, wherever you happen to be across the world today. Welcome to another Live I iThemes Training event. We are here with Kathy Zant from Kadence WP Cathy's going to be talking all about the new Kadence blocks 3.1 data. My name is Nathan Ingram. I'm the host here Dr. iThemes Training and Kathy, I am delighted to be back with you here.

I'm always happy to hang out with you and everybody over here. And I iThemes Training and talk about how to do more with WordPress and Kadence is doing so much fun stuff. I couldn't resist had to show you some of this.

Absolutely. So we have folks in the pre show you're greeting folks from across the world. Even someone in Australia who is really really early at this time of day, dedicated Kadence fans down in Australia. So glad to see everybody here. We do have a couple of things to talk about there in the chat. We've been mentioning these in the pre show as well. But there's a link here to the page that we're looking at on the screen to register for the Kadence blocks 3.1 beta so be sure to do that. We'll put that in the event description as well if you're watching this on the replay. I also an event coming up on Monday talking about moving Ella and Elementor site to Kadence WP I Kathy What possessed you to do something like this?

Alright, so my son built out a site. He's got an E commerce site and he built it out himself a few years ago. So it is an Astra slash Elementor site before I even knew that Kadence existed and that was the route that he that I advised him to go as a non coder to build out a site and he asked me how to do something and I'm like, Oh, we haven't put you on Kadence yet. What's wrong with us? So we jumped on Zoom and I showed him how to basically switch the Astra theme over to Kadence and then we started doing more and I'm like, wait, wait, wait, I'm gonna stop. I'm just gonna stop right here because I feel like this. I don't just want to show you I want to show other people so are you okay? If I use your site to show other people who may be wanting to move from a page builder over to building with blocks and building with Kadence block specifically can I do that and, of course, my son looking for me to do free work. He's like, have at it. He's, he's really ramping up his ecommerce site. He's going to be start running some ads and stuff. So he's he's all excited to move over to Kadence and to see how that helps his site, his ecommerce site perform. So yeah, we're doing that on Monday. And since Ben and Hannah who usually join me for these types of things are going to be hiking in the Rockies. Michelle for shot from stellar WP is going to hold my hand because I want to do this by myself. Right. And so Michelle is going to join me for for jokes, color and design ideas because she's always got some good ideas too. So it's gonna be a good time.

Oh, that sounds great. So that is coming up Monday and the link is there in the chat if you'd like to register for that YouTube live stream. Today, we're talking all about Kadence blocks 3.1. So Kathy gives us an overview of the things we're going to be looking at in the next hour or so.

Okay, well, I'm gonna assume that a lot of the people that are here have been sort of on the Kadence journey with us for a little while. Earlier this year, we transitioned from hints blocks to dot star over to Kadence Fox three. That was a big jump. Ben and the dev team did a lot of refactoring of Kadence blocks. For those of you who don't know Kadence is history. Kadence blocks was actually a plugin that was created before Gutenberg the blackout or was ever a part of WordPress Core. So because it was so early to the game, because Ben saw where blocks was going and said, I think I can I think you can make this better and created Kadence blocks. It's been around for a while. But Gutenberg says the speed of development with Gutenberg is just so fast, and some things needed to be refactored. So Kadence Blocks Three was a refactoring of Kadence blocks to and sort of modernization of the underlying code structure. What that has allowed our dev team to do is to rather rapidly make some changes to Kadence flex three that are going to change the way we build a lot of things with WordPress and I'm just going to show you some of the highlights of what this is all about. Of course, you've got a link in the chat over here if you want to go get the blacks three beta, blacks three one beta yourself and put it on a test server and kind of play along as I am showcasing some of the things that are are my favorite features that are coming. You can go ahead and do that. It is not production ready. Don't put it on a production site. Make sure you're putting it on a test site, but you can play along to and you can test things out and maybe you'll discover things that I haven't even found yet because as I was preparing for this, I was just like and there's this and this there's so much fun stuff that's going to make building WordPress sites with Kadence. So much more fun, so much easier, so much faster, and I can't wait to show you some of these things.

All right, that's what we're gonna be doing over the next hour. So if you're just joining us here in zoom, I see several folks have joined since we began the recording, make sure you have the chat open and you will see there a link bundle that has the link for the page you're looking at here to register for the Kadence blocks beta as well as the link to the replay. So if you miss this, if you've missed part of this or you want to share if you'd leave early or if you want to share this with someone else. We'll have the replay with all of the chat log the transcript and everything ready in about an hour after we finish. So as you have questions throughout, please use the zoom q&a function. So if you mouse over the Zoom shared screen, you'll see the menu bar appear and you can click the q&a button down there and that will give you the place to ask questions. I would suggest you keep it open because as other people ask their questions and us have the same question, just click the thumbs up icon and that will take the questions in the order of up votes when we get to the q&a part of today and we'll have plenty of time for that. So Kathy, let's get started. I'm looking forward to seeing all the things in Kadence Blocks Three one.

Yeah, let's get started. Okay, test sites. I have a few. One of them is my dog's site. He's a golden retriever and this is a landing page that I built out, did a video on just like some structures that are effective for landing pages. And so here's here's one of my test pages. I just installed Kadence Flex 3.1 beta on here so that I can show you what this will do for you and your landing pages. So of course, who doesn't want to see cute Golden Retrievers, that's what we're here for right? Row layouts. You probably have a few of them. If you are working with Kadence blacks, you probably have a ListView on the side over here that looks a lot like this. And we see all of our nested content here. And it's really hard sometimes for you to dive in and figure out like I just want to go change some text and you see your page. And which block is is this row layout. I guess I could click on it and it'll open it up. But when you're over here and you have like an entire page of row layouts, or an entire page of sections and it feels a little overwhelming. Wouldn't it be great to just like organize them in a way that makes sense. Welcome to Kadence BLACKstreet at one where we now have the option to rename blocks. So the first one is our hero area. And look at that. The next one here is going to be let's say our social proof area.

And now a row layouts

are labeled in a way that makes sense to your developers so they know what exactly they're going to be getting into. Now if you have frameworks that you're developing, you might probably want to think about how you might want a consistent naming convention across all of the sites that you're managing. So that when you have something coming in from like a design library, that that you're naming things in a way that makes sense. So this might take some strategies zation that's not a word. It might take some strategic thinking in order for you to come up with naming conventions that are going to make sense of you're using Kadence. Cloud, for example, and you have your own design library. You can name all of those things in the design library too because you're going to have Kadence Flex 3.1 installed there as well. So you can name things there. And then in the design library, those things should come in and have the exact naming convention so that you can keep things organized across all of your sites. I'm done. That's enough, right. But wait, there's more. There's always more there is so much more. Let's get to another page. I know that is enough. Doesn't that feel like oh my gosh, what a relief. This is all good stuff. We're going to add another page and I am going to show you

the progress. Black Let's do

five of them. So I what I just did, let's keep this open because we're going to show how this changes how we think about things. Okay, so this is going to be our progress

bar layout.

And we're gonna name that. In this section, I am going to add our new progress bar

and we're gonna have a progress bar there.

I have to close the chat so that I can see everything on the side and I'm going to make circles how's that? I actually can probably just copy these right COPY Black I'm always terrible at these because I have to do a paragraph tag

and then paste the block. And then it can paste the block.

Here's my next Oh, shoot it, pasted it. They're trying to do that here. And I'm still here. Alright. What I was trying to do here is add our progress bars

and we're going to do live demo where is my circle? All right.

Went so much better when I was practicing earlier.

I am going to move these guys. Here's our section. We're going to put our progress bar here.

What is going on? This is where I would probably just like start over. There are different types of progress bars that we can add. There are linear progress bars. I am going to start over and I am just going to do a quick roll layout. Not that row. See now what soon as one thing goes wrong then everything kind of goes wrong. Do a row layout and let's just do a couple of them. And we're going to do our progress bar. We can do progress bars that are just lines or we can do circles and that was the circle that I really wanted to show you. Then we have all kinds of different other settings where we can make these lines super thick like if you wanted to make it take up the entire circle you could do that and then your progress percentage you can set however you'd like that and let's say you wanted to make all of them I was gonna what I was going to do is 90% down. I have big dreams. But you can then add another progress bar. Let's say here. And this might be just something that's happening with I didn't put my focus. We're just going to set these this way.

Kathy Jake is mentioning in the chat that there's a bug with the progress bars in the editor. They look fine on the front end, but yeah, something he's reported to the development team.

Thank you, Jake. Thank you so much. I know you are playing with the progress bar because I saw you doing that this weekend. So there is a bug. This is beta. But anyway, there's fun tons of fun things that we can do with progress bars here. Um, tons of different implementations. If you want to show like progression of something or you want to show how various different social networks are being utilized or any kind of measurement where you're trying to show some kind of data. This is a data visualization tool that allows you to to basically show your data in a way that is meaningful. It's people don't read statistics, they want to see a visual representation so that they can grok that information immediately. So you can show the number there you can turn that off. And of course, with Kadence blacks, we like our animations if you want your animation to last a little bit longer. Of course we want to wait until the visualization is visible so that we can animate it as soon as that comes in the progress probook bras bar block has been in the works for quite some time and it is coming with Kadence blocks 3.1 So this is one of the new blocks. But really what I am here to do more than anything else, is to show you the form block because this is so powerful. So let's let's leave that and let's go to let's go to Kadence blocks over here. This is Kinz blocks 3.1 dot two, which is the most recent version of the beta that's available. You'll now see on the side, your settings, of course, and then you'll see a new link here for all of your forums. I have a number of forms that I've created. I'm using Kadence blacks and this test site and we're going to show you how these things work. And then I am using Kadence blocks Pro as well and one of the Pro features that is that enhances the form black is the ability to have all of your form entries show up in the database so that you can quickly easily export them to CSV. I'm going to show you how to do that as well. But let's get into building out forms. Now I have a number I'll give you an overview of some of the ones that I have already built out. But let's go ahead and just build out a brand new one. This is going to be the dialog that you'll see. We're just going to label this

form what test

where did my form block go there it is. So we have our form Black and I am going to start at well

let's arm test

I'm going to start a new page

and we are going to not title it yet. We're just going to dive into a form and we're going to start with a contact form with options and we're going to do just a basic layout here. You can optionally add a description here. So this will just be our optional description. And that is going to be just something that is just for you. Alright, so now we're going to create our form. And it's titling it for us here. And we have some auto populated fields. When you're just getting started with a form. It's typically easiest to just get started with some initial fields so that you can just start populating those things. So we're going to start that way first. We have our name field here in email. So you'll have to think through like, what data is coming in and how do you want that data to be, to be managed. So let's say we want our our name field to be set up as required. You can see that that asterisk is going to pull in there, we want to show the label we can put in a description that would be put under the display name for that. We can also add an optional an optional placeholder so we can say like if we wanted it to say first name, we could do something like that. There's one feature that I want to show you that is really cool. If I can move things out of my way and that is associated with

see where was it

our text field field controls and then

there is a specific oh it is part of the form itself, isn't it? This is cool. This is so cool. And it's something I know that our dev team is pretty proud of for our input

fields. And that is under our labels.

So let's say we have our labels right now our name or email or option one and two is all above the actual field. There's something called float label that now brings that name the email into the field itself. And when we go into then populate that field, the label pops out

above it. So if you can see how

that behavior is working, so that setting again is for the entire form. It's not a field by field setting. So by the entire form, you would just go to your input settings and your label layout style, and that is called a float label. So that's something you that you can do. You can do an infield label as well. So that would show up something like that. Um, so that it is kind of within the container of the box. And again, that is all under the form settings for the entire the entire thing and then of course we have labeled colors. The Asterix color, you can change the color of that, like if you wanted it to be a specific color of red or whatever you wanted to do. You can set up the font sizes globally for your entire entire form. You can set that up here. I am going to set this up because I really liked that float label. I think that that is lots of fun. We're going to play with that just a little bit. Our options are there's when you want to control the input that is coming in from your users. There's a number of different ways you can do it. You can do it with dropdowns. You can do it with radio buttons, and you can do it with checkboxes, typically with dropdowns and with radio buttons, those are things where you want somebody to select one answer yes or no or a maybe. Or there's one item within each of your dropdowns if you want somebody to be able to select multiple things, checkboxes are the way to go because then they can have as many checkboxes as they need for these dropdowns for these options, you can go ahead and select as many as you would like here for these options, and then your labels and the default values would be set up here. You can also set this up as a multi select for this drop down typically with accessibility. Multi fields, I believe are something that can cause issues if accessibility is an issue. Um, you might want to do checkboxes instead for that because it might be just a better user experience. But if you're doing something internal and accessibility isn't that big of an issue, you can do something like a multi select and a particular drop down. And since I'm mentioning accessibility, I mean accessibility and forms is kind of kind of a big deal. And there's a couple of things that that we want to make sure we are doing with this hover. That name is it's still going to be accessible because the screen readers are going to be naming you know, with that hover effect there. But there's other things that we can do to help people with screen readers. For example, field name, we can enter something there and the input area description we can put in a longer description, other than just the field label, we can add that information there as well. And these are all under our extra settings under Advanced for for this particular field. So your that's where you're going to find the additional information for ARIA descriptions and for for all of that. Okay, email there was something I was going to show you with email. You'll see here the dynamic content. This is this is just the first advanced form black, I can imagine. So many new things that are going to come to us with dynamic content. And what's going to happen with with the form block. For example, if you have a very data driven site where you have user input, and you have logged in users that you would like them to be able to update their particular information. And you have all of that stored in stored in custom post type. This is something where you can start then to tie all of that information and so let's say for the email, we can tie to the current user. Just going to be gonna open up a whole new world of being able to manage data driven content with your users with the advanced form block. So much fun stuff happening here. I want to show you now some of the let's go over some of the

additional fields that we can work with

here. We have a job application. And when somebody is applying for a job, what happens they want to upload a resume and now we have a new field capability that allows you to take file uploads which is super exciting. So if you have users that are uploading their photos, or they're uploading resumes, all of that is now available in the advanced form black. Just adding a new field let's say we wanted to add another field we have the cover letter here we have the resume here but let's say we wanted to have them upload references or something like that. We have all of our fields here. One of our advanced fields is file and we have our field label we can add that so let's say we want our references. Not that shown. We want that to be a required field. And we can add in of course a description here. We can set up our file options with the file size limit 10 megabytes, it'll show you down here your WordPress Max upload size make sure that whatever you set up here, you might need to change that in your PHP if you're like me and you're on a test site with two gigabyte limit. five megabytes seems to be our we should read that from that's possible. Note to devs. And then you can what kind of what kind of file types you can limit this which is is probably good to do. So if we don't want people to be uploading anything other than maybe images and PDFs, we can select those. I recommend just like not having everything you want to limit it to things that are going to make sense for you. And all of that can be done without any coding right here in Kadence box. Some extra settings that are available again area descriptions and field error messages. If it if you want to customize this, that's always good. If there's something specific if you have a required field, this is going to default to references is required. But you might want to provide some additional context you know, that's something that you definitely want to think through other things, let's go and add some more fields and just take a look at some of the fields that we have available. We have of course our text field first name, address, all of those standard short answer types of things. Email field, which is going to be something that's going to check for email validity. We have text area for longer form. We have selects, which are those dropdowns or multi select radio buttons on the telephone field will be formatted for telephone. So there will be some extra wires settings for that. I believe there's I thought there was additional settings there but again, some of the standard settings there. checkboxes number if you want to limit somebody to be just typing in numbers rather than text. And this is kind of cool because you can swap easily back and forth between the text and number, telephone those types of things. Next up, let's look at some of these advanced fields and talk those through as well. So we just talked about file uploads time. If you want to have someone enter in a time and it has to be specific to that fit file or to that datatype we can do time and if you wanted to have a placeholder for that. Like say for example, you wanted to let them know that they should be typing in

placeholder field label. No, that's time

and then the placeholder are the default values. Or we would do that. Like if we wanted to make sure that people were using a specific time format just to show them what what is expected to be coming in for that particular type of field. So advanced fields, hidden fields, I wanted to talk about hidden fields a little bit if you're not familiar with the underlying HTML types of fields, a hidden field is something that a form would submit, but the user might not know that that is being submitted, but that information is going to be captured somehow. And that is going to go into the data that's submitted to your database or submitted via your form. The the implementation that came to mind to me as a marketer, for a hidden field here would be for example, like if you're doing some kind of campaign, and you have UTM codes coming in on the query string and you want to know, for example, the UTM source of where this is coming from or the campaign where it's coming from, and you want to capture that along with the data that's coming in a hidden field is a great way to do that. Because you don't necessarily want the users to be thinking about all of that crazy stuff, but it's something that's important to you as a marketer to see what is coming in and what is important. So field label would just be something because it's hidden, that would just be internal to us. So let's say we want to call this UTM source, and then our default value. Make sure extra settings populate with parameter. So here is where you would enter the parameter that's going to be used for that particular page. So if on the query string on that on the parameter line for the URL that's coming in and you want to pull in UTM source, you can put that there and this isn't something where you can do ampersands and like tie it all together the way it is. And the and the query string and that URL, you would have to set up different ones. So let's see we want we want to say that UTM source is coming through, but then also we want to check the particular campaign sender extra settings populate with parameter. And so we are going to store UTM campaign and I am going to also put that into our field name for both of those as well because that is going to be so I would just populate those the same way. And I do that right? Yeah. And it should be Oh, I didn't set it up under here. So So I would set it up in all of those places. And then that way, that hidden field is still going to get populated and still going to be stored and it will give you additional information of what's coming through on that form. So hidden fields is another fun part of fields that we have to play with. Then if you take a look at how the form block is laid out, again, we can we can rename this as well. So Kathy's breaking things, this is what I do, and we can name that exact form any Kadence block job application, we can change this to

change it to

advanced text application, you change it to whatever you'd like same thing with the row layout. So you see this is all nested so you can have row layouts with in your form as well. So let's say we see our form here and it has two columns. It looks pretty nice. But somebody says we need to add something else to this row. Pretty easy to do, because we have that row layout within the form. So the row layout within our forms, keeps things nice and neat. So we want to add another field here. We can do that. Let's say we want to add

I just want to add a text

field. So we're going to put that here and this is going to be our suffix. We can even do that as a drop down if we wanted to. But we have all of those nested in here as sections on that particular row. And let's say somebody because we are we are within that role layout, and we still have the capability to move things around. If we wanted to shoot I clicked in the wrong place. We wanted to say we don't want to have severe side effects. We put it in the wrong place. We would like this to be someone's title so that Mr. M is whatever we can switch that around very easily. So all of the benefits we got with Kadence blacks three are here with us with Kadence blacks 3.1. Let's see. I think there's a few other fields we were going to take a look at. And then we've got all of our layouts, all of our sections. capture us. Again, we can do captures here, you'll have to add your API keys. And turnstile H capsa are also options there as well. But again, I'm almost certain you know the Kadence original form Bach has a honeypot associated with it that I've had some good success with. I haven't felt the need to put reCAPTCHA on things and I'm almost certain that we have that same honeypot. I can't imagine why it would not be here. So you can still use the honeypot that we have for our form

somewhere I'm certain it's here with our settings maybe it's not alright. I know there

are a lot of people here myself included, who have been waiting for months, maybe years to hook up ConvertKit to our Kadence forms. And instead of having our our ConvertKit forms, to be able to just use an API and take our Kadence forms to be able to populate straight to Convert Kit that is now an option with our with our form it's so it's under form under General after submit submit actions, I would like this stored to email I would also like it to go to Convert Kit and then I also want it to get started to the database. So you can do all of those things. One of the funky things about forms. A lot of people just think oh well I'm going to get the email and that will be enough. First of all, it's really important to make sure you have SMTP setup on your your hosting account. There are plugins that it'll do it for you don't trust that email is like don't just send it off to email, always send it someplace else as well. That's one of the benefits of having this database entry because you know, it's still on the same server. There are so many different things that can go wrong when you're sending something to email so don't ever just like set up a form and just rely on email and then why am I not getting these things? It's just like the worst nightmare in the world to realize that you've had a form capturing leads and all of the leads maybe didn't get captured because of the the dependencies that go along with email. So always try to send it someplace else as well database on the same server being the best way to do so. And then go check that those database entries as much as possible as well. Some of the other things that we can do, adding a form description. Once the form is submitted, we want to give some kind of feedback to our users that the form submission was successful. I know like contact form seven had would just have like this green label across the top at least back in the old days, you may have changed it and the form was still there and you were never quite sure did it go through because sometimes you would miss that green label that would hit above it. Hiding the form after submit is one great way that we can visually represent to our visitor that hey, yes, this did go through and then of course we want to have some kind of confirmation message. So our email settings making sure we set up our email of where we want things sent to the subject at whether or not it's an HTML email. This is all standard to the things that we had with the standard form black. But again, it's here for the advanced form block as well or database entry settings. If GDPR and privacy considerations are important to you, um, you might want to turn off saving the user's IP address or their device information. You know, that'll be on a case by case basis. Make sure you have a privacy policy if you are storing user data because the user's IP address is considered PII or personally identifiable information. So make sure that you know if you are storing things in the database that you take good care of that and that your privacy policy is reflecting that as well. ConvertKit settings if you select ConvertKit this option will then show up for you. And you just need go into ConvertKit and put in your API key. And then of course test it make sure that that is working, and then your message settings. success message, I hope while we do have some messages here that will help your users understand whether or not their form was successful or not. It's really important that you customize these and really think through the user experience. on making sure you have a good success message that the form validation error if there's like a field that didn't get populated correctly, that those error messages all make sense. And if you have a required field, there's an option for each field that you can go into and set up a validation message for that particular thing like last name is required example. And then if there's an error message that you provide more information and some direction for for what you want your users to do, I've been talking a long time and I bet you there's some questions Nathan I'm gonna take a drink of water.

Oh, there might be one or two or 16 questions in the list right now. All right, folks. How cool is this? What an amazing form builder and great addition to Kadence block. So if you have a question you haven't asked yet and particularly if you asked a question in the chat, please put that over in the zoom q&a. So we can take those questions in the order they have up votes. And also just take a minute to pop up in that q&a box if you haven't already scanned through that list of questions. And if you have the same question or want to hear the answer, click the thumbs up icon to vote up that question. So let's get started with a question here from Sue Kathy Sue wants to know if Kadence forms have conditional logic tool if I check this something else happens

that's coming in writing. It won't launch with that but it is coming and one other note, even though this you know, I know. This is a lot. There's a lot of features here and there's a lot of functionality here. If you don't use the advanced form block, it's not going to load on the front end of your site. Only the blocks that you have populated on a page will load on the front end. of your site. So even though this functionality exists for you to use, it doesn't get registered on the front and to your users. It's not going to create additional bloat. And last well not that it's creating bloat, but the functionality of anything doesn't get loaded. This is just how Kadence is architected.

Yep, really smart.

I'm gonna skip down just a little bit here because we had several questions come in about can Kadence the new Kadence form block replace fill in the blank popular forms such as Gravity Forms or fluid forms? What

do you think eventually

I think that I mean, I just I know what's coming and there's a lot of functionality coming where it is. Today there's I mean, Gravity Forms is and Ninja forms and all of our I love my form sprites. They have tons of functionality there's a lot of functionality that, you know, they do because that is their core business, whereas we're kind of like more of a generic generic site building tool. I think it's gonna be on a case by case basis, but I think what you're seeing here is that the functionality, the ability to deal with dynamic content and pulling your users information to be able to tie into advanced custom fields. It's stuff's common.

Yeah. And so just for example, if for a simple site build where all you really need is a contact form. There's no need to install one of those plugins, it's all built into Kadence box,

right and there still is the the standard form block. So the form block that you have right now on your production site using Kadence blocks, three, that form block still exists. So if you have built contact forms or newsletter, subscription forms, all of those sorts of things. Those forms are not going to necessarily be migrated over to the advanced form block, they're still you know, that block still exists as something that you can use. But this is more for like new things. And I, you know, the existing form block is pretty simple. And it's made for like contact forms, and it's made for subscriptions and things like that. This is more for job applications. And you know, we need to do a lot more intricate types of things. So yeah,

and that's actually a really good point that we should highlight is the advanced form block does not replace the standard Kadence form block. They'll exist side by side in the set of blocks,

right? Yeah. So if you look at let me just insert after Hello. It's still in here as an option. So if we just look

at our forms, where's the form block?

It was there a minute ago. I'm sure somebody can see it on my screen better than I can see it on my screen, but it is. It's still in there. And the other thing that another thing in Kadence box 3.1 Is that our naming is on some of the blocks are is changing so that when I'm still in the form, I think that's what my problem is. I think if I want to just like a new page, and I'm in forms, if I went to a new page, then I could add,

add new,

and then let's take a look at some of those other blocks. So you can see that form block is still there. And then some of the other fields just to make finding things easier. You'll see the form has a DV for advanced text ADV gallery, just so like when you're trying to find something really quickly and you just want a textbook that's going to come up faster, or if you're just like I wanted to stay in Kadence and just type ADV it's going to pull up all of these guys, that type of thing. So that's another little thing that comes with kins box 3.1

That is handy. Yeah. Okay, thanks.

Yeah. So this question came up at the very beginning when you were showing the progress bar and K wanted to know if you can make the number in the progress bar dynamic.

Number of dynamic. Pretty sure. Dynamic.

So yeah, so that number of the progress 90 of 100.

Yeah, like if you wanted to tie it into

that into a database field.

Yeah. Good question.

You know,

I don't see

I see a dynamic content icon.

Yes. Yes, you can. It's right up here. Sometimes it's on the right, sometimes it's up there. It's right up there. So let's say you had a post custom field and you had data that was being manipulated in a custom field and you wanted to pull that in as your as your information. You could do that. I don't have anything set up here. And we don't have time for it. But look at there. That's

pretty cool. There it is. All right.

Question for Sue are the inline or floating form labels accessible by screen readers? Will they read those?

I believe so. I have been beating the drum about accessibility. And so I know I'm watching it. So yes, I believe so that those are accessible and screen readers will be able to read those well and we are working on tons of deck because forms and accessibility is kind of like this thing. We are going to be working on some documentation and best practices for how people can create more accessible forms.

Nice

question here from Marcus about some integrations with Amazon SES to send email. And also is there a way to post form entries into fluent CRM?

I don't know about the

fluent CRM, but the beta download is available from that link that Nathan shared earlier. You can test it I don't know. I don't know the answer to that one. And then

Jake says that you can in the Submit actions.

Oh, yeah. Yep, yep. Yep.

Flow forms we've had we've had connections to float forms for quite some time,

influence CRM.

And then the Amazon SES would probably be controlled with a plugin outside of the forum where all of your WordPress email that would be a better practice. I think so all of your WordPress email gets shifted through that transactional email service. Yes,

yes, exactly. So that so many hosting providers do not have PHP, email or mail function set up. So the best practice is to have a plugin that does that whether using Mailgun or SendGrid. Or there's tons of different services that will allow you to send emails and you just have to have the plugin installed that does that actual transactional email. Always test your forms email, and then still not trust your form. So let's start in a database. I think I have some PTSD.

Like, oh, no, that wasn't working.

Absolutely. All right. Marcus would like to know if there are any options to deal with GDPR inside the advanced form.

Dealing with GDPR

I guess specifically, this would be if if you get if you are contacted by someone who wants you to remove their information, is there a way to find entries that are associated with that person?

Yeah, um, so within, let's see. I would,

how I would handle that is I would make sure that you're storing to the database and that all your form entries are here so that you can quickly filter on them. I don't have any entries here to look for, but you can export to a CSV and search that way you can filter and search for that particular person's information. And one of the things that I am going to do that is on my list is I am going to actually address that specific question of how to use Kadence forms in order to take in the GDPR data removal requests and how to handle all of that. So I am going to take that as a question and answer it and show you exactly how I would handle it in that particular video.

That sounds like a fun video to come in. Marcus clarified what he meant in the chat. Live checkbox to consent to your information handling site and so forth.

Yeah, um, that is that there's a specific form

field that I forgot to mention about that. Let's say for example, we wanted to add that here.

Where which one is it it is the advanced field accept. So

so if you wanted to accept the privacy policy whatever you wanted to put in there, so this is the acceptance thing. And we can make that required. Perfect. And for that you do not want to start check. Do you want to make the user take action? Yeah.

Let's see. How about multi step forms? Is there any any work done toward that? In that direction?

I am certain it's coming just because as I'm working on the progress bar, and in the forums, I can see how all these things are kind of coming together. But I have not I have no idea where that is on the roadmap, but I could see it coming.

Interesting.

So before you leave the page, you're on Kelly had a great question in the chat right now of could you can you put HTML in the field label to make that privacy clickable to the actual privacy policy?

surround that well, where you were, if you surround that with the privacy with HTML, or maybe put it in the description, just put an a tag around that see my keyboard

Yeah, it looks like it's picking it up. Yeah. Muhammad says there's a link option is there maybe under advance

Enter a word or two without spaces to make a unique web address just for this blocks called in Yeah,

look at that. Just in the toolbar. We're bold. italic link. In the, in the content area, in the toolbar, there's a link Bold Italic, just to the right.

Bold Italic, Link. Oh, yeah.

So we could do something there to make the whole thing linkable? That's a good catch Muhammad.

Yeah. Nice. Boom. Okay, so that'll be in the actual

item, but that's fine. Either way, you can still there's multiple ways to get a link out there to your privacy policy. That's pretty cool. Okay, moving on. Do we have still several questions stacked up here, Stephanie? Are what where are the uploaded files stored when they come in through the form?

Um,

good question. I have not tested that. So they're stored on your server somewhere. et Cie. Now, this is one thing that I am going to like play with because I have malware on my computer, PHP malware. And so I am going to try to hack myself through this and see if I can get malware uploaded, because I like to try to break things because uploads and security makes all my alarms go off. So we'll make sure that can't happen, because I'm going to try it.

Interesting. Alright, so just continue to follow the Kadence YouTube channel for all the things Cathy breaks. That should be your new YouTube channel, Kathy. Yeah. Kathy breaks things and that'll just that'll be it.

Yeah, definitely. I need to register that domain.

So following up on that, so you wanted to know if there's an option to specify where uploaded files go could there be like an add on to upload to Dropbox or Google Drive or whatever?

Good question.

I have not seen anything like that. But

if server uploads Yeah, I like that idea. I'll find out. Excellent.

Let's see loss is asking. I really don't expect it but any chance for calculations to be made in forms?

Calculations. Um,

I don't know that we have anything like that. We do have a date picker. I forgot to show the date picker. So that exists for for dates.

It's not a date picker, is it

might just made a duplicate. I'll ask I don't see anything with calculations available. But that might be this. This is a lot of functionality coming in a v one of a function of a form

really is Yeah. So there's going to

be a lot more coming. So

right and imagine how the Kadence team will iterate on this in the future. That's this is exciting. Yeah. Okay, question here from Paul. Is there any reason or way to ensure that a Kadence form will submit I've tried on three different sites various email accounts to form a form submit email is never received. Somebody suggested trying SMTP plug in what else should I try before I go this route?

Make sure that it's being saved to the database. Save that first, because there's so many things that can go wrong with email. Um, I would, I would first make sure that it's being saved to the database before I start troubleshooting the mail, but the mail is going to be an SMTP plugin. You're going to want to make sure that your site can send emails, all of that there's a lot that goes into that, but that's where I'd start is with the database first.

Yeah. And honestly, it is a particularly if you're, you know, our audience here on iThemes Training is people who do WordPress with clients. And I recommend over and over and over again, just invest in a transactional email service. It's worth it. In my agency, we use postmark it costs $10 a month and it covers all our clients are one $10 fee, and it just works and you don't you don't have to worry about those things. Okay, let's see. Next question. Marcus. Can you show a bit about the style customization options? Can we change backgrounds fonts, rounded corners?

Yes, yes. And you can change things based on the form itself, all the styles so you can change your input colors placeholder colors. You can change your input backgrounds, if you'd like to get really funky with things. You can change your font sizes, for for various things. All kinds of different case settings. So anything that you could style in the past is something that you can style, your padding, how you want your labels to show up if you want those to have a particular color, font sizes for all of that fun stuff as well. Radio checkbox labels if you want those to be set differently. The Help Text how you want that all set. I know our time is coming to a close so but there are so many different style settings here.

All of the styling features you see on other Kadence blocks are baked right in Yeah, which is super cool.

Yes. Yeah, look, you can style a lot of things individually as well with additional CSS. So yeah.

Kelly wanting to know any plans on adding repeater fields or form submission by Ajax

repeater fields Yes, I know that that is in process. I don't have a timeline on it. But I I know it's in process. And I don't know about Ajax submission.

question here from Bob. Is there a spot on the Kadence website now and documentation or a blog post or something where it shows all of the things in the new forum block?

All coming? It's coming.

It's all coming. Release date on this as we're counting down. It's it's days, not weeks, so Well, less than two weeks. We'll just say that.

Very exciting.

We'll take a couple more questions. We're already at time now. We'll do two more questions. And we'll wrap up Kenny would like to know Kathy, what does the output look like? When it appears in an inbox for form submission? Then the the is there a way to cut I think the question here is, is there a way to customize the email that might send to a person or to the site admin from a form submission?

Very good question. You can set it as an HTML email as settings with in within here mentions

customization of

that could probably be done but I think it would have to be done code wise. God I'll have to find out. I don't know off the top of my head.

All right, last question. Can you believe would like to know if you can upgrade from the standard Kadence form into an advanced form?

I was playing with that earlier and I didn't find a way to do that. But I can find that out but the here's the deal is most of your your current forms with Kadence. Using the current live production version of Kadence blocks are pretty simplistic forms. So recreating them here would not be that difficult.

Right? That's kind

of what I was thinking. And there's just one more question left here and an anonymous attendee would like to know what CAPTCHA services are available on the form?

Yes, um, CAPTCHA CAPTCHA is

you know, we have turnstile, CAPTCHA. reCAPTCHA H CAPTCHA. All those settings. I don't remember exactly where they are. I know it's H CAPTCHA. reCAPTCHA I think the two and three and then turnstile. And I'm pretty sure the honeypots here although I tried looking for it and didn't find it but I know our current version of the form block has Kadence honeypot and I'm almost positive that it's it's available on this form.

as well. Looks great.

All right. So many things. So many things in Kadence blocks 3.1 coming in. days, not weeks, days, not weeks.

Yeah, well, we'll just say is less than two less than two weeks

less than two weeks.

are here. Very good.

All right, Kathy. rap about actually Sue has suggested that we start a GoFundMe for a bottle of wine for you after this demo.

wasn't that bad, although that progress bar lab with the hot come and have to go fight with that. That was supposed to be super easy. earlier and that one, just act.

There's always going to be something that goes around a live demo. So good stuff. So Kathy, you're wrapping up here give us a few takeaways as we're as we're finishing.

Yeah, sure. Well, our takeaways are go play with the new form the advanced form black please beta test it go beta test. That progress bar black so that I can like sleep. I need that more than wine. Go test, set up a test site and play with how you might be using it. And, you know, this is going to it's going to make building out more data driven sites. That's what I'm really excited about is when we start connecting this to your advanced custom fields, your custom post types, where we start making it easier for our users to like update their information. All of that kind of stuff is what I'm really excited about. You know, it's great to collect information and store all of our ATMs and see what's what's working for us. But when we really start getting functionality to our users, and see what they're going to do with it, then that's when the really, really powerful things happen.

Very cool. Well, thanks again, Kathy for a great demo today. Marcus wants to make you the official Queen of the United States. I don't know if we can do that. But

I have a tiara.

Michelle sent it to me. I'll wear it on the livestream on on Monday. I'll

absolutely do that. All right, y'all, that's gonna wrap us up. I've just dropped in the chat one more time the link for all the things the link to sign up for the Kadence blocks, three, one beta, it's there. The link to watch the live stream, which is coming up on Monday at 3pm Central where Kathy is going to be rebuilding an Elementor WooCommerce site using Kadence. And finally, the replay link if you want to rewatch any of this or share it with a friend we'll have that up in less than an hour from now at the link there in the chat. Well, Kathy, thanks again for hanging out with us today. Folks. That's gonna do it for us. For this livestream. I'm back for I iThemes Training members tomorrow for office hours as usual at 1pm Central. That is tomorrow, July the 20th. Have a great rest of the day. We'll see you back here tomorrow and iThemes Training

you