Does anyone know how I can move the next and previous buttons?
on my step form navigation, next and previous buttons are kind of hidden at the bottom of the step pages. can I move those buttons to the top, where I think they should be?
Try the following JavaScript code in your form:
jQuery(function($) {
function moveNavToTop($step) {
var $nav = $step.find('.step-nav.ff_step_nav_last').first();
if ($nav.length) {
$step.prepend($nav); // move nav to top of this step
}
}
// Move navs for all steps on initial render
$('.fluentform-step').each(function() {
moveNavToTop($(this));
});
// Also run whenever a step becomes active
$(document).on('fluentform:stepChanged', function(e, step, form) {
moveNavToTop($(step));
});
// In case form re-renders via AJAX
$(document).on('fluentform:formRendered', function(e, form) {
$(form).find('.fluentform-step').each(function() {
moveNavToTop($(this));
});
});
});
brilliant! thank you! was that in https://developers.fluentforms.com
somewhere or how did you know that? actually after playing with it, it breaks when clicking previous button, the view get's mangled. I put it in the header as a js with fluent snippets to only run on the page I'm using it on. I tried it from footer and it's the same behavior. I use a lot of conditional logic on the form and that's where it's breaking, when trying to skip back over steps in the form. on paths where there's no steps to skip, it seems to work good.
No. It's not on https://developers.fluentforms.com/. Try writing the JS code right in your form's Custom CSS/JS.
same result. I can see it kind of jumps to the same step it's getting mangled on without the custom js, but it jumps again to the correct step without it, but get's stuck with it.
ok, update if I enable this, then your code works. I'm not sure I understand this setting, but was suspicious of the "Resume Step from last form session" setting and ended up solving it with disable auto focus.