Multi Part Forms with Ninja Forms

multi-part forms are a great way to shorten these long forms that you have sometimes you need your client or your user to fill out their name email address their billing address their shipping address check this box and that box so on and so forth that could lead up to a very very long form breaking that down into a multi-part form is a great solution for these long extended forms aloha everybody i'm chris joles and today i'm showing you how to make multi-part forms using the ninja forms plugin you do need the premium version of the ninja forms plugin to make these multi-part forms if you need to get that i have a link below that's an affiliate link and if you use that link i get a small kickback and it helps the channel grow so without further ado let's get started making multi-part forms all right so here we are at our sample website your divi website dot com and i've created the contact us page this video i am going to make a show you how to make multi-part forms with ninja forms the paid version is needed to make this kind of form as well in our plugins you have to have installed ninja forms this is the free plugin that comes in the wordpress directory and then you need to add the plugin that provides the functionality that you want for instance in this plugin in this form we want to create a multi-part form so i need to go to their website download this plug-in install it and activate it which i have done here all right so here we are at our ninja forms dashboard and you'll see i have created a form that i just showed you a multi-part form let's take a look at that form a little bit more so you'll see here that i have a three-step form one two and three you know sometimes it will let you go to these next ones these next steps but it won't let you if you have fields that are required that are not filled out okay and it will not let me go to the next step unless i have these fields filled out i'm going to fill them out real quick so you'll see here i've filled out the form and i've met all the requirements and then now i could go to step two okay so in step two let's say for instance i want my user's address so they would enter the address here and then go to the next step so you could do this with as many steps as you like to gather the info that you need let's go ahead and fill this in and go to the next step and so after we've filled in the required fields we could go to the next step and then finally after these fields have formed we could submit the video submit the form as you'll see though i haven't made these required so i could submit the form even if these are not selected so maybe on your third step you have a list yeah your client selects a color or a size they want or something okay and then you could press submit and then you could also go to previous steps and resubmit those as well so let me just go ahead and show you that since you already know how to create a basic form and if you don't i'll post a link to my previous video on that one so let's go to a multi-part form here and we're just going to go ahead and select it and you'll see here that i have a step two step three and obviously the step one of each step of the form those are my set first set of fields here are my second set of fields that i have made required as well and then finally here's my third step with my submit button so let's just go ahead and close this let's create a new form and we are going to go ahead and select blank form and here we are at our blink form and first what we want to do is go ahead and go to our advanced tab and come over here and select the multi-part form now you may or may not have these other options depending on the settings and the plugins that you have installed on your installation okay so we're going to select multi-part and then we're going to select our options that we want so we want to validate each part before we move on that's usually a good idea and that just says that if one section has a required field it makes sure that field is set up correctly before it moves on to the next step uh showing the breadcrumbs that the breadcrumbs are showing you the steps we do not need a progress bar on a form like this we want to show the the part titles that's a good thing to have if you have a multi-step process and kind of telling them what they're doing we want to show a previous button and the next button and this is what you would say the button would read okay and then styles you could we could style later in another video i'll have that posted above so for now we're just going to go ahead and press done and we're going to go back to our form fields and so what we're going to do is going to go ahead all add all our basic form fields that we need when we start usually a form so we've got our first little tab here and so this one we could add a new step to our form okay so now we're just going to go ahead and add more forms that we want here let's say this one we want our user's address and that would be done and then you will see here we have our second step so if we look at our preview and we come down here we'll see we have a two-step form and that we could go to each part because i haven't made any of these required okay so when they're not required we could go on to the next part without any kind of issue let's go ahead and go back to our form and then we could add another part and add more fields so you could do something like a radio list you could change this title and change what it is they select and then last but not least every form needs a submit button so we're going to drag that in there drop that in there as well and we are going to press done so let's just go back over here to our first step and let's say we want to make all of these required and we want to make this required too and this helps prevent the user from moving on without taking care of these steps okay so we're gonna go back to our preview page and refresh it and you'll see now we've get we've gotten the reminder that all fields with an asterisk are required and we can no longer move to the second part unless part one is filled out correctly okay and i showed you how that worked already so if i completed this it would move on to the next part and the next part let's change this part title here we are in our tabs and we are in tab one here and if we go down to part title or to and double click on this tab we could get we could change this here so we could call it like sign up we could say call this one double click it uh address select a price okay okay and then we can you can name the parts and so then we're gonna go ahead and go back to our preview refresh it and you'll see the parts for each part of the form are updated the last thing we could do is let's say you want a billing address and a shipping address you could do something like double click on this guy and you could duplicate the part okay and then maybe you want to call this shipping all right and then you want to call this building done go back refresh it and you'll see everything has been updated and we have a new tab as well now this is a video on adding these multi-step forms to your ninja forms i'm not going to go over how to input all these i have a post a video above on some of my basics on how to set up forms but that should give you a pretty good start on creating multi-part uh forms and then obviously when we're done with this form you need to press publish we'll give it a title and we will publish that okay and that's how you get a multi-part form set up in your website and there you go i showed you how to make multi-part forms using the premium version of the ninja forms builder so get out there make those long extended forms shorter and easier for your users to use don't forget to subscribe to the channel and like this video if you found it helpful and i'll catch you next time you

Channel: Kris Jolls

Views: 1,164

Keywords: web design, graphic design, wp, wordpress, ninja forms

Id: J-ju9bvXAD4

Length: 9min 1sec (541 seconds)

Published: Mon Mar 15 2021