Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter codi0

    (@codi0)

    No problem. I’ve created a bit of custom js to get round the empty page issue. It’s not bullet-proof (E.g., won’t work if the page is loaded via ajax), but sharing here in case it’s ever useful for anyone else.

    <script>
    document.addEventListener('DOMContentLoaded', function() {

    const pages = document.querySelectorAll('.forminator-pagination');
    if(!pages) return;

    function skipEmptyPages(direction = 'next') {
    let currentPage = null;
    for(let i=0; i < pages.length; i++) {
    if(!pages[i].hasAttribute('hidden')) {
    currentPage = pages[i];
    break;
    }
    }
    if(!currentPage) return;
    const height = currentPage.getBoundingClientRect().height;
    if(height == 0) {
    const btnSelector = direction === 'next' ? '.forminator-button-next' : '.forminator-button-back';
    const btn = document.querySelector(btnSelector);
    if(btn) btn.click();
    }
    }

    // Listen for page changes
    document.addEventListener('click', function (e) {
    if(e.target.closest('.forminator-button-next')) {
    setTimeout(function() {
    skipEmptyPages('next');
    }, 10);
    }
    if(e.target.closest('.forminator-button-back')) {
    setTimeout(function() {
    skipEmptyPages('back');
    }, 10);
    }
    });

    });
    </script>
    Thread Starter codi0

    (@codi0)

    Apologies for the late reply.

    I tried using field groups, but abandoned that approach once I realised they couldn’t be nested inside each other. In the end I used the show/hide on individual questions, which does work, though a bit more tricky to setup and maintain than “skip to X”. If that could be added in a future version, it would be a nice QoL improvement. 🙂

    I do have one related follow-up question. I would ideally like to split the form into multiple pages, using the page break element. The one problem I come across when using them is that the user sometimes gets presented with an empty page (because a previous choice causes all the questions on that page to be hidden).

    What’s the best way to auto-skip an empty page (forwards if user has pressed next, backwards if user has pressed previous)? I imagine a custom js snippet of some kind?

    Thread Starter codi0

    (@codi0)

    Thanks for the quick response. I’ll look out for the next version. 🙂

    Thread Starter codi0

    (@codi0)

    Thanks, appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)