Multi-Step Forms - Meta Box

This topic has 7 replies, 3 voices, and was last updated 3 years, 1 month ago by Tony.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 8, 2020 at 3:36 AM #21173

@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

Add New Note to this Reply

August 8, 2020 at 9:18 AM #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.

Add New Note to this Reply

August 10, 2020 at 4:50 AM #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!

Add New Note to this Reply

August 10, 2020 at 10:45 AM #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);
    });        
});
```
Add New Note to this Reply
August 10, 2020 at 10:11 PM #21199

@mindspark
Participant

where do I add this code?

Add New Note to this Reply

August 11, 2020 at 8:36 AM #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/.

Add New Note to this Reply

August 12, 2020 at 11:26 PM #21232

@mindspark
Participant

thanks!

Add New Note to this Reply

November 10, 2021 at 12:52 PM #31837

Tony
Participant

Is this the only way to do this? Just checking

Add New Note to this Reply
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.