Home Web Development JavaScript Multi Step Form With Progress Bar Using CSS JavaScript | Single Input

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

July 8, 2019

23910

How we can create a multi-step form with progress bar using HTML, CSS, & JS? Solution: Multi Step Form With Progress Bar Using CSS JavaScript, Dynamic Form With Single Input.

Maybe you have seen multi step form on some websites or social network. This type of forms nowadays are on trend, most people using the form with multi-step. Multi step form creates a good user interaction on the webpage, the days are gone when people use the long form with many fields.

Today you will learn to create a dynamic multiple step form with the help of JavaScript. This form has just an input field that makes it unique, it also has progress bar & email validation. The whole UI is based on CSS & the functions are based on JavaScript. I take inspiration from dribble post to creating this.

So, Today I am sharing a Multi Step Form With Progress Bar Using CSS & JavaScript, A Single Input form with dynamic functions with help of JavaScript. There are some features which make this unique & better from others: This has a single input field, Email validation, Progress Bar, & a Welcome Massage.

If you are thinking now how this form actually is, then see the preview given below.

Preview Of Single Input Multiple Step Form With Validation

See this video preview to getting an idea of how this multi-step form looks like.

Now you can see this visually. If you like this then get the source code of its.

CSS JavaScript Multi Step Form With Progress Bar Source Code

Before sharing source code, let’s talk a little bit about this. As you know the UI is created using CSS & functions are using JS. First, we have to create a div for the progress bar, then have to create a div for place input, label, button & Underline inside that.

In the JavaScript section, I created 4 variables for 4 separate form fields, JS fetch the div using its ID & changes the value of it. Inside the Email variable, I put a pattern for validation, & inside the password var put type password. There are many JS functions to handle various actions. For creating the progress bar, js changes the progress bar’s width by 25% on every action because there are 4 inputs.

I have used an Ionic icon for creating the next button after input. Using CSS I placed all elements in the right place, manage all colors & background colors. Actually JS fun the function & CSS changes the values. There are too many things, I can’t explain in writing. If you have knowledge of HTML, CSS & JS then you will definitely understand after getting the codes.

If you face any problem with understanding this, you can ask me in the comment section or contact form. Another option is you can directly message on our facebook page to get an instant reply.

For creating this program, you have to create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com )  -->
<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="./style.css">
  
</head>
<body>

  <div id="progressb"></div>

<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="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple form form</title>

</head>

<body>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** code by webdevtrick ( https://webdevtrick.com )  **/
body {
  margin: 0;
  background: #ff8181;
font-family: 'Lato', sans-serif;
}
#progressb {
  top: 0;
  position: fixed;
  background: #ff3d3d;
  height: 20px;
  width: 0;
  transition: width 0.2s ease-in-out;
}
h1 {
	color: #333;
}
.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#form {
  background: #fff;
  color: #333;
  position: relative;
  width: 410px;
  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;
  border-radius: 30px;
}

#form.close {
  width: 0;
  padding: 0;
  overflow: hidden;
  transition: .8s ease-in-out;
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0);
}
.next {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 40px;
  color: #ff3d3d;
  float: right;
  cursor: pointer;
}
.next:hover {
	color: #333;
}
.wrong .next {
	color: #ff2d26;
}
.close .next {
	color: #fff;
}
#container {
  position: relative;
  opacity: 0;
  width: 350px;
  margin-top: 25px;
  transition: opacity .3s ease-in-out;

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

100

101

102

103

104

105

/** code by webdevtrick ( https://webdevtrick.com ) **/

body {

margin: 0;

background: #ff8181;

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

}

#progressb {

top: 0;

position: fixed;

background: #ff3d3d;

height: 20px;

width: 0;

transition: width 0.2s ease-in-out;

}

h1 {

color: #333;

}

.center {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

#form {

background: #fff;

color: #333;

position: relative;

width: 410px;

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;

border-radius: 30px;

}

#form.close {

width: 0;

padding: 0;

overflow: hidden;

transition: .8s ease-in-out;

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

}

.next {

position: absolute;

right: 20px;

bottom: 10px;

font-size: 40px;

color: #ff3d3d;

float: right;

cursor: pointer;

}

.next:hover {

color: #333;

}

.wrong .next {

color: #ff2d26;

}

.close .next {

color: #fff;

}

#container {

position: relative;

opacity: 0;

width: 350px;

margin-top: 25px;

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

}

#container input {

width: 100%;

padding: 0 5px;

border: none;

font-size: 20px;

font-weight: bold;

outline: 0;

background: transparent;

box-shadow:none;

}

#placeholder {

position: absolute;

pointer-events: none;

top: 0;

left: 0;

font-size: 20px;

font-weight: bold;

padding: 0 5px;

transition: .2s ease-in-out;

}

#container input:valid + #placeholder {

top: -15px;

font-size: 11px;

font-weight: normal;

color: #333;

}

#bottomline {

position: absolute;

border-bottom: 2px solid #ff3d3d;

padding: 3px 0;

width: 0;

left: 5px;

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

}

.wrong #bottomline {

border-color: #ff2d26;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/** code by webdevtrick ( https://webdevtrick.com )  **/
var questions = [
  {question:"Your first name?"},
  {question:"Your last name?"},
  {question:"Your 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 h1 = document.createElement('h1')
    h1.appendChild(document.createTextNode('Welcome ' + questions[0].value + '!'))
    setTimeout(function() {
      form.parentElement.appendChild(h1)     
      setTimeout(function() {h1.style.opacity = 1}, 50)
    }, eTime)
    
  }

  function validate() {

    questions[position].value = txtfield.value

    if (!txtfield.value.match(questions[position].pattern || /.+/)) wrong()
    else ok(function() {
      
      progressb.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)
  }

}())

/** code by webdevtrick ( https://webdevtrick.com ) **/

var questions = [

{question:"Your first name?"},

{question:"Your last name?"},

{question:"Your 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 h1 = document.createElement('h1')

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

setTimeout(function() {

form.parentElement.appendChild(h1)

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

}, eTime)

}

function validate() {

questions[position].value = txtfield.value

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

else ok(function() {

progressb.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)

}

}())

That’s It. Now you have successfully created A Multi Step Form With Progress Bar Using CSS JavaScript. In other words, Animated Single Input Form with Validation. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

Sanjay Jha July 8, 2019 At 9:11 pm

Bro mushkil ha smjhna thode

Reply
- shaan July 9, 2019 At 2:37 am
  
  bro ek ek step krke samjho, phle input fir progress, ese samajh aayega
  
  Reply
Arka Paul July 10, 2019 At 5:49 pm

This is exactly what I need… You sure deserve a great thanks.

Reply
- shaan July 10, 2019 At 6:14 pm
  
  Thank you very much
  
  Reply
Manasa preeya S November 25, 2020 At 8:15 am

Thanks! This is great 🙂

Reply

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

Preview Of Single Input Multiple Step Form With Validation

CSS JavaScript Multi Step Form With Progress Bar Source Code

5 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY