• Creator
    Topic
  • #21173
    Resolved @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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #21179
    Long 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.

    #21185
    @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!

    #21192
    Long 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);
        });        
    });
    #21199
    @mindspark
    Participant

    where do I add this code?

    #21203
    Long 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/.

    #21232
    @mindspark
    Participant

    thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.