JetFormBuilder Make multistep indicator clickable

תוכן עניינים

The code snippet is ready to copy and paste and will make the steps in JetFormBuilder forms clickable and move forward and backward.

Use and enjoy

JetFormBuilder Make multistep indicator clickable

Add the code in the footer of the pages where your forms appear
You can also do this using the Elementor HTML widget

				
					<style>
  .jet-form-builder-progress-pages__item--wrapper { cursor: pointer; }
</style>

<script>
(function () {
   false
  function register() {
    if (!window.JetPlugins || !window.JetPlugins.hooks) return false;

    window.JetPlugins.hooks.addAction(
      'jet.fb.multistep.init',
      'jet-form-builder/multi-step/clickable-steps',
      function (multistep) {
        const rootNode = multistep.getScopeNode();
        const globalProgress = rootNode.querySelector(
          '.jet-form-builder-progress-pages--global'
        );

        function initGlobalProgress() {
          if (!globalProgress) return;

          const items = globalProgress.querySelectorAll(
            '.jet-form-builder-progress-pages__item--wrapper'
          );

          for (const item of items) {
            item.addEventListener('click', () => {
              if (+item.dataset.page <= multistep.index.current) {

                multistep.index.current = +item.dataset.page;
                return;
              }


              let nextStep = item.dataset.page - multistep.index.current;

              const changePage = () => {
                if (nextStep === 0) return;

                const currentPage = multistep.getCurrentPage();
                currentPage
                  .changePage()
                  .then(() => {
                    --nextStep;
                    changePage();
                  })
                  .catch(() => {});
              };

              changePage();
            });
          }
        }

        initGlobalProgress();
      }
    );

    return true;
  }

  if (!register()) {
    const t = setInterval(() => {
      if (register()) clearInterval(t);
    }, 200);

    setTimeout(() => clearInterval(t), 8000);
  }
})();
</script>

				
			

מקור https://gist.github.com/Crocoblock/ef966f23a0cba3c3f504487b2cd36e81

Leave a Reply

Your email address will not be published. Required fields are marked *