Bricks forms - multiple steps form possible?

How To
1

I would like to create a multiple step form with Bricks form element.

Is that possible. And if yes, how?

2

Haven’t tried it, but I remember this being published a while back…

1 Like
3

yes you can do this with custom js and css

4

With Pro Forms form Bricksforge it is possible: https://bricksforge.io/

5

Thanks to all. Problem solved. Did it with WSForm. You can watch it on my website:

6

here native way to do it much much simpler

<style>
/* Progress Bar Styling */
.progress-bar {
  width: 100%;
  height: 5px;
  background: #e0e0e0;
  position: relative;
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #007bff; /* Change to preferred color */
  transition: width 0.3s ease-in-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // CHANGE WITH YOUR form selector (id, class, etc.)
  var form = document.querySelector('#brxe-byfjij');
  if (!form) return;

  // Create progress bar container and insert it before the form
  var progressBar = document.createElement('div');
  progressBar.classList.add('progress-bar');
  var progressSpan = document.createElement('span');
  progressBar.appendChild(progressSpan);
  form.insertAdjacentElement('beforebegin', progressBar);

  // Get all form groups and separate out the submit button group
  var allGroups = Array.from(form.querySelectorAll('.form-group'));
  var submitGroup = form.querySelector('.submit-button-wrapper');
  if (submitGroup) {
    allGroups = allGroups.filter(el => !el.classList.contains('submit-button-wrapper'));
    submitGroup.style.display = 'none';
  }

  // Split the groups into steps based on the data-split markers.
  var steps = [];
  var currentStepGroups = [];
  allGroups.forEach(function (group) {
    if (group.querySelector('[data-split]') !== null) {
      if (currentStepGroups.length > 0) {
        steps.push(currentStepGroups);
        currentStepGroups = [];
      }
    } else {
      currentStepGroups.push(group);
    }
  });
  if (currentStepGroups.length > 0) {
    steps.push(currentStepGroups);
  }
  if (submitGroup && steps.length > 0) {
    steps[steps.length - 1].push(submitGroup);
  }

  // Hide all groups in all steps initially.
  steps.forEach(stepGroups => stepGroups.forEach(group => group.style.display = 'none'));

  var currentStepIndex = 0;

  // Function to update the progress bar
  function updateProgress() {
    if (steps.length > 1) {
      let progress = (currentStepIndex / (steps.length - 1)) * 100;
      progressSpan.style.width = progress + '%';
    } else {
      progressSpan.style.width = '100%';
    }
  }

  // Function to display a given step and hide others.
  function showStep(index) {
    steps.forEach((stepGroups, i) => stepGroups.forEach(group => {
      group.style.display = (i === index) ? '' : 'none';
    }));
    updateNav();
    updateProgress();
  }

  // Create navigation container and append it to the form.
  var navContainer = document.createElement('div');
  navContainer.style.marginTop = '20px';
  form.appendChild(navContainer);

  // Create Prev button.
  var prevButton = document.createElement('button');
  prevButton.type = 'button';
  prevButton.textContent = 'Prev';
  prevButton.style.marginRight = '10px';
  prevButton.addEventListener('click', function () {
    if (currentStepIndex > 0) {
      currentStepIndex--;
      showStep(currentStepIndex);
    }
  });

  // Create Next button.
  var nextButton = document.createElement('button');
  nextButton.type = 'button';
  nextButton.textContent = 'Next';
  nextButton.addEventListener('click', function () {
    var currentStepElements = steps[currentStepIndex];
    var inputs = [];
    currentStepElements.forEach(group => {
      inputs = inputs.concat(Array.from(group.querySelectorAll('input, textarea, select')));
    });

    var filled = inputs.some(input => input.value.trim() !== '');

    if (filled) {
      if (currentStepIndex < steps.length - 1) {
        currentStepIndex++;
        showStep(currentStepIndex);
      }
    } else {
      var targetInput = inputs.find(input => input.hasAttribute('required'));
      if (!targetInput && inputs.length > 0) {
        targetInput = inputs[0];
        targetInput.setAttribute('required', '');
        targetInput.reportValidity();
        setTimeout(() => targetInput.removeAttribute('required'), 500);
      } else if (targetInput) {
        targetInput.reportValidity();
      }
    }
  });

  // Update the navigation container based on the current step.
  function updateNav() {
    navContainer.innerHTML = '';
    if (currentStepIndex > 0) navContainer.appendChild(prevButton);
    if (currentStepIndex < steps.length - 1) navContainer.appendChild(nextButton);
  }

  // Display the first step.
  showStep(currentStepIndex);
});
</script>