Multi-Step Form with jQuery and CSS

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 {
  isplay: 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;
}

$(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>');
})
});

Alternate table row styles Conditional formatting of table rows Copy text to clipboard Disable spaces in an input field Multi step form with progress indicator Read more or less Remove the leading and trailing space Short functions Toggle visibility with a slide effect Toggle visibility without pushing content down Validate checkboxes Validate input fields Validate radio buttons Validate TinyMce editor