Multi Step Form With Progress Bar | Single Input Using CSS JS

Multi Step Form With Progress Bar
In this tutorial, we learn how to create a multi-step form with a progress bar (the dynamic form with Single Input) using HTML + CSS + JS

I hope you will see the multi-step form with the different design progress bar on many websites or social networks. nowadays these types of form are on-trend, mostly people using the multi-stepform with progress bar.

you know, have the reason using muti step form with progress bar because it creates a good user interaction on the website or webpages.

I think that those days are gone when the developer uses the long-form with many fields. you will understand the code segment which given the below and follows the step to create an Advanced form with the help of JavaScript.

This form has just an input field that makes it always unique, these dynamic multi-step form also has progress bar & email validation.

the whole forms styles or we can say that User Interface is based on CSS (Cascade Styles Sheet) and the functions are also based on JavaScipt.

therefore, use these multi-step form with progress bar in your website for looking good user Interface (UI).

I hope you will use these multi-step form with a progress bar, and see the given code segment for single Input form with dynamic functions with the help of JavaScript and CSS.

Therefore, In these form, the progress bar, Input field, Email validation, and welcome message features make this form unique and better from others.

Explanation of Multi-Step Form With a Progress Bar Source Code using HTML, CSS, JS

Therefore, let’s discuss about the Multi-step form with a progress bar source code, here all user is interface created (UI) with the help of CSS and function are using JavaScript, As a result, first of all, I have to create a div section for the purpose of progress bar, after that create another div section for the purpose to place input, label, button and underline inside that for understand better see the code segment.

for creating the progress bar, used JS functions, JS changes the progress bar’s width by 25% on every input because there are four inputs, In Javascript File, if you see that I created four variable for the purpose of four separate form field, JS fetch the div using its Unique ID and changes the value of it. if you notice that inside the Email, variable I put a pattern for validation, by the mistake if you enter wrong pattern email variable shows the wrong pattern, and inside the password, var put type password. there are many JS Functions to handle various actions.

the CSS code segment used for placing all elements in the right place, manage background colors and text colors and Ionic icon for creating the next button after input. Actually JS fun the function and CSS changes the values. heading (H2) most welcome message handles with the JS functions, I think you have the knowledge of HTML, JS, CSS then you can understand definitely code segment after getting all codes parts.

here, you have created three files, First files for HTML as name “index.html”, Second file for CSS as the name “stylesheet.css” and third files for JavaScript functions as name “function.js”, you can follow the steps as given below.

First Step: Creating the HTML Files as name “index.html” and Put code in the file as given below

<!DOCTYPE html>
<html lang="en" > 
<head>
  <meta charset="UTF-8">
  <title>Simple form form</title>
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
  <div id="progressbarline"></div>
  <h1>Multi Step Form With Progress Bar | HTML + CSS + JS</h1>
      <div class="center">
        <div id="form">
          <i id="bttn" class="ion-android-arrow-forward next"></i>
             <div id="container">
                <input id="txtfield" required autofocus />
                <label id="placeholder"></label>
                <div id="bottomline"></div>
              </div>
        </div>
      </div>
  <script  src="JS/function.js"></script>
 </body>
</html>

<!DOCTYPE html>

<head>

<title>Simple form form</title>

</head>

<body>

<h1>Multi Step Form With Progress Bar | HTML + CSS + JS</h1>

</div>

</body>

</html>

Second Step: Creating the CSS Files as name “stylesheet.css” and Put code in the file as given below

body {
  background: #efefef;
  margin: 0;
  font-family: 'Lato', sans-serif;
}
#progressbarline {
  background: #38d012;
  top: 0;
  position: fixed;
  height: 15px;
  transition: width 0.2s ease-in-out;
  border-radius: 10px;
}
#container {
  opacity: 0;
  width: 350px;
  margin-top: 25px;
  position: relative;
  color: #fff !important;
  transition: opacity .3s ease-in-out; 
}
#container input {
  width: 100%;
  color:#fff !important;
  font-size: 20px;
  font-weight: bold;
  padding: 0 5px;
  background: transparent;
  border: none;
  outline: 0;
  box-shadow:none;
}
h1 {
    left: 23%;
    bottom: 0px;
    top: 20% !important;
    position: absolute;
    color: #333;
    text-align: center;
    
}
h2{
  color: #333;
}
.center {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  
}
#form {
  background: #38d012;
  width: 410px;
  color: #fff !important;
  border-radius: 30px;
  position: relative;
  padding: 2px 15px 20px 15px;
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
  transition: transform .1s ease-in-out;
  }
 
