Just add your HTML split fields with the span data-split thing and thats it script will split the form in that position. You can add as many split as you want it will work automaticly.
Note: This feature already implemeneted as custom element on my theme SNN-BRX
<span data-split></span>
and it does support progress bar as well.
and dont forget to change add your form id on the js script
<style>
.progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
position: relative;
margin-bottom: 40px;
border-radius: 5px;
overflow: hidden;
}
.progress-bar span {
display: block;
height: 100%;
width: 0%;
background: #bedc00;
transition: width 0.3s ease-in-out;
}
.button-progress {
padding: 10px 15px;
border: none;
cursor: pointer;
border-radius: 5px;
background-color: var(--bricks-color-elgfuc);
line-height: 1;
}
.button-progress:hover {
opacity: 0.8;
}
.nav-container {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('#brxe-pojxsi');
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.classList.add('nav-container');
form.appendChild(navContainer);
// Create Prev button.
var prevButton = document.createElement('button');
prevButton.type = 'button';
prevButton.textContent = 'Back';
prevButton.classList.add('button-progress');
prevButton.classList.add('prev');
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.classList.add('button-progress');
nextButton.classList.add('next');
nextButton.addEventListener('click', function () {
// Collect inputs from the current step groups.
var currentStepElements = steps[currentStepIndex];
var inputs = [];
currentStepElements.forEach(function (group) {
inputs = inputs.concat(Array.from(group.querySelectorAll('input, textarea, select')));
});
// Validate each input. For radio groups, validate only once per group.
let valid = true;
let processedRadioGroups = new Set();
for (let input of inputs) {
if (input.type === 'radio') {
if (processedRadioGroups.has(input.name)) continue;
processedRadioGroups.add(input.name);
// Get all radio inputs with the same name in the form.
let radios = form.querySelectorAll('input[type="radio"][name="' + input.name + '"]');
let checked = Array.from(radios).some(radio => radio.checked);
if (!checked) {
radios[0].reportValidity();
valid = false;
break;
}
} else {
if (!input.checkValidity()) {
input.reportValidity();
valid = false;
break;
}
}
}
if (valid) {
if (currentStepIndex < steps.length - 1) {
currentStepIndex++;
showStep(currentStepIndex);
}
}
});
// 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>
Updated Second Method: Multi-Step Form + Answers List Preview
add .form-output somewhere and script wil lshow the filled input values as list.
<style>
.progress-bar {
width: 100%;
height: 10px;
background: #e0e0e0;
position: relative;
margin-bottom: 40px;
overflow: hidden;
}
.progress-bar span {
display: block;
height: 100%;
width: 0%;
background: #bedc00;
transition: width 0.3s ease-in-out;
}
.button-progress {
padding: 10px 15px;
border: none;
cursor: pointer;
background-color: var(--bricks-color-elgfuc);
line-height: 1;
border-radius: 4px;
}
.button-progress:hover {
opacity: 0.8;
}
.nav-container {
width: 100%;
display: flex;
justify-content: space-between;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('#brxe-pojxsi');
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) {
var 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.classList.add('nav-container');
form.appendChild(navContainer);
// Create Prev button.
var prevButton = document.createElement('button');
prevButton.type = 'button';
prevButton.textContent = 'Back';
prevButton.classList.add('button-progress', 'prev');
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.classList.add('button-progress', 'next');
nextButton.addEventListener('click', function () {
// Collect inputs from the current step groups.
var currentStepElements = steps[currentStepIndex];
var inputs = [];
currentStepElements.forEach(function (group) {
inputs = inputs.concat(Array.from(group.querySelectorAll('input, textarea, select')));
});
// Validate each input. For radio groups, validate only once per group.
var valid = true;
var processedRadioGroups = new Set();
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'radio') {
if (processedRadioGroups.has(input.name)) continue;
processedRadioGroups.add(input.name);
var radios = form.querySelectorAll('input[type="radio"][name="' + input.name + '"]');
var checked = Array.from(radios).some(function(radio) { return radio.checked; });
if (!checked) {
radios[0].reportValidity();
valid = false;
break;
}
} else {
if (!input.checkValidity()) {
input.reportValidity();
valid = false;
break;
}
}
}
if (valid && currentStepIndex < steps.length - 1) {
currentStepIndex++;
showStep(currentStepIndex);
}
});
// 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);
}
// Function to display answers in the .form-output div in real time.
function displayAnswers() {
// Collect all filled inputs from the form.
var answers = [];
var processedRadios = new Set();
var allInputs = form.querySelectorAll('input, textarea, select');
allInputs.forEach(function(input) {
if (input.type === 'radio') {
if (processedRadios.has(input.name)) return;
processedRadios.add(input.name);
var radios = form.querySelectorAll('input[type="radio"][name="' + input.name + '"]');
var checkedRadio = Array.from(radios).find(function(radio) { return radio.checked; });
if (checkedRadio && checkedRadio.value.trim() !== '') {
answers.push(checkedRadio.value);
}
} else if (input.type === 'checkbox') {
if (input.checked && input.value.trim() !== '') {
answers.push(input.value);
}
} else {
if (input.value && input.value.trim() !== '') {
answers.push(input.value);
}
}
});
// Find or create the .form-output div.
var outputDiv = form.querySelector('.form-output');
if (!outputDiv) {
outputDiv = document.createElement('div');
outputDiv.classList.add('form-output');
form.appendChild(outputDiv);
}
outputDiv.innerHTML = '';
if (answers.length > 0) {
var ul = document.createElement('ul');
answers.forEach(function(answer) {
var li = document.createElement('li');
li.textContent = answer;
ul.appendChild(li);
});
outputDiv.appendChild(ul);
} else {
outputDiv.textContent = 'No answers provided.';
}
}
// Attach event listeners to all input elements for real-time updates.
var allInputs = form.querySelectorAll('input, textarea, select');
allInputs.forEach(function(input) {
input.addEventListener('input', displayAnswers);
input.addEventListener('change', displayAnswers);
});
// Initial call to display any pre-filled answers.
displayAnswers();
// Display the first step.
showStep(currentStepIndex);
});
</script>
NOTE: This feature already implemented in SNN-BRX if you are using my child theme.