What Is Multi Step Form?
Multi step Form is a long form broken into multi steps. It is not a multi forms rather than multi steps in a single long form. The reason behind it, short form is more easy to complete than long form. It is more comfortable for users to fill the form step by step because their mind should process fewer fields at a time.
Now a days multi step form is more popular than regular form , as it is more user friendly rather than regular form. The multi step form is the best solution when there are too many fields in a from. So breaking large form into multiple step is more user friendly.
It is used to make long form, such as checkout page , registration form etc.,less intimidating and daunting.
Why Use Multi step Form?
| 1. | It is more comfortable than regular form. |
| 2. | It is easy to fill short form than long form. |
| 3. | It can increase engagement. |
| 4. | It reduce psychological friction. |
So in this post, we will learn how to implement multi step form in vueJs. If you want to learn multi step form in Jquery read this below post.
Multi Step Form with Progress Bar Using jQuery.
Below are the steps to implement multi step form in vuejs.
Step 1 : Add Html Code
.
<html lang="en">
<head>
<title>Multistep Form In VueJs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h3 class="text-success" align="center">Multistep Form In VueJs</h3>
<br>
<div class="container" id="app">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Multistep Form In VueJs</div>
<form class="form-horizontal" action="/action_page.php">
<fieldset v-if="step == 1">
<div class="panel-body">
<h4>Step 1: Create your account</h4>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" v-model="email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-5">
<input type="password" class="form-control" class="btn btn-info" v-model="pwd" name="pwd">
</div>
</div>
<button @click.prevent="next()" class="btn btn-primary">Next</button>
</div>
</fieldset>
<fieldset v-if="step == 2">
<div class="panel-body">
<h4>Step 2: Personal Details</h4>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="fname">First Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="fname" name="fname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lname">Last Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="lname" name="lname">
</div>
</div>
<button @click.prevent="prev()" class="btn btn-info">Previous</button>
<button @click.prevent="next()" class="btn btn-primary">Next</button>
</div>
</fieldset>
<fieldset v-if="step == 3">
<div class="panel-body">
<h4>Step 3: Contact Details</h4>
<br>
<div class="form-group">
<label class="control-label col-sm-2" for="mobno">Mobile Number:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="mobno" name="mobno">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address:</label>
<div class="col-sm-5">
<textarea class="form-control" name="address" v-model="address"></textarea>
</div>
</div>
<button @click.prevent="prev()" class="btn btn-info">Previous</button>
<button @click.prevent="submit()" class="btn btn-success">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Step 2 : Add VueJs Code
.
<script >
var app = new Vue({
el: '#app',
data: {
step:1,
email:'',
pwd:'',
fname:'',
lname:'',
mobno:'',
address:'',
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
submit() {
alert('Form Is Submitted.');
}
}
})
</script>
Please give your valuable feedback/comments about this article below. Please let me know how you like and understand this article and how I could improve it.