Home Web Design Bootstrap Bootstrap Multi Step Form Animations With CSS | Switch Form’s Animation

Bootstrap Multi Step Form Animations With CSS | Switch Form’s Animation

September 23, 2019

14339

How we can create a multi step form with multi animation styles? Solution: See this Bootstrap Multi Step Form Animations With CSS, Switch Form’s Animation Program.

Previously I have shared a JavaScript Multi Step Form, but this is something different because you can switch the animation style in this program. Mostly these type of form you will see in the cart checkout section and some social network’s registration form. Basically multi step form divides the form’s input into multiple sections. Like personal info name, email, etc on one section, billing address on other section, and card info on different section.

Today you will learn to create a switch form’s animation program. Basically, there is multi-step or step by step form and two buttons for next and previous steps. When it goes next or previous there is an animation effect, which we can change or switch by choosing the animation type which is given above the form. After selecting various animation types, then the step’s animation will change according to that.

So, Today I am sharing Bootstrap Multi Step Form Animations With CSS. This program is created with Bootstrap, so this is a responsive design. Because bootstrap is built for creating responsive elements, it is a library of HTML CSS JS. Here I have also used JavaScript for the change animation feature. The main function of this program is we can switch animations, the animations are powered by CSS and the switch program in JavaScript.

If you are thinking now how this responsive multi-step program actually is, then see the preview given below.

Preview Of Responsive Step By Step Form’s Animation Switch

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

Live Demo

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

Bootstrap Multi Step Form Animations With CSS Source Code

Before sharing source code, let’s talk about it. First, in the HTML file, I have placed form’s inputs and contents. As you can see in the preview, there is an option bar for choosing or changing the animation effect, this is created using HTML <option> tag and put values which are functioned with jQuery and CSS.

In the HTML file, I have linked Bootstrap’s CND link (get) in the head section. Bootstrap has pre-built class and functions for creating a functioning and responsive elements, you have to just put the class or ID name in the HTML tags. Because of Bootstrap, there are less CSS codes according to the program. I have placed all the elements on the right place, as you can see in the preview.

In the CSS file I have created the animation according to the given values, now using JavaScript created a program for switch animations style. There also is a progress bar to indicate the process percentage, which is created using JS. 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 for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file ‘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>Bootstrap Multi Step Form | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header class="header">
  <h1 class="header__title">Multi Steps Form Animations</h1>
