It doesn’t work on tablets and mobiles at all too so the code might need some more tweaking.
Hi @jonte98
I hope you are doing well.
For mobile you can add an extra line just below of:
clickable_element.addEventListener('click', wpmudev_clickables_event_callback)
Please try to include also
clickable_element.addEventListener('touchstart', wpmudev_clickables_event_callback)
For select, it is a bit different as from what I could see the Select is triggered on form load too.
So you can use a default value like “Select a Field” and make some validation.
Something like:
jQuery(document).ready(function ($) {
$(document).on('after.load.forminator', function (e, form_id) {
var next_button = document.querySelector('.forminator-button-next');
$('.next-on-click-select select').on('change', function () {
if ($(this).val() !== 'select-field') {
wpmudev_change_evt_callback();
}
});
function wpmudev_change_evt_callback(e) {
$('.forminator-button-next').trigger('click');
}
});
setTimeout(function () {
$('.forminator-custom-form').trigger('after.load.forminator');
}, 100);
});
Best Regards
Patrick Freitas
Thanks, but I have no idea how to put that togheter Patrick, can you please put it togheter to make it work for mobile and radio and dropdowns and in those cases also remove the next button? π
-
This reply was modified 4 years, 5 months ago by
jonte98.
Hi @jonte98
You can find the entire code on https://gist.github.com/patrickfreitasdev/40caa1761b482de3912c4751067d98bb
It doesn’t hide the pagination but you can do it using some CSS.
.forminator-button-next,
.forminator-button-back{
display:none !important;
}
Just an update on this too, Select will trigger the on Change when for is loading, so if we try to use them on Change without some validation it makes the form push the next page automatically.
A workaround that I found is creating a dummy first option like “Select an option” and validating in case it is not that option:
https://gist.github.com/patrickfreitasdev/40caa1761b482de3912c4751067d98bb#file-pagination-click-js-L45
But I can see this could be improved, I pinged our developers to verify if any other code would work better.
Best Regards
Patrick Freitas
Hi @jonte98
I hope you are doing well.
I would like to let you know that we updated the code.
https://gist.github.com/patrickfreitasdev/40caa1761b482de3912c4751067d98bb
For radio, you can keep using next-on-click selector and for Select please use trigger_next_btn
To add the code, you can add it as a mu-plugin following this guide https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins
Best Regards
Patrick Freitas
Thank you Patrick, problem is, when using the CSS you wrote above, the next and back is removed on all pages in the multipage form.
It should be removed on selected pages only, ideally if I can choose that by specifying a specific CSS class.
Here comes the next problem, the next and back button are outside of each page in the form, its not located inside each page. Therefore I don’t know how to target the CSS selectors for that.
Hi @jonte98
In this case, you can use this script:
https://gist.github.com/patrickfreitasdev/4601a965202442f50b0e64e18218ca9b
It was created by one of our developers and it adds a ID and Class to pagination:
https://monosnap.com/file/TSLRybWhoswolUuCUACklhWKnxobpK
Best Regards
Patrick Freitas
Hello @jonte98 ,
We haven’t heard from you for some time now, so it looks like you don’t need our assistance anymore.
Feel free to re-open this ticket if needed.
Kind regards
Kasia