jQuery

Multi-step form with progress bar

What is the Roman number equivalent of 1
What is the Roman number equivalent of 2
What is the Roman number equivalent of 3
What is the Roman number equivalent of 4
What is the Roman number equivalent of 5
What is the Roman number equivalent of 6
What is the Roman number equivalent of 7
What is the Roman number equivalent of 8
What is the Roman number equivalent of 9

HTML

<div class="container container-main">
<div class="row justify-content-center">
<div class="form-container">
<form id="demoForm">
<ul id="progress_steps" class="d-flex justify-content-center">
<li class="active" id="step_1"></li>
<li id="step_2"></li>
<li id="step_3"></li>
<li id="step_4"></li>
<li id="step_5"></li>
<li id="step_6"></li>
<li id="step_7"></li>
<li id="step_8"></li>
<li id="step_9"></li>
</ul>

<fieldset>
<div class="input-info">What is the Roman number equivalent of 1</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_01" id="input_01" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 2</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_02" id="input_02" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 3</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_03" id="input_03" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 4</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_04" id="input_04" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 5</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_05" id="input_05" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>

</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 6</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_06" id="input_06" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 7</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_07" id="input_07" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="input-info">What is the Roman number equivalent of 8</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_08" id="input_08" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>

<fieldset>
<div class="input-info">What is the Roman number equivalent of 9</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="input_09" id="input_09" value="" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step" type="button"><i class="fa-solid fa-circle-arrow-right"></i></button>
</fieldset>
<fieldset>
<div class="form-container-finished text-center">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x form-icon-finished"></i>
<i class="fa-solid fa-flag-checkered fa-stack-1x"></i>
</span>
</div>
<button class="form-button previous-step" type="button"><i class="fa-solid fa-circle-arrow-left"></i></button>
<button class="form-button next-step form-button-submit" id="form-button-submit" type="button">Submit &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-solid fa-share-from-square"></i></button>
</fieldset>

<div id="form-message-container-after-submit"></div>
</form>
<p class="p-1"></p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>

</div>

CSS

.container-main {
margin: 4em auto;
max-width: 600px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border: 10px solid rgba(185, 185, 189, 0.44);
border-radius: 10px;
}

#demoForm {
position: relative;
margin-top: 20px;
}

#demoForm fieldset {
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}

#demoForm fieldset:not(:first-of-type) {
display: none
}

#progress_steps {
margin-bottom: 30px;
margin-right: 40px;
overflow: hidden;
text-align: center;
color: #9A9A9A;
}

#progress_steps .active {
color: #2F8D46;
}

#progress_steps li {
list-style-type: none;
font-size: 15px;
width: 10%;
float: left;
position: relative;
z-index: 2;
font-weight: 400;
}

#progress_steps #step_1:before {
content: "1";
}

#progress_steps #step_2:before {
content: "2";
}

#progress_steps #step_3:before {
content: "3";
}
#progress_steps #step_4:before {
content: "4";
}
#progress_steps #step_5:before {
content: "5";
}

#progress_steps #step_6:before {
content: "6";
}

#progress_steps #step_7:before {
content: "7";
}

#progress_steps #step_8:before {
content: "8";
}
#progress_steps #step_9:before {
content: "9";
}

#progress_steps li:before {
width: 24px;
height: 24px;
line-height: 20px;
display: block;
font-size: 14px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 5px auto;
padding: 2px;
}

#progress_steps li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 12px;
z-index: -1;
}
#progress_steps li.active:before,
#progress_steps li.active:after {
background: #61677C;
}

.progress {
height: 4px;
margin: 0;
border-radius: 0 !important;
font-size: 11px;
letter-spacing: 1px;
}

.progress-bar {
background-color: #b9b9bd;
}

.input-info {
padding: 1em;
background-color: rgba(71, 70, 70, 0.10);
border-radius: 10px;
margin: 0 0.5em 1em 0.5em;
}

.previous-step {
float: left;
}

.next-step {
float: right;
}

.input-container {
margin: 2em 0;
}

.form-input-text {
width: 100%;
}