</header>
<div class="content">
  <div class="content__inner">
    <div class="container">
      <h2 class="content__title content__title--m-sm">Choose Animation Type</h2>
      <form class="pick-animation my-4">
        <div class="form-row">
          <div class="col-5 m-auto">
            <select class="pick-animation__select form-control">
              <option value="scaleIn" selected="selected">ScaleIn</option>
              <option value="scaleOut">ScaleOut</option>
              <option value="slideHorz">SlideHorz</option>
              <option value="slideVert">SlideVert</option>
              <option value="fadeIn">FadeIn</option>
            </select>
          </div>
        </div>
      </form>

      <h2 class="content__title">Click on steps or 'Prev' and 'Next' buttons</h2>
    </div>
    <div class="container overflow-hidden">
      <div class="multisteps-form">
        <div class="row">
          <div class="col-12 col-lg-8 ml-auto mr-auto mb-4">
            <div class="multisteps-form__progress">
              <button class="multisteps-form__progress-btn js-active" type="button" title="User Info">User Info</button>
              <button class="multisteps-form__progress-btn" type="button" title="Address">Address</button>
              <button class="multisteps-form__progress-btn" type="button" title="Order Info">Order Info</button>
              <button class="multisteps-form__progress-btn" type="button" title="Message">Message        </button>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-8 m-auto">
            <form class="multisteps-form__form">
              <div class="multisteps-form__panel shadow p-4 rounded bg-white js-active" data-animation="scaleIn">
                <h3 class="multisteps-form__title">Your User Info</h3>
                <div class="multisteps-form__content">
                  <div class="form-row mt-4">
                    <div class="col-12 col-sm-6">
                      <input class="multisteps-form__input form-control" type="text" placeholder="First Name"/>
                    </div>
                    <div class="col-12 col-sm-6 mt-4 mt-sm-0">
                      <input class="multisteps-form__input form-control" type="text" placeholder="Last Name"/>
                    </div>
                  </div>
                  <div class="form-row mt-4">
                    <div class="col-12 col-sm-6">
                      <input class="multisteps-form__input form-control" type="text" placeholder="Login"/>
                    </div>
                    <div class="col-12 col-sm-6 mt-4 mt-sm-0">
                      <input class="multisteps-form__input form-control" type="email" placeholder="Email"/>
                    </div>
                  </div>
                  <div class="form-row mt-4">
                    <div class="col-12 col-sm-6">
                      <input class="multisteps-form__input form-control" type="password" placeholder="Password"/>
                    </div>
                    <div class="col-12 col-sm-6 mt-4 mt-sm-0">
                      <input class="multisteps-form__input form-control" type="password" placeholder="Repeat Password"/>
                    </div>
                  </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button>
                  </div>
                </div>
              </div>

              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">Your Address</h3>
                <div class="multisteps-form__content">
                  <div class="form-row mt-4">
                    <div class="col">
                      <input class="multisteps-form__input form-control" type="text" placeholder="Address 1"/>
                    </div>
                  </div>
                  <div class="form-row mt-4">
                    <div class="col">
                      <input class="multisteps-form__input form-control" type="text" placeholder="Address 2"/>
                    </div>
                  </div>
                  <div class="form-row mt-4">
                    <div class="col-12 col-sm-6">
                      <input class="multisteps-form__input form-control" type="text" placeholder="City"/>
                    </div>
                    <div class="col-6 col-sm-3 mt-4 mt-sm-0">
                      <select class="multisteps-form__select form-control">
                        <option selected="selected">State...</option>
                        <option>...</option>
                      </select>
                    </div>
                    <div class="col-6 col-sm-3 mt-4 mt-sm-0">
                      <input class="multisteps-form__input form-control" type="text" placeholder="Zip"/>
                    </div>
                  </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button>
                    <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button>
                  </div>
                </div>
              </div>

              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">Your Order Info</h3>
                <div class="multisteps-form__content">
                  <div class="row">
                    <div class="col-12 col-md-6 mt-4">
                      <div class="card shadow-sm">
                        <div class="card-body">
                          <h5 class="card-title">Item Title</h5>
                          <p class="card-text">Small and nice item description</p><a class="btn btn-primary" href="#" title="Item Link">Item Link</a>
                        </div>
                      </div>
                    </div>
                    <div class="col-12 col-md-6 mt-4">
                      <div class="card shadow-sm">
                        <div class="card-body">
                          <h5 class="card-title">Item Title</h5>
                          <p class="card-text">Small and nice item description</p><a class="btn btn-primary" href="#" title="Item Link">Item Link</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="button-row d-flex mt-4 col-12">
                      <button class="btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button>
                      <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">Additional Message</h3>
                <div class="multisteps-form__content">
                  <div class="form-row mt-4">
                    <textarea class="multisteps-form__textarea form-control" placeholder="Additional Message and Questions"></textarea>
                  </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary js-btn-prev" type="button" title="Prev">Prev</button>
                    <button class="btn btn-success ml-auto" type="button" title="Send">Send</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script  src="function.js"></script>

</body>
</html>

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

<!DOCTYPE html>

<head>

<title>Bootstrap Multi Step Form | Webdevtrick.com</title>

</head>

<body>

<h1 class="header__title">Multi Steps Form Animations</h1>

</header>

<h2 class="content__title content__title--m-sm">Choose Animation Type</h2>

<option value="scaleIn" selected="selected">ScaleIn</option>

<option value="scaleOut">ScaleOut</option>

<option value="slideHorz">SlideHorz</option>

<option value="slideVert">SlideVert</option>

<option value="fadeIn">FadeIn</option>

</select>

</div>

</form>

<h2 class="content__title">Click on steps or 'Prev' and 'Next' buttons</h2>

</div>

<button class="multisteps-form__progress-btn" type="button" title="Address">Address</button>

<button class="multisteps-form__progress-btn" type="button" title="Order Info">Order Info</button>

<button class="multisteps-form__progress-btn" type="button" title="Message">Message </button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<h3 class="multisteps-form__title">Your Address</h3>

</div>

</div>

</div>

<option selected="selected">State...</option>

</select>

</div>

</div>

</div>

<h3 class="multisteps-form__title">Your Order Info</h3>

<h5 class="card-title">Item Title</h5>