#form.close {
  padding: 0;
  width: 0;
  transition: .8s ease-in-out;
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0);
  overflow: hidden;
}
.next {
  font-size: 40px;
  color: #fff;
  float: right;
  right: 20px;
  bottom: 10px;
  position: absolute;
  cursor: pointer;
}
.close .next {
  color: #fff;
}
.wrong .next {
  color: #ff2d26;
}
.next:hover {
  color: #333;
}

#placeholder {
  top: 0;
  left: 0;
  padding: 0 5px;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  pointer-events: none;
  transition: .2s ease-in-out;
}
#container input:valid + #placeholder {
  font-size: 11px;
  color: #333;
  font-weight: normal;
  top: -15px;
}
#bottomline {
  width: 0;
  left: 5px;
  padding: 3px 0;
  position: absolute;
  border-bottom: 3px solid #fff;
  transition: width .6s ease-in-out;
}
.wrong #bottomline {
  border-color: #ff2d26;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

body {

background: #efefef;

margin: 0;

font-family: 'Lato', sans-serif;

}

#progressbarline {

background: #38d012;

top: 0;

position: fixed;

height: 15px;

transition: width 0.2s ease-in-out;

border-radius: 10px;

}

#container {

opacity: 0;

width: 350px;

margin-top: 25px;

position: relative;

color: #fff !important;

transition: opacity .3s ease-in-out;

}

#container input {

width: 100%;

color:#fff !important;

font-size: 20px;

font-weight: bold;

padding: 0 5px;

background: transparent;

border: none;

outline: 0;

box-shadow:none;

}

h1 {

left: 23%;

bottom: 0px;

top: 20% !important;

position: absolute;

color: #333;

text-align: center;

}

h2{

color: #333;

}

.center {

display: flex;

height: 100vh;

align-items: center;

justify-content: center;

}

#form {

background: #38d012;

width: 410px;

color: #fff !important;

border-radius: 30px;

position: relative;

padding: 2px 15px 20px 15px;

box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);

transition: transform .1s ease-in-out;

}

#form.close {

padding: 0;

width: 0;

transition: .8s ease-in-out;

box-shadow: 0 16px 24px 2px rgba(0,0,0,0);

overflow: hidden;

}

.next {

font-size: 40px;

color: #fff;

float: right;

right: 20px;

bottom: 10px;

position: absolute;

cursor: pointer;

}

.close .next {

color: #fff;

}

.wrong .next {

color: #ff2d26;

}

.next:hover {

color: #333;

}

#placeholder {

top: 0;

left: 0;

padding: 0 5px;

font-size: 20px;

font-weight: bold;

position: absolute;

pointer-events: none;

transition: .2s ease-in-out;

}

#container input:valid + #placeholder {

font-size: 11px;

color: #333;

font-weight: normal;

top: -15px;

}

#bottomline {

width: 0;

left: 5px;

padding: 3px 0;

position: absolute;

border-bottom: 3px solid #fff;

transition: width .6s ease-in-out;

}

.wrong #bottomline {

border-color: #ff2d26;

}

Third Step: Creating the JavaScript Files as name “function.js” and Put JS code in the file as given below

var questions = [
  {question:"Full Name"},
  {question:"Father Name"},
  {question:"Email ID", pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/},
  {question:"Create a password", type: "password"}
]
 
