Support Forum
Support › MB Frontend Submission › Multi-Step FormsResolved
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:
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.
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!
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);
});
});
where do I add this code?
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/.
thanks!
Is this the only way to do this? Just checking