<p class="card-text">Small and nice item description</p><a class="btn btn-primary" href="#" title="Item Link">Item Link</a>

</div>

<h5 class="card-title">Item Title</h5>

<p class="card-text">Small and nice item description</p><a class="btn btn-primary" href="#" title="Item Link">Item Link</a>

</div>

</div>

<h3 class="multisteps-form__title">Additional Message</h3>

</div>

</div>

</form>

</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 ) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #2c2c2c;
}
body a {
  color: inherit;
  text-decoration: none;
}
.header {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

.header__title {
  margin-bottom: 30px;
  font-size: 2.1rem;
}

.content {
  width: 95%;
  margin: 0 auto 50px;
}

.content__title {
  margin-bottom: 40px;
  font-size: 20px;
  text-align: center;
}

.content__title--m-sm {
  margin-bottom: 10px;
}

.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 20px;
  color: rgba(108, 117, 125, 0.7);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
  cursor: pointer;
}
@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }
}
.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: '';
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
}
.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background-color: currentColor;
  z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
  display: none;
}
.multisteps-form__progress-btn.js-active {
  color: #007bff;
}
.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
          transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
}

.multisteps-form__form {
  position: relative;
}

.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.multisteps-form__panel.js-active {
  height: auto;
  opacity: 1;
  visibility: visible;
}
.multisteps-form__panel[data-animation="scaleOut"] {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.multisteps-form__panel[data-animation="scaleOut"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.multisteps-form__panel[data-animation="slideHorz"] {
  left: 50px;
}
.multisteps-form__panel[data-animation="slideHorz"].js-active {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);
  transition-delay: 0s;
  left: 0;
}
.multisteps-form__panel[data-animation="slideVert"] {
  top: 30px;
}
.multisteps-form__panel[data-animation="slideVert"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  top: 0;
}
.multisteps-form__panel[data-animation="fadeIn"].js-active {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}

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

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

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

font-size: 16px;

color: #2c2c2c;

}

body a {

color: inherit;

text-decoration: none;

}

.header {

max-width: 600px;

margin: 50px auto;

text-align: center;

}

.header__title {

margin-bottom: 30px;

font-size: 2.1rem;

}

.content {

width: 95%;

margin: 0 auto 50px;

}

.content__title {

margin-bottom: 40px;

font-size: 20px;

text-align: center;

}

.content__title--m-sm {

margin-bottom: 10px;

}

.multisteps-form__progress {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

}

.multisteps-form__progress-btn {

transition-property: all;

transition-duration: 0.15s;

transition-timing-function: linear;

transition-delay: 0s;

position: relative;

padding-top: 20px;

color: rgba(108, 117, 125, 0.7);

text-indent: -9999px;

border: none;

background-color: transparent;

outline: none !important;

cursor: pointer;

}

