JetEngine Repeater Fields & Frontend Forms

if you saw the video i released yesterday on using repeater fields with jet engine and if you didn't well there's a link in the description below and the corner right now you may be curious if you could use these in front end forms the good news is yes you can the even better news is that is exactly what i'm going to be covering in today's video now while jet engine based forms may appear complex and overwhelming on first inspection they are far more straightforward than you may first think in this video i'm going to show you how you can create a more advanced and feature-rich form that includes a mix of the default wordpress post features along with a collection of custom meta fields with a little sprinkling of repeater fields just to add that extra little level of spice i'll also show you how to set up the forms to insert custom post type data send an email to the admin to let them know there's a new post awaiting their approval and then redirect you to a thank you page interested cool let's take a look at the final results and then start building our own front-end form as always let's kick this off by taking a look at what we're going to end up creating so this is the submit your recipe section as you can see a nice simple layout but we've got a fully featured form inside you that allows us to do a load of really useful things so we can go through we've got various different wysiwyg editors so we can format the text the way we want relevant information and if we scroll right the way down at the bottom you'll see we have this nutritional information section and we can click add new and we can add in a repeater section and we can add a second one and a third one so we can keep on adding this information in as much as we needed to for any of these form submissions so what i'm gonna do in this video show you how you can include all that kind of data into your custom forms using jet engine now like i said before this is part of a bigger tutorial where we'll cover a lot more in detail but i thought this is kind of a really interesting important point that's really useful if you want to learn how to create more comprehensive forms using jet engine so let's briefly take a look at how the form is set up and some of the features inside there and then we're going to recreate everything as you can see there's normal fields inside you like the recipe title featured image content and so on we'd also notice that we have this section that allows us to create a repeater so you can see repeater start then the content inside there and then the repeater end this is kind of like a wrapper for any content you want to include in your repeaters if we scroll on down you can see i've got three different actions set up once the form is submitted we'll insert the post we'll send an email to the admin and we'll redirect to a page afterwards to say thank you very much and update anybody with information we need now this is a pretty basic example of a more advanced form and there are so many more things you could do with this so use your imagination and just really get stuck in once you've seen how to do a lot of this okay so let's take a look now at how we're going to recreate all of this for ourselves let's start by adding a new form so we're going to do is give this a title and we'll just say add new recipe and then we've got some basic information underneath you can see whenever we create a form inside jet engine we're always going to get a post id and we're going to get a submit button then we can add whatever we want inside there we'll also get an automatic setup for an action which is just to send an email but we can override and delete and do all those kinds of things we do need to make sure that we've got a post id and the submit button those are the bare minimum we need to create a form so now we need to do is start fleshing this out and linking it through to the various different normal wordpress post elements such as the title the description or the content and the featured image but also the custom fields that we've got created so with that in mind let's just take a quick look at how everything is already set up so now come to jet engine and we're going to come and take a look at our post types let's open our post types up and inside there you can see we've got one custom post type called recipe we'll open that and if we scroll down you can see we have a range of meta fields now if you're unsure how to do this i've got videos covering all of this so you can check this out link will be in the description below but we've got some basic information preparation time cooking time and so on and these are just text or text area wysiwyg fields and so on but at the bottom we've got this nutrition repeater field now i covered this in his own dedicated video yesterday and again i will put a link to that in the description so you can see how to use repeaters inside your jet engine forms but if we expand this out and i'll just show you the repeater is basically like a container for more meta fields grouped together underneath that specific container in this example nutrition we have three fields inside you the type the value and the percentage of allowance so these are each individual repeater item will contain three separate values and that's basically all you really need to know with that being said that's what we've got set up so now we can start referencing these inside our forms so we're going to keep this window open we can flick back and forth i can show you just to make sure you understand what's what's going on to be honest let's start by just adding in the basic normal wordpress fields for the title the content and the featured image so we'll just go to add a new field and you can see this inserts a new entry right at the bottom of our form so we need to make sure that we move this before we finish editing above the submit button submit button needs to be the last item inside your form so let's just lift that up from there i'm going to do is we're going to click this edit button to open it up and this now allows us to choose what type of field this is going to be you can see if we expand this we've got a lot of options inside you we'll go through a couple of these as we go through this tutorial but for now we're going to leave this set as text field type you can see again we've got more options so we could if we wanted to if we're using emails or urls we can use this option to make sure it's formatted correctly so people don't accidentally put the wrong type of information in so we'll leave that as text because that's all it needs to be i'm going to do is we're going to change this and we're going to call this type recipe underscore title so this is just the name of this field so we don't need to worry this isn't going to display anywhere this is just for our purposes so we're going to do underneath is we're going to put in the label and this is going to be displayed so we're going to just say recipe name if you want to put a description in so you can tell people what needs to go into any of these particular areas you could do that inside you we're going to leave that as it is required well with the title the recipe you'd need to put that information in so we can leave that checked you've got set input mask and if we expand this set we can choose various different input mask types so things like the default or date and time and then we can put a format in so if you're doing something like using a telephone number or something that requires eight requires a very specific layout format for example like you can see this phone number then you can set that up inside this input mask for this example for this entire tutorial we don't need it but it is there should you want to use it so let's uncheck that now we don't need to worry about default but you can put a default value inside there if you wanted to just to make life easy and show people what needs to go in there and you can set a minimum and a maximum length now we're going to leave all those as they are we're going to set the field visibility you can see this says for all logged in users or not logged in users well we want someone to be registered before they can actually be able to access this form so for a little bit of security we're going to say only for logged in users once we've done that we're going to hit apply changes and that now has added that field in there for us so we're going to repeat that a second time lift that up as well edit this this time we're going to change this from text and we're going to come down and we're going to say we want to use a wysiwyg area i'm going to do is we're going to just change this and we're going to type in recipe underscore and we're just going to put in content label just clean content inside there and again your description your default all those things are there the only thing we want to change is to set this again only for logged in users hit apply changes and we're going to do this one more time now for our featured image so we can say add another field lift this up we can reposition and resize these later on so don't worry and we'll again we'll take a look at doing that this time we're going to choose media for the type we're going to change the name of this to featured and we're going to change the label to featured image okay again we're going to leave everything else as it is there except for we're going to set some parameters to do with how people can upload things so we're going to say only one file and we're going to set a maximum of 5 megabytes and we can also then choose what file types we want to allow so we're going to choose these options and change this to field visibility only for logged in users now there's one other thing you absolutely need to do and that's set your user access so you can see at the moment this is left blank we're going to change that and we're going to say we only want to allow any registered user in this example so guests can't actually do this you have to be registered on top of that we say we've got the option to if checked a new attachment will be inserted for the uploaded file and in there we've got several options attachment id url an array with both the id and the url set in it we're going to set this to attachment id so that's all the things we need set up inside you now for our featured image so we'll apply the changes on there and make sure that everything is now in order so you can see we've created the recipe title the content and the featured image and these are the default wordpress post type entries that we're going to be using now we need to go ahead and start adding in our custom fields so let's do that next we'll click on add field we'll position this where we want we'll just drop this underneath the media and we're going to just edit this one as well so now we can come in and start configuring everything we need so let's just jump over into our post types and see what we have to work with so these are our custom fields preparation time cooking time and so on so we're going to put these in in this same order so the first one we've got is preparation time let's expand that out and we're going to just grab this name just to make our lives easier and we're going to copy that to our clipboard so to come back in now and this is just going to be a very simple value so text text is perfectly fine we're going to change this name and we're just going to call this preparation time on the label we're going to do the same thing again so preparation time description if you want to drop that in required i'm going to uncheck that just for the ease but i would suggest if you're creating a form that you want all this information then you need to put in the required option inside there you can drop anything else in all we're going to do is change this for logged in users only so we'll apply the changes on there so i'm going to go ahead now and i'm just going to put everything inside you and then we'll recap on what i've done but i don't want to bore you by showing you a repetitive process like this so i'll come back to you when we're ready to take a look at adding in the repeater okay so there's all my field types inserted except for our nutrition repeater so let me just show you now what i've got so this is all the information we need we've got the post id which is hidden the recipe title the content the featured image which are the wordpress features and then we've got all our custom fields underneath that now you can see we can delete anything from by clicking the little x in the left hand side we can edit any of these we can duplicate them and we can also set up conditional rules to when to show them now this is like i say a fairly simple example but what you can also do is you can resize these so for example the preparation time cooking time and yield would be much better on one single line so we can grab this right hand double headed arrow we can drag those across and we'll set that to one third we'll do the same for the next one to one third and the same for the third one to one third and then we can do is we can just literally drag and drop these into the order that we want just to make everything look a little bit neater and tidier okay so we've done everything we need inside here i'm going to save this draft so we just don't lose any information and now we're ready to put in our repeater now repeater works in a slightly different way we need to add a opening and closing kind of form element to encompass what we're going to use inside of a repeater so let's do that let's say we're going to add a field in we're going to drag this up underneath the calories per server which is our last entry and we're going to edit this we're going to do is we're going to change this from text and we're going to come down to say repeatable field group start once we do that we now have some options we can fill out to make sure everything is going to work the way we want it to okay so let's start setting all of this up first thing we'll do is give this a name and we're just going to call this nutrition underneath we're going to give this a label so we're just going to put in nutritional information we put a description inside you would just say insert nutritional information one entry at a time just so people can kind of get an idea of what we're doing manage repeat account we're going to set that to manually add new label we're going to say add new nutritional value required we're going to uncheck that because people can set this if they want to they don't need to do it calculate repeater row we're going to leave that set to default and we're going to specify that this is only for logged in users so now we're going to do is we'll apply those changes and we've created the opener for our repeater so we need to close that out so we'll add a new field in drag that above and we're just going to edit this one and we're just going to set this to be the repeater fill group end that's it that's all we've got to do so now we've got the start and the end we need to go ahead and put in the three different custom fields we want to use that a build up part of our repeater so if you're unsure what i'm talking about let's just hop back over into our relevant section we can take a look underneath our post types so there's our nutrition we'll open that up and inside there we've got our three fields type value and percentage of allowance so we need to create those three fields let's do that come back in add a new field in position this between the repeater end and the repeater start so we go in the right place we're going to set this to be one third like we've done before and we're going to edit this to make sure everything is set up as we want so text and text is perfectly fine we're going to make sure everything matches up now so this is just going to be called type and we're just going to come in there and we're just going to type in type and then we'll just put in nutrition type and uncheck the required from there leave everything else as it is except for the visibility and we'll just say apply changes so we're going to repeat that now for the second entry so we're going to just shrink this down to one third like we've just done before position that where we want edit this and we're just going to change this one over so again text is perfectly fine the field name just want to match these up just to make sure so that's a value so we're going to change that to value the label nutritional value uncheck set it to be only for logged in users hit apply changes and one third and final time so we're going to add that in we'll shrink it down position it edit it and we're going to do is make sure that everything is fine so i'm going to just come over here and open this percentage of allowance this is set to a number so we need to make sure we've got the right field type inside there we're just going to simply grab this name just to make sure that i don't make any mistakes come back over set this to be number field name we're just going to paste in what we just copied and then we're going to put the label in and we're just going to put in percentage of allowance there we go uncheck required and just consider this to be for only logged in users hit apply changes so now we've created our form let's save that draft so we don't lose anything and that's basically our form setup ready to go so now we need to go ahead and create the action that allows us to do what we want to do with this form when it's submitted now comes the important part setting up the post submit action so we don't want to worry about the send email let's just insert it in there by default so let's edit that and we're going to set everything up so the first thing i'm going to do is change this from send email to insert or update post so we're going to be inserting a new post second option is what post type you want to use so if you're normally using just wordpress itself then you could just set this to your post or page however we've got a custom post type called recipe so we're going to choose that from there then we can choose the post state there so what happens when you actually submit this post does it go into draft pending review or so on or if it's editing something do you want to keep the current status when you post or update a particular entry so it's cool to see that option inside there we're going to set this to be pending review so that means when someone submits a form it's not going to automatically go onto the site okay so then we've got all the different fields inside our form you can see everything is in order all we need to do now is basically marry these up with where they've got to put that data so the first thing is post id we're not editing a post we're creating a new post so we're going to leave that as it is we don't want to set any value inside there let's start off with the easy options and post id leave it as it is no entry at all recipe title we're going to set this to be post title recipe content we're going to set to post content featured we're going to set to post thumbnail so that's the normal wordpress entry so now we just need to marry these next load of options all up with the relevant custom meta fields so preparation time we're going to expand that out and this is a post meta so we're going to select that option from there it says okay what field is this going to be associated with well if we hop back over to our post type and we take a little look just close this down a second we can scroll right the way up and there's our preparation time so we can expand that we can copy the name or id from there so it's going to copy that head back over and we're just going to paste that inside there so i'm literally going to go through all of these and just do exactly the same going over copying the relevant name or id into the relevant section so again not to bore you i'll pause the video and we'll come back with all that's done okay so that's all the entries put in we're just now ready to finish this out by putting the nutrition information in so what we're going to do here is let's just hop back over into our actual post type and let's take a look at what's going on so this is our nutrition repeater so first of all we've given this a name on id of nutrition so i'm going to copy that from there head back over to our form expand this nutrition entry out and just set in post meta and again drop the name inside there so now we need to do the same kind of thing for these next three values and if we hop back over and just take a look you can see they're called type value a percentage of allowance so what i've already gone ahead and done is i've actually named these exactly the same just for ease so what i can do now is i can set all these to be post meta oops just set that to postmatter sorry and we're going to do is we say post method there as well and now i can just going to simply highlight those and copy their values in so just do the same thing for all of these copy that paste that inside there and the same name for the percentage of allowance and paste that inside there so we need to make sure we hit that apply changes again to confirm that we've added those in and we can expand that out and we are all good to go now we've got pretty much everything in place except for one more thing to organize all of our recipes we've got a custom taxonomy set up and if we hop over take a look there's our recipe type which is a custom taxonomy that's associated with our recipes so we need to use that to organize everything inside this form to do that we're going to come right the way back up we're going to add a new field in so you say add new position is where we want and we're going to just expand this out to edit it like we normally would what we're going to do is we're going to change this from text and we're going to just choose the option for check boxes because we want to allow people to check more than one option it just makes sense the checkbox is the easiest way to work so we're going to just change this i'm going to call this recipe underscore type then the label we're just going to say exactly the same thing again recipe type description up to you required leave that set to yes and then we've got manual input we don't want that we want to pull the values from our custom taxonomy so to do that we change this to the terms and now we can say where do we want to grab that from so you can see taxonomies automatically come up we can choose that from there and we can say we want to choose our custom taxonomy which is recipe type and you see value from meta field well we're not going to change anything inside there we are just going to leave that as it is so again form visibility and apply changes and then we just need to now add that in at the bottom so you can see recipe types are automatically been added in we'll just change this we're going to just choose the option for post terms and we can just choose from the recipe type so that will pre-fill everything out for us and again apply changes and now we can just come back up and we hit save draft on there okay so we've now set everything up our insert post is inserted everything is done for our forms we're just going to add a couple more notifications now we're going to send one for an email to notify the admin there's been a new post and we're also going to redirect once the post has been submitted to a thank you page so let's add a notification send email is perfectly fine for this so we can expand that out and we can now just go ahead and fill out what we want so send email is fine admin email is fine reply to we don't need to worry about that we're just going to say new recipe submitted for approval from name doesn't really matter too much to be honest we'll just say website admin from email address we'll just fill out a temporary one there we go the content type html is perfectly fine so now we have under the content section we have a load of macros and if you've ever used jet engine before you'll know macros are quite an important part of the whole where you can work so these allow us to reference the information that's been inserted into this form so we're going to do is we're going to put a simple message in and just say hey admin there's a new post awaiting approval and then we'll just put in those macros so i'll copy all of those except for the post id which isn't important we'll copy those from there and we'll just paste them in so this thing will just generate an email with this and pull in the data from our form so again we'll hit that apply changes option and one final thing to do add another notification change this from send email set this up to be redirected to a page and then we're going to do is we're going to redirect to a specific page so we're going to say custom url and i created a thank you page just named thank you so what i'm going to do is i'm going to print thank dash u and there's our redirect url and you'll see underneath now we've got add query arguments to the redirect url and again you can see all of the data will submit viral form this just allows you to very easily send that data over via the url and then on your thank you page or whatever page you want to send them to you could customize the information that's going to be displayed so you could say thank you for your recipe named blah blah blah blah and it's whatever you want to kind of do so you can choose whatever you want on here and send those over so that's pretty cool we're not going to worry about it right now but you can do it should you wish to hit apply changes and we've now created the three different actions after our form has been submitted so providing everything is in place we can now move on and insert our form into the page we won't let the end user actually fill out the data so let's hit save draft and actually let's just publish this let's hit publish we finish what we want to do on here and if we need to make any changes we can come back and edit things should we need to so let's go to pages and add a new page inside there so we're going to call this add my recipe what we're going to do is we'll just publish this page and then we'll edit this with elementor now you don't need to use elemental you can if you want to use gutenberg but for this tutorial we're going to be using elementor so let's just get rid of the title at the top and let's just simply add in a new widget so one column one row give this a little bit of space and we're just going to come into i'm going to come into advanced and from there we'll just drop in 100 pixels above and below okay so let's go to our widgets let's just do a search for form and we can see there's our form element we know this is a jet engine option because of the icon style so we just drag and drop that onto our page it says what form do you want to select or we're just going to type in the form name that we want to find so we say add new recipe which is what we've just created and you can see that now pulls in our form already set up with every bit of information we need so we're going to do is we're going to save this and we're just going to take a look at this on the front end because it's going to look slightly different because you can see even though we set up like ingredients and instructions and so on to be wysiwyg doesn't show in the dashboard of elementor so we're going to update this and we're just going to hop over and take a look preview the changes and you see there's our wysiwyg entry areas all perfectly fine if we scroll down which says add new nutritional type we can click and you can see there's our three entries for nutrition type value percentage of allowance so now we just need to go ahead fill out the relevant data and submit this form and see what happens okay so let's test this out so we're going to give this a name just call this sample recipe for example it doesn't really matter too much we'll just fill out some filler junk information choose a file i'm going to choose this one i'll a very nice looking meal preparation time again we'll just fill these out it doesn't really matter too much more case just to show you that everything works the way it should do so our nutritional value we can click and add that inside this we'll just say this is going to be something like sodium we'll say 4 500 milligrams and we'll just say that's going to be 50 of your daily allowance if you want to add another one in you can do that or you can then click the x to close it down and we're going to say this is dinner lunch and party food and we'll hit submit so that now should send us an email and then pass us over as you can see to our thank you page and everything has been set up correctly so now if we hop over to the dashboard of wordpress we should see that our new recipe has been added in waiting for approval there we go if we look at our recipes this is our sample recipe we just created if we just open this up and take a look you can see all our information is inside there scroll right the way down there's also our repeater section on the right hand side you can see our categories have already been set up and our featured image is inserted inside there and if we take a look at preview in this so we'll preview this in a new tab we can see what this looks like inside our design so you can see there's our repeater in the top right there's all the information about our recipe looks a little bit blank obviously because we only have some basic information inside there so now if we just jump back over into this we can see that this is still currently pending so save as pending but what we can do is we can just hit publish on there and that now has been published to our site all done through our front-end form and we now have a new recipe inside there so that's how we can use all these tools together including those repeater regions inside jet engine to create far more comprehensive forms this is just the tip of the iceberg when it comes to building sites using jet engine from croco block if you want to know more we'll check out this dedicated playlist next as always all of the applicable links are in the description below and if you've made it this side of the video well why not give that thumbs up button a click it really does help me out while you're at it if you like the content why not also click the subscribe button and slap the bell icon but if you didn't get value for the video well feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tets until next time take care

Channel: WPTuts

Views: 10,546

Keywords: WPTuts, wptuts, jet engine repeater field, jet engine dynamic repeater, jet engine wordpress, crocoblock jet engine, listing grid jet engine, crocoblock elementor, crocoblock tutorial, dynamic content for elementor, listing grid elementor, meta fields in wordpress, frontend forms wordpress, frontend forms jetengine

Id: _dj808mvXgk

Length: 28min 20sec (1700 seconds)

Published: Tue Mar 02 2021