Meta Box

Multi-Step Forms

Support › MB Frontend Submission › Multi-Step FormsResolved

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 8, 2020 at 3:36 AM #21173
    @mindspark@mindspark
    Participant

    Hello -

    I am using MB for a complex post type. There are approximately 41 input fields. For admins on the backend, using the default layout tools in MB Custom Field generator is perfect. But, I also plan to have users submitting forms - from the front-end only.

    I know that using the Custom Field Group shortcode makes it easy to display forms on the front-end. But, because the forms are complex, I want to make a custom layout that is not currently part of the default MB generator.

    Example - here is the form now:

    Backend: https://snipboard.io/Ap6yoB.jpg
    Front-end: https://snipboard.io/pxsNDB.jpg

    But what I really want is to display only 3-4 fields at a time, requiring the user to proceed through multiple pages to complete the form. It's a multi-page form I am asking about.

    So my question is:

    Is it possible to make a form element that works with the existing form generator that breaks the field group into multiple pages? Kind of like what Gravity Forms allows?

    see it here:

    https://snipboard.io/iIuXHg.jpg

    August 8, 2020 at 9:18 AM #21179
    Long NguyenLong Nguyen
    Moderator

    Hi,

    The extension only supports to show all custom fields on the front page with the same page. I think you can use conditional logic to show a next tab/group if the user clicks to a button "Next part" as an example.

    Hope that helps.

    August 10, 2020 at 4:50 AM #21185
    @mindspark@mindspark
    Participant

    Hi Long -

    I've implemented your suggestion and it works - kind of. here is the form: https://siteview.dev/caps/package-input/

    I used groups and added conditional logic so the user only sees one group of questions at one time. I'm using Button group for the 'Next' and 'Back' buttons at the end of each section.

    but here is an issue -

    say a user completes section 1 and moves to section 2. but if they want to go back to section and change an answer, then we have a problem. by going backward using a 'back' button, the previous section Next button is still marked from before. So there is no way to go forward again.

    if you play with my form a little you can see what I'm taking about.

    is there a way to deselect a button when going backwards?

    thanks!

    August 10, 2020 at 10:45 AM #21192
    Long NguyenLong Nguyen
    Moderator

    Hi,

    You need to use a little bit JavaScript code to switch Next/Prev between two groups. See my screen record for example https://www.loom.com/share/ad4e04a2535d49ffb0f479f840f1ef5f.

    jQuery(document).ready(function($) {
    $('.button-group2 input.rwmb-button_group').on('click', function(){
        $('.button-group1 input.rwmb-button_group').prop('checked', false);
    });
    $('.button-group1 input.rwmb-button_group').on('click', function(){
        $('.button-group2 input.rwmb-button_group').prop('checked', false);
    });        
});
    August 10, 2020 at 10:11 PM #21199
    @mindspark@mindspark
    Participant

    where do I add this code?

    August 11, 2020 at 8:36 AM #21203
    Long NguyenLong Nguyen
    Moderator

    You can use the plugin Insert Headers and Footers to add the script code to the footer https://wordpress.org/plugins/insert-headers-and-footers/.

    Or just enqueue a script file to run the code https://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/.

    August 12, 2020 at 11:26 PM #21232
    @mindspark@mindspark
    Participant

    thanks!

    November 10, 2021 at 12:52 PM #31837
    TonyTony
    Participant

    Is this the only way to do this? Just checking

    April 3, 2025 at 8:19 PM #47988
    pixluserpixluser
    Participant

    That'll be awesome to get a true multipart system to use.

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