@media (min-width: 500px) {

.multisteps-form__progress-btn {

text-indent: 0;

}

.multisteps-form__progress-btn:before {

position: absolute;

top: 0;

left: 50%;

display: block;

width: 13px;

height: 13px;

content: '';

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;

transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;

transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;

border: 2px solid currentColor;

border-radius: 50%;

background-color: #fff;

box-sizing: border-box;

z-index: 3;

}

.multisteps-form__progress-btn:after {

position: absolute;

top: 5px;

left: calc(-50% - 13px / 2);

transition-property: all;

transition-duration: 0.15s;

transition-timing-function: linear;

transition-delay: 0s;

display: block;

width: 100%;

height: 2px;

content: '';

background-color: currentColor;

z-index: 1;

}

.multisteps-form__progress-btn:first-child:after {

display: none;

}

.multisteps-form__progress-btn.js-active {

color: #007bff;

}

.multisteps-form__progress-btn.js-active:before {

-webkit-transform: translateX(-50%) scale(1.2);

transform: translateX(-50%) scale(1.2);

background-color: currentColor;

}

.multisteps-form__form {

position: relative;

}

.multisteps-form__panel {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 0;

opacity: 0;

visibility: hidden;

}

.multisteps-form__panel.js-active {

height: auto;

opacity: 1;

visibility: visible;

}

.multisteps-form__panel[data-animation="scaleOut"] {

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

.multisteps-form__panel[data-animation="scaleOut"].js-active {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

-webkit-transform: scale(1);

transform: scale(1);

}

.multisteps-form__panel[data-animation="slideHorz"] {

left: 50px;

}

.multisteps-form__panel[data-animation="slideHorz"].js-active {

transition-property: all;

transition-duration: 0.25s;

transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);

transition-delay: 0s;

left: 0;

}

.multisteps-form__panel[data-animation="slideVert"] {

top: 30px;

}

.multisteps-form__panel[data-animation="slideVert"].js-active {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

top: 0;

}

.multisteps-form__panel[data-animation="fadeIn"].js-active {

transition-property: all;

transition-duration: 0.3s;

transition-timing-function: linear;

transition-delay: 0s;

}

.multisteps-form__panel[data-animation="scaleIn"] {

-webkit-transform: scale(0.9);

transform: scale(0.9);

}

.multisteps-form__panel[data-animation="scaleIn"].js-active {

transition-property: all;

transition-duration: 0.2s;

transition-timing-function: linear;

transition-delay: 0s;

-webkit-transform: scale(1);

transform: scale(1);

}

function.js

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

// Code By Webdevtrick ( https://webdevtrick.com )
const DOMstrings = {
  stepsBtnClass: 'multisteps-form__progress-btn',
  stepsBtns: document.querySelectorAll(`.multisteps-form__progress-btn`),
  stepsBar: document.querySelector('.multisteps-form__progress'),
  stepsForm: document.querySelector('.multisteps-form__form'),
  stepsFormTextareas: document.querySelectorAll('.multisteps-form__textarea'),
  stepFormPanelClass: 'multisteps-form__panel',
  stepFormPanels: document.querySelectorAll('.multisteps-form__panel'),
  stepPrevBtnClass: 'js-btn-prev',
  stepNextBtnClass: 'js-btn-next' };


const removeClasses = (elemSet, className) => {

  elemSet.forEach(elem => {

    elem.classList.remove(className);

  });

};

const findParent = (elem, parentClass) => {

  let currentNode = elem;

  while (!currentNode.classList.contains(parentClass)) {
    currentNode = currentNode.parentNode;
  }

  return currentNode;

};

const getActiveStep = elem => {
  return Array.from(DOMstrings.stepsBtns).indexOf(elem);
};

const setActiveStep = activeStepNum => {

  removeClasses(DOMstrings.stepsBtns, 'js-active');

  DOMstrings.stepsBtns.forEach((elem, index) => {

    if (index <= activeStepNum) {
      elem.classList.add('js-active');
    }

  });
};

const getActivePanel = () => {

  let activePanel;

  DOMstrings.stepFormPanels.forEach(elem => {

    if (elem.classList.contains('js-active')) {

      activePanel = elem;

    }

  });

  return activePanel;

};

const setActivePanel = activePanelNum => {

  removeClasses(DOMstrings.stepFormPanels, 'js-active');

  DOMstrings.stepFormPanels.forEach((elem, index) => {
    if (index === activePanelNum) {

      elem.classList.add('js-active');

      setFormHeight(elem);

    }
  });

};

const formHeight = activePanel => {

  const activePanelHeight = activePanel.offsetHeight;

  DOMstrings.stepsForm.style.height = `${activePanelHeight}px`;

};

const setFormHeight = () => {
  const activePanel = getActivePanel();

  formHeight(activePanel);
};

DOMstrings.stepsBar.addEventListener('click', e => {

  const eventTarget = e.target;

  if (!eventTarget.classList.contains(`${DOMstrings.stepsBtnClass}`)) {
    return;
  }

  const activeStep = getActiveStep(eventTarget);

  setActiveStep(activeStep);

  setActivePanel(activeStep);
});

DOMstrings.stepsForm.addEventListener('click', e => {

  const eventTarget = e.target;

  if (!(eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`) || eventTarget.classList.contains(`${DOMstrings.stepNextBtnClass}`)))
  {
    return;
  }

  const activePanel = findParent(eventTarget, `${DOMstrings.stepFormPanelClass}`);

  let activePanelNum = Array.from(DOMstrings.stepFormPanels).indexOf(activePanel);

  if (eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`)) {
    activePanelNum--;

  } else {

    activePanelNum++;

  }

  setActiveStep(activePanelNum);
  setActivePanel(activePanelNum);

});

window.addEventListener('load', setFormHeight, false);

window.addEventListener('resize', setFormHeight, false);


const setAnimationType = newType => {
  DOMstrings.stepFormPanels.forEach(elem => {
    elem.dataset.animation = newType;
  });
};

//changing animation
const animationSelect = document.querySelector('.pick-animation__select');

animationSelect.addEventListener('change', () => {
  const newAnimationType = animationSelect.value;

  setAnimationType(newAnimationType);
});

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

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

const DOMstrings = {

stepsBtnClass: 'multisteps-form__progress-btn',

stepsBtns: document.querySelectorAll(`.multisteps-form__progress-btn`),

stepsBar: document.querySelector('.multisteps-form__progress'),

stepsForm: document.querySelector('.multisteps-form__form'),

stepsFormTextareas: document.querySelectorAll('.multisteps-form__textarea'),

stepFormPanelClass: 'multisteps-form__panel',

stepFormPanels: document.querySelectorAll('.multisteps-form__panel'),

stepPrevBtnClass: 'js-btn-prev',

stepNextBtnClass: 'js-btn-next' };

const removeClasses = (elemSet, className) => {

elemSet.forEach(elem => {

elem.classList.remove(className);

});

};

const findParent = (elem, parentClass) => {

let currentNode = elem;

while (!currentNode.classList.contains(parentClass)) {

currentNode = currentNode.parentNode;

}

return currentNode;

};

const getActiveStep = elem => {

return Array.from(DOMstrings.stepsBtns).indexOf(elem);

};

const setActiveStep = activeStepNum => {

removeClasses(DOMstrings.stepsBtns, 'js-active');

DOMstrings.stepsBtns.forEach((elem, index) => {

if (index <= activeStepNum) {

elem.classList.add('js-active');

}

});

};

const getActivePanel = () => {

let activePanel;

DOMstrings.stepFormPanels.forEach(elem => {

if (elem.classList.contains('js-active')) {

activePanel = elem;

}

});

return activePanel;

};

const setActivePanel = activePanelNum => {

removeClasses(DOMstrings.stepFormPanels, 'js-active');

DOMstrings.stepFormPanels.forEach((elem, index) => {

if (index === activePanelNum) {

elem.classList.add('js-active');

setFormHeight(elem);

}

});

};

const formHeight = activePanel => {

const activePanelHeight = activePanel.offsetHeight;

DOMstrings.stepsForm.style.height = `${activePanelHeight}px`;

};

const setFormHeight = () => {

const activePanel = getActivePanel();

formHeight(activePanel);

};

DOMstrings.stepsBar.addEventListener('click', e => {

const eventTarget = e.target;

if (!eventTarget.classList.contains(`${DOMstrings.stepsBtnClass}`)) {

return;

}

const activeStep = getActiveStep(eventTarget);

setActiveStep(activeStep);

setActivePanel(activeStep);

});

DOMstrings.stepsForm.addEventListener('click', e => {

const eventTarget = e.target;

if (!(eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`) || eventTarget.classList.contains(`${DOMstrings.stepNextBtnClass}`)))

{

return;

}

const activePanel = findParent(eventTarget, `${DOMstrings.stepFormPanelClass}`);

let activePanelNum = Array.from(DOMstrings.stepFormPanels).indexOf(activePanel);

if (eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`)) {

activePanelNum--;

} else {

activePanelNum++;

}

setActiveStep(activePanelNum);

setActivePanel(activePanelNum);

});

window.addEventListener('load', setFormHeight, false);

window.addEventListener('resize', setFormHeight, false);

const setAnimationType = newType => {

DOMstrings.stepFormPanels.forEach(elem => {

elem.dataset.animation = newType;

});

};

//changing animation

const animationSelect = document.querySelector('.pick-animation__select');

animationSelect.addEventListener('change', () => {

const newAnimationType = animationSelect.value;

setAnimationType(newAnimationType);

});

That’s It. Now you have successfully created Bootstrap Multi-Step Form Animations With CSS, Switch Form’s Animation Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

Vivek singh Chandel September 24, 2019 At 8:35 am

Great

Reply
walid April 26, 2020 At 9:09 pm

how to make validation

Reply
- shaan April 27, 2020 At 3:25 pm
  
  check other validation program on this blog.
  
  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

Preview Of Responsive Step By Step Form’s Animation Switch

Bootstrap Multi Step Form Animations With CSS Source Code

3 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY