Create a Multi Step Form ✅ Free Wordpress How to Guide with WP Forms

multi-step forms are a great way for your website visitors to submit their information join me in this tutorial and i'm going to show you how you can use wp forms lite to create multi-step form surveys contact forms data collection forms and increase your user experience [Music] during my time in web development i've created a lot of types of forms multi-step forms draw a lot of interest because they look good and they're structured personally i have always found the user experience of a form requiring more than about five fields to be more friendly to the visitor if done in steps instead of one big form of course there are exceptions for example a landing page would look better with a simple contact form you can view my video here if this is what you'd like to create this video however will be a tutorial on how to create a multi-step form for free i'm being a little bit creative with the wp forms live version and it has its limitations also however if you don't have a budget and you're starting out then this is a great way to get it done besides that although limited you can indeed still create a multi-step form for free and of course it's easy and simple for the beginner or even advanced web designer looking for a time saver the pro version will be showcased in my next video about wp forms which also includes more advanced functions like payments and conditional logic and so on but if you want to create a multi-step form for a survey data collection or if your contact form is quite large and requires extra fields this is the video for you so let's get started i'm going to use an example of a student information collection form in which i'm collecting information from a student wishing to submit their information to join a course on the website keep in mind that although this is an example that this method can be applied to any form you had in mind before i start please note that i have already covered the installation and setup of the wpformslive plugin in the previous video which i'll link in the description also note that i will be using the elementor page builder and essential add-ons plugins for this video both are free plugins which you can install within wordpress by going to plugins and installing them from there if you are using another page builder or wordpress for your pages simply use the wp form widget firstly let's go and create the separate forms for our multi-step form so from your wordpress dashboard let's go to wp forms and select add new for the name you can choose anything you like i'm just simply going to name it step one we'll select a blank form [Music] next we'll be selecting the standard fields that we'll be using in the first step of our forum normally this will involve a bit of planning i've already done the planning for mine so i will require a name and for that we'll select a name box i'll require an email address and i'm going to select the drop down for the editing of these fields i'm going to select name and in my previous video i noted the importance of making the field size large and then the label name i'll just add it to something more descriptive and do the same with our email field again we'll go to advanced and make the field size large [Music] in our drop down we'll also make the field size large we'll go back to general and then in our label i'm going to type in i'm signing up for and then by the choices i'll simply insert the different courses that we'll be doing here now with the submit button we'd like to make it a simple next step submit button so submit wouldn't be the right wording for this so let's go to settings and let's change the submit button text to proceed and for notifications we'll leave this empty as i've covered this in the previous video again the link is in the description then for the confirmations we'll be doing some linking here however we'll come back to the section when we've created our pages let's move on to our second step and click save and close okay for our second form i'm going to call it step two and again we'll create a blank form now for the step two form for my form i'm going to use three questions for this i'm going to use the drop down fields so we'll add three of those my first field will populate the label and ask the question and in our choices we'll simply select the options which they can choose from again we'll always keep these field sizes large so they can be contained within the container next let's go to our second field this will be a simple yes or no question and we can delete the third field and then for our third field again we'll ask a question and provide the options then let's go to settings again we'll be editing the submit button text and we can simply select the submit button processing text and call it processing in this case again we'll come back to confirmations a little bit later but for now let's save step two and close and now for our final step [Music] the name for our form we're going to call it step three and again we'll create a blank form [Music] now for the final step i'd like to add a drop down a paragraph text and a check box for our drop down i'm going to simply ask a question if they'd like to sign up for our newsletter again just a simple yes and no i'm going to delete the third box [Music] and for our paragraph text i'm going to ask if they would like to add any additional information here and then for our checkbox we'll make this and accept our terms and conditions section now to do this i'm simply going to delete these choices and leave one single choice open and call it i agree in the description field i'm going to add a html code so they can simply click to our terms and our conditions you can edit your link here for your privacy or your terms and conditions page i'm leaving a link in the description where you can copy this code and just replace the relevant information before we move on there's something that i've forgotten to do so let's just click on each box and go to advanced and set it to large as we've done with the other fields however the paragraph text i'm going to leave as a small field so that it doesn't take up too much space on our page then agree to terms and conditions we can simply leave it as it is then in settings the submit button text will simply change to complete sign up and then in confirmation we can change this text to your information has been submitted and we will be in contact with you within 24 hours again i will go through the confirmation types a little bit later after we've done the pages for now we can just save the page and close it [Music] now for the pages let's go to pages click add new [Music] i'm going to call this page sign up for our online course now we can publish [Music] and next we can edit with elementor so there's multiple ways how we can do this we can either copy our form into the white space here or alternatively we can select a different template and clear the screen all together so that only the form will show which is what i'm going to do so i'll go to settings page layout elementor canvas [Music] now let's go to our widgets type wp out of these wp forms i'm going to select the essential add-ons version we'll select our form which will be step one i'm going to hide my title let's go to advanced and add some padding i'm going to add 30. [Music] next we'll go to border just add a box shadow to it add a bit of a border radius let's say 15. next let's go back to style and let's go down to submit button and i'll add a percentage to the width and make it 100. now our form is a little bit wide and looks out of place so obviously we'd like to adjust the width of it so let's just edit this section and it is unboxed which is correct and we'll just adjust the width i'd say 625 pixels are fine next we can go back to the widget section we can add an image add it to the top i'll select our logo and we'll insert the media i'm just going to add a spacer i'd recommend around about 120 pixels i'm going to also go to advanced and then we'll hide the spacer by choosing responsive [Music] and hide it on tablets and mobiles next we can click update [Music] and back in our pages [Music] we go to view this page you'll see that it's neatly positioned here [Music] okay let's close this page now we'd like to create our step two and step three pages for this form i'm simply going to click on ea duplicator and i'll do this twice of course the second page will edit with elementor [Music] and we'll simply click on the edit wp forms we'll select step two and publish we'll close this page i'm just going to quick edit this page and add a dash 2 to the pages title and elementary on the final draft that we created [Music] and again we'll just select edit wp forms and select step three next we'll click publish and we'll go back to our dashboard [Music] now we've created everything but there is one last step and this is to tie in the forms together we'll need some information to identify page urls so that we can assign these pages to the relevant forms let's go to pages and i'm going to right click on all forms to open up a new tab let's now go to the wp forms tab let's go to step one and click edit now we'll go to settings and we'll go to confirmations we'll change the confirmation type so go to url redirect [Music] and we'll add our confirmation redirect url here this will of course be the step 2 page so we'll go to back to pages so we'll hover over view of our step 2 page i'll right click copy link address we'll go back to the wp forms builder and we'll paste our link in here [Music] now we can click save and close follow the same steps for step three and edit [Music] go back to pages hover over view on step 3 copy link address go back to the forms builder click on settings confirmations confirmation type to go to url redirect and paste our link in here we'll click save and close and that's it for our forums and pages we can now simply add our form to for example a menu button so let's go to appearance select menus and we can add a custom link of course we'd like to know what the url is of the first form so we can go back to pages select all pages i'm going to open this in a new tab and go to our first page right click on view copy link address go back to our menus tab and in our custom link we'll paste the url here the link text can be anything we like in this case i'm just simply going to call it sign up we'll add to menu [Music] and we can click save menu we've now created a multi-step form in wordpress this is a really easy method and works really well there are some more features or creative ideas that can be added for example you could redirect your step 3 to a custom thank you page for your visitors there are of course lots of styling that can be done but it's generally safer to use the less is more rule with websites note that you will have some limitations like the consolidation which won't happen for each separate email as well as the ability to receive payments there are three ways around that too however the pro version of this plugin does this easily and i'm giving away a few pro licenses in my next video about wp forms so be sure to subscribe so you don't miss out i really hope you enjoyed this video and found it helpful like and subscribe if you did and i'll see you next time

Channel: Web Design Hub

Views: 666

Keywords: multi step form wordpress, multi step form elementor, wordpress multi step form, free multi step form wordpress, multi step form wordpress plugin free, multi step form wordpress plugin, wpforms free

Id: 3WnpKSwYbvk

Length: 16min 42sec (1002 seconds)

Published: Thu Sep 09 2021