Home Web Development JavaScript Animated Step By Step Form With CSS and jQuery | Multiple Step...

Animated Step By Step Form With CSS and jQuery | Multiple Step Form

April 9, 2020

5312

How we can create a step by step form using jQuery and CSS? Solution: See this Animated Step By Step Form With CSS and jQuery, Multiple-step Form.

Previously I have shared some multi-step form, but this one has a cool animation effect. Basically, a step by step from is for generally getting data but its fields are divided on more than one section. All the field sections appear one after one, after filling the fields and click on next or any other named button like submit, done, etc.

Today you will learn to create Multiple step Form with an animation. Basically, this form has 3 steps, the first field is with basic text input for store name and email. The second input this with radio inputs for selecting options and the third section contains simple text and a done button to end the form. After finishing all steps there will appear a restart button for starting the program again.

So, Today I am sharing Animated Step By Step Form With CSS and jQuery. In this program, styles are based on CSS and functions are based on jQuery. As we know jQuery is a JS library that’s why I am putting this post in the JS category. We use libraries for easy work and save some time, if we use pure JS to creating the program then it will little complicated.

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

Preview Of Multiple Steps Form

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

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Animated Step By Step Form With CSS and jQuery Source Code

Before sharing source code, let’s talk about it. First I have created the layout using HTML divs, forms, and other elements. There I have created 3 sections, because there is 3 steps. The first form contains 2 text inputs, second contains 2 radio input, both have a form tag. Also there is another div for placing the restart button at last.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I gave style, position, size, etc to all the elements. I have used CSS @keyframe command to creating animation effects, and all animations are based on CSS but functioned by JS. For animation, I have used transform and rotate commands most.

jQuery handling here the main feature of this program. The step function is based on JS if{} else{} condition, and other function is based on adding and removing class names. For adding and removing used jQuery .addClass and .removeClass commands. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, the second one for CSS, and the last 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 below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated Step Form | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <div class="header"><span class="active"></span><span></span><span></span></div>
  <div class="fields">
    <div class="modal-body 1step is-showing">
      <div class="title">Step 1</div>
      <div class="description">Fill your details.</div>
      <form>
        <input type="text" placeholder="Name"/>
        <input type="email" placeholder="Email"/>
        <div class="text-center">
          <div class="button">Start</div>
        </div>
      </form>
    </div>
    <div class="modal-body 2step">
      <div class="title">Step 2</div>
      <div class="description">Choose a option</div>
      <form>
        <label>
          <input type="radio" name="radio"/>Become Rich
        </label>
        <label>
          <input type="radio" name="radio" id="radio2"/>Become Genius
        </label>
        <div class="text-center fade-in">
          <div class="button">Next</div>
        </div>
      </form>
    </div>
    <div class="modal-body 3step">
      <div class="title">Step 3</div>
      <div class="description">Thanks For Share Your Opinion</div>
      <div class="text-center">
        <div class="button">Done!</div>
      </div>
    </div>
  </div>
</div>
<div class="text-center">
  <div class="reStart">Restart</div>
</div>

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Animated Step Form | Webdevtrick.com</title>

</head>

<body>

<div class="description">Fill your details.</div>

<form>

<div class="button">Start</div>

</div>

</form>

</div>

<div class="description">Choose a option</div>

<form>

<label>

<input type="radio" name="radio"/>Become Rich

</label>

<label>

<input type="radio" name="radio" id="radio2"/>Become Genius

</label>

</div>

</form>

</div>

<div class="description">Thanks For Share Your Opinion</div>

</div>

<div class="reStart">Restart</div>

</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 ) */
html {
  background: #e8eaed;
  min-height: 100%;
  font-family: "Roboto", sans-serif;
}

.title {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
  color: #00d308;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 1px;
}

.description {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

input[type="text"],
input[type="email"] {
  padding: 10px 20px;
  border: 1px solid #999;
  border-radius: 3px;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  outline: none;
}
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: #00d308;
}

input[type="radio"] {
  margin-right: 10px;
}

label {
  margin-bottom: 20px;
  display: block;
  font-size: 18px;
  color: #666;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
  cursor: pointer;
}
label:first-child {
  margin-bottom: 0;
  border-bottom: none;
}

.button,
.reStart {
  padding: 10px 20px;
  border-radius: 3px;
  background: #00d308;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  cursor: pointer;
}
.button:hover,
.reStart:hover {
  background: #212121;
}
.button.reStart,
.reStart.reStart {
  border: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2);
  display: none;
}

.text-center {
  text-align: center;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.header {
  height: 45px;
  background: white;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header span {
  display: block;
  height: 12px;
  width: 12px;
  margin: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}
.header span.active {
  background: rgba(0, 0, 0, 0.4);
  background: #00d308;
}

.fields {
  position: relative;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.modal-body {
  background: white;
  padding: 40px 100px;
  box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);
  margin-bottom: 50px;
  position: absolute;
  top: 0;
  display: none;
  box-sizing: border-box;
  width: 100%;
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.modal-body.is-showing {
  display: block;
}

.animate-out {
  -webkit-animation: out 600ms ease-in-out forwards;
          animation: out 600ms ease-in-out forwards;
}

.animate-in {
  -webkit-animation: in 500ms ease-in-out forwards;
          animation: in 500ms ease-in-out forwards;
  display: block;
}

.animate-up {
  -webkit-transform: translateY(-500px) rotate(30deg);
          transform: translateY(-500px) rotate(30deg);
}

@-webkit-keyframes out {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    -webkit-transform: translateY(800px) rotate(10deg);
            transform: translateY(800px) rotate(10deg);
  }
}

@keyframes out {
  0% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    -webkit-transform: translateY(800px) rotate(10deg);
            transform: translateY(800px) rotate(10deg);
  }
}
@-webkit-keyframes in {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
@keyframes in {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html {

background: #e8eaed;

min-height: 100%;

font-family: "Roboto", sans-serif;

}

.title {

text-transform: uppercase;

text-align: center;

margin-bottom: 30px;

color: #00d308;

font-weight: 300;

font-size: 24px;

letter-spacing: 1px;

}

.description {

text-align: center;

color: #666;

margin-bottom: 30px;

}

input[type="text"],

input[type="email"] {

padding: 10px 20px;

border: 1px solid #999;

border-radius: 3px;

display: block;

width: 100%;

margin-bottom: 20px;

box-sizing: border-box;

outline: none;

}

input[type="text"]:focus,

input[type="email"]:focus {

border-color: #00d308;

}

input[type="radio"] {

margin-right: 10px;

}

label {

margin-bottom: 20px;

display: block;

font-size: 18px;

color: #666;

border-top: 1px solid #ddd;

border-bottom: 1px solid #ddd;

padding: 20px 0;

cursor: pointer;

}

label:first-child {

margin-bottom: 0;

border-bottom: none;

}

.button,

.reStart {

padding: 10px 20px;

border-radius: 3px;

background: #00d308;

color: white;

text-transform: uppercase;

letter-spacing: 1px;

display: inline-block;

cursor: pointer;

}

.button:hover,

.reStart:hover {

background: #212121;

}

.button.reStart,

.reStart.reStart {

border: 1px solid rgba(255, 255, 255, 0.6);

margin-bottom: 50px;

box-shadow: 0px 10px 15px -6px rgba(0, 0, 0, 0.2);

display: none;

}

.text-center {

text-align: center;

}

.container {

max-width: 600px;

margin: 50px auto;

transition: -webkit-transform 300ms ease-in-out;

transition: transform 300ms ease-in-out;

transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;

}

.header {

height: 45px;

background: white;

border-bottom: 1px solid #ccc;

display: flex;

justify-content: center;

align-items: center;

}

.header span {

display: block;

height: 12px;

width: 12px;

margin: 5px;

border-radius: 50%;

background: rgba(0, 0, 0, 0.2);

}

.header span.active {

background: rgba(0, 0, 0, 0.4);

background: #00d308;

}

.fields {

position: relative;

-webkit-perspective: 1000px;

perspective: 1000px;

}

.modal-body {

background: white;

padding: 40px 100px;

box-shadow: 0px 50px 30px -30px rgba(0, 0, 0, 0.3);

margin-bottom: 50px;

position: absolute;

top: 0;

display: none;

box-sizing: border-box;

width: 100%;

-webkit-transform-origin: top left;

transform-origin: top left;

}

.modal-body.is-showing {

display: block;

}

.animate-out {

-webkit-animation: out 600ms ease-in-out forwards;

animation: out 600ms ease-in-out forwards;

}

.animate-in {

-webkit-animation: in 500ms ease-in-out forwards;

animation: in 500ms ease-in-out forwards;

display: block;

}

.animate-up {

-webkit-transform: translateY(-500px) rotate(30deg);

transform: translateY(-500px) rotate(30deg);

}

@-webkit-keyframes out {

0% {

-webkit-transform: translateY(0px) rotate(0deg);

transform: translateY(0px) rotate(0deg);

}

60% {

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

100% {

-webkit-transform: translateY(800px) rotate(10deg);

transform: translateY(800px) rotate(10deg);

}

@keyframes out {

0% {

-webkit-transform: translateY(0px) rotate(0deg);

transform: translateY(0px) rotate(0deg);

}

60% {

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

100% {

-webkit-transform: translateY(800px) rotate(10deg);

transform: translateY(800px) rotate(10deg);

}

@-webkit-keyframes in {

0% {

opacity: 0;

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

}

100% {

opacity: 1;

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

@keyframes in {

0% {

opacity: 0;

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

}

100% {

opacity: 1;

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

function.js

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

// Code By Webdevtrick ( https://webdevtrick.com )
$('.button').click(function(){
  var $btn = $(this),
      $step = $btn.parents('.modal-body'),
      stepIndex = $step.index(),
      $pag = $('.header span').eq(stepIndex);

  if(stepIndex === 0 || stepIndex === 1) { step1($step, $pag); }
  else { step3($step, $pag); }
  
});


function step1($step, $pag){
console.log('step1');
  // animate the step out
  $step.addClass('animate-out');
  
  // animate the step in
  setTimeout(function(){
    $step.removeClass('animate-out is-showing')
         .next().addClass('animate-in');
    $pag.removeClass('active')
          .next().addClass('active');
  }, 600);
  
  // after the animation, adjust the classes
  setTimeout(function(){
    $step.next().removeClass('animate-in')
          .addClass('is-showing');
    
  }, 1200);
}


function step3($step, $pag){
console.log('3');

  // animate the step out
  $step.parents('.container').addClass('animate-up');

  setTimeout(function(){
    $('.reStart').css('display', 'inline-block');
  }, 300);
}

$('.reStart').click(function(){
 $('.container').removeClass('animate-up')
                  .find('.modal-body')
                  .first().addClass('is-showing')
                  .siblings().removeClass('is-showing');

  $('.header span').first().addClass('active')
                          .siblings().removeClass('active');
 $(this).hide();
});

// Code By Webdevtrick ( https://webdevtrick.com )

$('.button').click(function(){

var $btn = $(this),

$step = $btn.parents('.modal-body'),

stepIndex = $step.index(),

$pag = $('.header span').eq(stepIndex);

if(stepIndex === 0 || stepIndex === 1) { step1($step, $pag); }

else { step3($step, $pag); }

});

function step1($step, $pag){

console.log('step1');

// animate the step out

$step.addClass('animate-out');

// animate the step in

setTimeout(function(){

$step.removeClass('animate-out is-showing')

.next().addClass('animate-in');

$pag.removeClass('active')

.next().addClass('active');

}, 600);

// after the animation, adjust the classes

setTimeout(function(){

$step.next().removeClass('animate-in')

.addClass('is-showing');

}, 1200);

}

function step3($step, $pag){

console.log('3');

// animate the step out

$step.parents('.container').addClass('animate-up');

setTimeout(function(){

$('.reStart').css('display', 'inline-block');

}, 300);

}

$('.reStart').click(function(){

$('.container').removeClass('animate-up')

.find('.modal-body')

.first().addClass('is-showing')

.siblings().removeClass('is-showing');

$('.header span').first().addClass('active')

.siblings().removeClass('active');

$(this).hide();

});

That’s It. Now you have successfully created Animated Step By Step Form With CSS and jQuery, Multiple step Form. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

Quadri December 16, 2019 At 8:55 am

You are awesome!!!

Reply
- shaan December 16, 2019 At 11:00 am
  
  Thank you.
  
  Reply
Nurye Nigus October 28, 2020 At 4:31 am

thank u but how can we get the information some one entered on this form

Reply

Animated Step By Step Form With CSS and jQuery | Multiple Step Form

Preview Of Multiple Steps Form

Animated Step By Step Form With CSS and jQuery Source Code

3 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