Support Forum
Support › MB Frontend Submission › How to make the illusion of a multistep formResolved
Hello,
I need a little guidance again. I understand that I can make a frontend submission form appear to be multistep by using conditional logic to show and hide tabs, and set a previous and next button to trigger the change.
I assume I add the conditions to each tab. So when the value of the button = this, then the next tab shows and the one before hides.
But these are the problems that I'm facing:
1. ON the conditional logic options for the tab, there is not the option to even select the button as a condition.
2. And if I could select a button as a condition, how would I set a value for the button too? So that it equals X value?
3. I also don't understand how you would theoretically turn the button off...
I think I am missing something simple, but would really appreciate your help.
Many thanks,
Yasmine
Additionally, when making each button to the next step, I would like it to also 'save as draft'.
And so with every step their progress is saved. I would then hide the standard "submit" button with CSS and then have a substitute submit button on the last tab of my form.
But my question is how do I make a custom save as draft
button ?? I have been reading that it is possible, and while I found lots of people asking how to make a custom save as draft
button, using hooks, I cannot find the snippet in the documentation to use. Could you please point me to how I could do this!
Many thanks!
Hi Yasmine,
1. If you want to create a checkbox or select field to save the post as draft, please refer to this topic https://support.metabox.io/topic/controlling-post-status-in-front-end-dashboard/#post-31734
2. Making the multi-step feature for the frontend form is so complicated. You will need a lot of JS code to create a button to go back/forward the tab. This featured request is on our roadmap so please wait for the next updates, our developer will make it available.
Hi Long,
Oh that would really be great. I will eagerly await the update! I thought it might have been simple using conditional logic. Will this feature be announced when it's ready? Want to make sure I don't miss it!
Oh ok, I had actually found that snippet, but had been trying with a button.
I also can't get it working... I am trying to use it with the checkbox
, and when I check it and click "submit" it does not then let me. This is because not all the required fields have been filled. But the purpose of saving as draft is so that they can go back to work on it. When the button is clicked nothing happens to reassure the user that it has been saved. I would rather a button that can show next to the main submit button. "Draft" and "submit" - is there any way to achieve that?
Many thanks!
Hey Yasmine,
I'm trying to make steps too, can't test for now but it seems to be fonctionnal. Give a try to this jquery plugin :
https://github.com/rstaib/jquery-steps
I use the groups plugins instead of the tabs. And for each page I put a header and then a group at the root of the metabox fields.
And now you can use a javascript code like :
jQuery('form.rwmb-form > div.rwmb-meta-box').steps({
headerTag: "div.rwmb-heading-wrapper",
bodyTag: "div.rwmb-group-wrapper",
transitionEffect: "slideLeft",
autoFocus: true,
enableAllSteps: true, //for working on it
});
Hi Khaz,
I'll give it a try. Thank you for sharing!
Hi Long - any update on this multi-step feature?
Hi Laurence,
This feature is added to our backlog development. It will be included in future updates. Thank you for following up.
Hi Long, do you have any idea whether it would be weeks or months. Only asking as will need to get working on a temp solution if months. I understand everything takes time, but knowing the rough time frame would help a lot.
Hi, any update on this?