.error-message-input-container {
height: 40px;
padding-top: 10px;
}

.error-message-input-content {
font-size: 11px;
color: #FF0004;
padding-left: 32px;
position: relative;
}

.error-message-input-content::before {
position: absolute;
font-family: 'FontAwesome';
top: 0;
left: 0;
content: "\f071";
}

.input-error-state {
background-color: rgba(255, 132, 134, 0.1);
}

.form-container {
max-width: 600px;
background-color: #EBECF0;
}

.form-container .input-container {
padding: 0 10px;
}

.form-container .form-button,
.form-container .form-input-text {
border: 0;
outline: 0;
font-size: 16px;
border-radius: 10px;
padding: 16px;
background-color: #EBECF0;
text-shadow: 1px 1px 0 #FFF;
}

.input-container label {
display: block;
margin-bottom: 24px;
}

.form-container .form-input-text {
margin-right: 8px;
box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFFFFF;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
appearance: none;
-webkit-appearance: none;
}

.form-container .form-input-text:focus {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFFFFF;
}

.form-container .form-button {
border-radius: 8px;
line-height: 0;
width: 48px;
height: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 10px;
font-size: 20px;
color: #61677C;
box-shadow: -5px -5px 10px #FFF, 5px 5px 10px #BABECC;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

.form-container .form-button:hover {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
.form-container .form-button:active {
box-shadow: inset 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}

.form-container .form-button-submit {
width: 140px;
height: 48px;
}

.form-container .button-next {
float: right;
color: rgba(185, 185, 189, 0.54);
}

.form-container .button-previous {
float: left;
color: rgba(185, 185, 189, 0.54);
}

.form-container-finished {
margin: 2em auto;
}
.form-icon-finished {
color: #FFFFFF;
}

.form-message-content-after-submit {
margin: 0 auto;
padding: 4em 0;
text-align: center;
background-color: rgba(205, 205, 205, 1);
border-radius: 10px;
}

JS

$(document).ready(function() {
var currentMsfStep, nextMsfStep, previousMsfStep;
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressSteps(current);
$(".next-step").click(function() {

// validate (visible) input field: 
if ($('.input-container input[type=text]:visible').val() == '') {
$('.input-container input[type=text]:visible').addClass('input-error-state');
$('.input-container .input-error-check:visible').html('<div class="error-message-input-content"> This input field is required </div>');
return false;
}
currentMsfStep = $(this).parent();
nextMsfStep = $(this).parent().next();
$("#progress_steps li").eq($("fieldset")
.index(nextMsfStep)).addClass("active");
nextMsfStep.show();
currentMsfStep.animate({
opacity: 0
}, {
step: function(now) {
opacity = 1 - now;
currentMsfStep.css({
'display': 'none',
'position': 'relative'
});
nextMsfStep.css({
'opacity': opacity
});
},
duration: 500
});
setProgressSteps(++current);
});
$(".previous-step").click(function() {
currentMsfStep = $(this).parent();
previousMsfStep = $(this).parent().prev();
$("#progress_steps li").eq($("fieldset")
.index(currentMsfStep)).removeClass("active");
 
previousMsfStep.show();
currentMsfStep.animate({
opacity: 0
}, {
step: function(now) {
opacity = 1 - now;
currentMsfStep.css({
'display': 'none',
'position': 'relative'
});
previousMsfStep.css({
'opacity': opacity
});
},
duration: 500
});
setProgressSteps(--current);
});
function setProgressSteps(currentStep) {
var percent = parseFloat(100 / steps) * current;
percent = percent.toFixed();
$(".progress-bar").css("width", percent + "%");
// remove the input error message from the previous step:
$('.input-error-check').html('');
// remove input error class:
$('input[type=text]').removeClass('input-error-state');
}
$("#form-button-submit").click(function() {
$("#form-message-container-after-submit").html('<div class="form-message-content-after-submit"> This multi-step form is a demonstration.  </div>');
})
});

About Luan Morina

A versatile educator who seamlessly integrates linguistic expertise, business acumen, and philosophical insight into every training session.

Read more...