Support › MB Frontend Submission › How to make the illusion of a multistep formResolved
- This topic has 8 replies, 4 voices, and was last updated 1 year, 10 months ago by
Yasmine.
-
AuthorPosts
-
May 27, 2022 at 9:23 PM #36218
Yasmine
ParticipantHello,
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,
YasmineMay 28, 2022 at 11:32 PM #36226ParticipantAdditionally, 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 draftbutton ?? I have been reading that it is possible, and while I found lots of people asking how to make a customsave as draftbutton, 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!
May 29, 2022 at 9:43 AM #36231Long Nguyen
ModeratorHi 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.
June 2, 2022 at 7:38 PM #36294ParticipantHi 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!
June 9, 2022 at 4:43 PM #36393khaz
ParticipantHey 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-stepsI 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 });June 10, 2022 at 4:19 AM #36406ParticipantHi Khaz,
I'll give it a try. Thank you for sharing!
June 17, 2022 at 3:45 PM #36547beowulf68
ParticipantHi Long - any update on this multi-step feature?
June 18, 2022 at 4:07 PM #36560ModeratorHi Laurence,
This feature is added to our backlog development. It will be included in future updates. Thank you for following up.
June 20, 2022 at 5:43 PM #36587ParticipantHi 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.
-
AuthorPosts
- You must be logged in to reply to this topic.