Meta Box

How to make the illusion of a multistep form

Support › MB Frontend Submission › How to make the illusion of a multistep formResolved

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 27, 2022 at 9:23 PM #36218
    YasmineYasmine
    Participant

    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

    May 28, 2022 at 11:32 PM #36226
    YasmineYasmine
    Participant

    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!

    May 29, 2022 at 9:43 AM #36231
    Long NguyenLong Nguyen
    Moderator

    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.

    June 2, 2022 at 7:38 PM #36294
    YasmineYasmine
    Participant

    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!

    June 9, 2022 at 4:43 PM #36393
    khazkhaz
    Participant

    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
    });
    June 10, 2022 at 4:19 AM #36406
    YasmineYasmine
    Participant

    Hi Khaz,

    I'll give it a try. Thank you for sharing!

    June 17, 2022 at 3:45 PM #36547
    beowulf68beowulf68
    Participant

    Hi Long - any update on this multi-step feature?

    June 18, 2022 at 4:07 PM #36560
    Long NguyenLong Nguyen
    Moderator

    Hi 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 #36587
    YasmineYasmine
    Participant

    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.

    November 18, 2024 at 8:36 PM #46953
    Nicholas CoxNicholas Cox
    Participant

    Hi, any update on this?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.