JetEngine Form Steps Tabs

<ul class="tab-steps--list"></ul>
<script>
jQuery(document).ready(function() {
    let isDragging = false;
    const tabStepsList = jQuery('.tab-steps--list');

    function startDrag() {
        isDragging = true;
        tabStepsList.addClass('dragg');
    }

    function stopDrag() {
        isDragging = false;
        tabStepsList.removeClass('dragg');
    }

    function drag(e) {
        if (!isDragging) return;
        tabStepsList.scrollLeft(tabStepsList.scrollLeft() - e.originalEvent.movementX);
    }

    tabStepsList.mousedown(startDrag);
    jQuery(document).mouseup(stopDrag);
    jQuery(document).mousemove(drag);

function scrollTabStepsList() {
    const tabStepsWidth = tabStepsList.width();
    const tabStepsListWidth = tabStepsList[0].scrollWidth;

    if (tabStepsListWidth > tabStepsWidth) {
        const activeStep = jQuery('.tab-steps--list li.active');

        if (activeStep.length > 0) {
            const activeStepOffset = activeStep.offset().left - tabStepsList.offset().left;

            if (activeStepOffset < 0) {
                // Scroll to show the active step plus one additional step
                tabStepsList.scrollLeft(tabStepsList.scrollLeft() + activeStepOffset);
            } else {
                // Scroll to show the active step and the next step
                const nextStep = activeStep.next();
                const nextStepOffset = nextStep.offset().left - tabStepsList.offset().left - tabStepsWidth + nextStep.width();
                tabStepsList.scrollLeft(tabStepsList.scrollLeft() + nextStepOffset);
            }
        }
    }
}





    // Create li elements and append them to the ul
    const jetFormPages = jQuery('.jet-form-page');
    for (let i = 0; i < jetFormPages.length; i++) {
        const stepNumber = i + 1;
        const liElement = jQuery('<li>').attr('data-step', stepNumber);

        if (i === 0) {
            liElement.addClass('active');
        }

        tabStepsList.append(liElement);
    }

function updateTabClasses(step, currentPage) {
    const tabListItem = jQuery(".tab-steps--list li[data-step=" + step + "]");
    const prevPage = parseInt(step) - 1;

    jQuery('.tab-steps--list li').removeClass('active prev');

    if (currentPage < step) {
        tabListItem.addClass('active');
        tabListItem.prevAll().addClass("prev");
    } else {
        tabListItem.addClass('active');
        tabListItem.prevAll().addClass("prev");
        tabListItem.nextAll().removeClass("active prev");
    }
}

jQuery('.tab-steps--list li').click(function() {
    const dataStep = jQuery(this).attr('data-step');
    const currentPage = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");

    jQuery(".jet-form-page").addClass("jet-form-page--hidden");
    jQuery(".jet-form-page[data-page=" + dataStep + "]").removeClass("jet-form-page--hidden");

    updateTabClasses(dataStep, currentPage);
    scrollTabStepsList();
});

jQuery('button.jet-form__next-page').click(function() {
    const pageNumber = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");
    const currentPage = parseInt(pageNumber) + 1;

    jQuery(".tab-steps--list li[data-step=" + pageNumber + "]").removeClass("active").addClass("prev");
    jQuery(".tab-steps--list li[data-step=" + currentPage + "]").addClass("active");

    updateTabClasses(currentPage, currentPage);
    scrollTabStepsList();
});

jQuery('button.jet-form__prev-page').click(function() {
    const pageNumber = jQuery("form.jet-form").find(".jet-form-page:not(.jet-form-page--hidden)").attr("data-page");
    const backPage = parseInt(pageNumber) - 1;

    jQuery(".tab-steps--list li[data-step=" + pageNumber + "]").removeClass("active prev");
    jQuery(".tab-steps--list li[data-step=" + backPage + "]").addClass("active");

    updateTabClasses(backPage, backPage);
    scrollTabStepsList();
});


});


 
</script>
<style>
ul.tab-steps--list {
  list-style: none;
  width: 100%;
  text-align: center;
  padding: 0 0 10px;
  display: flex;
  overflow-x: scroll;
  cursor: grab;
}
ul.tab-steps--list.grabbing {
    cursor: grabbing;
}
.tab-steps--list li {
  position: relative;
  list-style: none;
  display: inline-block;
  counter-increment: li;
  width: auto;
  cursor: pointer;
  opacity: 0.5;
}

.tab-steps--list li.active {
  opacity: 1
}
.tab-steps--list li.active:before, .tab-steps--list li.prev:before {
    background:  var(--e-global-color-primary);
    color: #fff;
}
.tab-steps--list li:before {
  content: "step "counter(li);
  display: block;
  text-align: center;
  margin: 0 auto;
  background: #fff;
  padding:8px 16px;
  white-space: nowrap;
  color: #777;
  border: 1px solid #777;

}

</style>

add this code in html widget in Elementor ABOVE the form