;(function(){
 
  var tTime = 100  
  var wTime = 200  
  var eTime = 800
 
  var position = 0
 
  putQuestion()
 
  bttn.addEventListener('click', validate)
  txtfield.addEventListener('keyup', function(e){
    transform(0, 0) 
    if(e.keyCode == 13) validate()
  })
 
 
  function putQuestion() {
    placeholder.innerHTML = questions[position].question
    txtfield.value = ''
    txtfield.type = questions[position].type || 'text'  
    txtfield.focus()
    showCurrent()
  }
  
  
  function done() {
   
    form.className = 'close'
    
    var h2 = document.createElement('h2')
    h2.appendChild(document.createTextNode('Most Welcome ' + questions[0].value + '!'))
    setTimeout(function() {
      form.parentElement.appendChild(h2)     
      setTimeout(function() {h2.style.opacity = 1}, 50)
    }, eTime)
    
  }
 
  function validate() {
 
    questions[position].value = txtfield.value
 
    if (!txtfield.value.match(questions[position].pattern || /.+/)) wrong()
    else ok(function() {
      
      progressbarline.style.width = ++position * 100 / questions.length + 'vw'
 
      if (questions[position]) hideCurrent(putQuestion)
      else hideCurrent(done)
             
    })
 
  }
 
 
  function hideCurrent(callback) {
    container.style.opacity = 0
    bottomline.style.transition = 'none'
    bottomline.style.width = 0
    setTimeout(callback, wTime)
  }
 
  function showCurrent(callback) {
    container.style.opacity = 1
    bottomline.style.transition = ''
    bottomline.style.width = '100%'
    setTimeout(callback, wTime)
  }
 
  function transform(x, y) {
    form.style.transform = 'translate(' + x + 'px ,  ' + y + 'px)'
  }
 
  function ok(callback) {
    form.className = ''
    setTimeout(transform, tTime * 0, 0, 10)
    setTimeout(transform, tTime * 1, 0, 0)
    setTimeout(callback,  tTime * 2)
  }
 
  function wrong(callback) {
    form.className = 'wrong'
    for(var i = 0; i < 6; i++) 
      setTimeout(transform, tTime * i, (i%2*2-1)*20, 0)
    setTimeout(transform, tTime * 6, 0, 0)
    setTimeout(callback,  tTime * 7)
  }
}())

var questions = [

{question:"Full Name"},

{question:"Father Name"},

{question:"Email ID", pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/},

{question:"Create a password", type: "password"}

]

;(function(){

var tTime = 100

var wTime = 200

var eTime = 800

var position = 0

putQuestion()

bttn.addEventListener('click', validate)

txtfield.addEventListener('keyup', function(e){

transform(0, 0)

if(e.keyCode == 13) validate()

})

function putQuestion() {

placeholder.innerHTML = questions[position].question

txtfield.value = ''

txtfield.type = questions[position].type || 'text'

txtfield.focus()

showCurrent()

}

function done() {

form.className = 'close'

var h2 = document.createElement('h2')

h2.appendChild(document.createTextNode('Most Welcome ' + questions[0].value + '!'))

setTimeout(function() {

form.parentElement.appendChild(h2)

setTimeout(function() {h2.style.opacity = 1}, 50)

}, eTime)

}

function validate() {

questions[position].value = txtfield.value

if (!txtfield.value.match(questions[position].pattern || /.+/)) wrong()

else ok(function() {

progressbarline.style.width = ++position * 100 / questions.length + 'vw'

if (questions[position]) hideCurrent(putQuestion)

else hideCurrent(done)

})

}

function hideCurrent(callback) {

container.style.opacity = 0

bottomline.style.transition = 'none'

bottomline.style.width = 0

setTimeout(callback, wTime)

}

function showCurrent(callback) {

container.style.opacity = 1

bottomline.style.transition = ''

bottomline.style.width = '100%'

setTimeout(callback, wTime)

}

function transform(x, y) {

form.style.transform = 'translate(' + x + 'px , ' + y + 'px)'

}

function ok(callback) {

form.className = ''

setTimeout(transform, tTime * 0, 0, 10)

setTimeout(transform, tTime * 1, 0, 0)

setTimeout(callback, tTime * 2)

}

function wrong(callback) {

form.className = 'wrong'

for(var i = 0; i < 6; i++)

setTimeout(transform, tTime * i, (i%2*2-1)*20, 0)

setTimeout(transform, tTime * 6, 0, 0)

setTimeout(callback, tTime * 7)

}

}())

As a result, follow the code segment to create the form. you will be created successfully .if you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.

Multi Step Form With Progress Bar | Single Input Using CSS JS

Explanation of Multi-Step Form With a Progress Bar Source Code using HTML, CSS, JS

First Step: Creating the HTML Files as name “index.html” and Put code in the file as given below

Second Step: Creating the CSS Files as name “stylesheet.css” and Put code in the file as given below

Third Step: Creating the JavaScript Files as name “function.js” and Put JS code in the file as given below

Related Posts

About Author

admin