Skip to content

Instantly share code, notes, and snippets.

@nkhandwe

nkhandwe/index.html

Created February 3, 2023 09:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nkhandwe/9bfd25cf92d4e7d124cf0cff6b9b1904 to your computer and use it in GitHub Desktop.
Save nkhandwe/9bfd25cf92d4e7d124cf0cff6b9b1904 to your computer and use it in GitHub Desktop.
Download ZIP
Insurance Application - Multi-Step Form
Raw
index.html
<div id="app">
<div class="container">
<br>
<div class="row">
<div class="col-md-10 offset-1">
<form novalidate>
<div class="page" v-show="step === 1">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<h4 class="mb-3">Personal Information</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" placeholder="First Name" name="name_first" required v-on:change="page_one.name_first = $event.target.value">
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" placeholder="Last Name" name="name_last" required v-on:change="page_one.name_last = $event.target.value">
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Email" name="email" required v-on:change="page_one.email = $event.target.value">
<div class="invalid-feedback">
Valid Email is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" placeholder="Phone" name="phone" v-on:change="page_one.phone = $event.target.value">
</div>
</div>
<div class="btn_container ">
<button @click.prevent="next()" class="btn btn-md text-white next">Next</button>
</div>
</div>
<div class="page" v-show="step === 2">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<h4 class="mb-3">Dwelling Information</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="address_street">Street Address</label>
<input type="text" class="form-control" id="address_street" placeholder="Street Address" name="address_street" required v-on:change="page_two.address_street = $event.target.value">
<div class="invalid-feedback">
Valid Mexican Street Address is required.
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="City" name="address_city" required v-on:change="page_two.address_city = $event.target.value">
<div class="invalid-feedback">
Valid Mexican City is required.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="state" placeholder="State" required v-on:change="page_two.address_state = $event.target.value">
<div class="invalid-feedback">
Valid Mexican State is required.
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="zip">Zip Code</label>
<input type="text" class="form-control" id="zip" placeholder="Zip Code" required v-on:change="page_two.address_postal = $event.target.value">
<div class="invalid-feedback">
Valid Mexican Zip Code is required.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="applicant_type">Applicant Type</label>
<select id="applicant_type" class="form-control" required v-on:change="page_two.applicant_type = $event.target.value">
<option>--Select--</option>
<option value="Owner">Owner</option>
<option value="Renter">Renter</option>
<option value="Landlord">Landlord</option>
</select>
<div class="invalid-feedback">
Valid Owner Type is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="property_type">Property Type</label>
<select id="property_type" class="form-control" required v-on:change="page_two.property_type = $event.target.value">
<option>--Select--</option>
<option value="Dwelling">Dwelling</option>
<option value="Condo">Condo</option>
</select>
<div class="invalid-feedback">
Valid Property Type is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="property_use">Property Use</label>
<select id="property_use" class="form-control" required v-on:change="page_two.property_use = $event.target.value">
<option>--Select--</option>
<option value="Primary Residence">Primary Residence</option>
<option value="Vacation Use">Vacation Use</option>
</select>
<div class="invalid-feedback">
Valid Property Use is required.
</div>
</div>
</div>
<div class="btn_container">
<button @click.prevent="prev()" class="btn btn-md text-white previous">Previous</button>
<button @click.prevent="next()" class="btn btn-md text-white float-right next">Next</button>
</div>
</div>
<!-- Steps -->
<div class="page" v-show="step === 3">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<h4 class="mb-3">General Underwriting</h4>
<div class="row">
<div class="col-md-4">
<label for="underground_floors">Underground Floors</label>
<select id="underground_floors" class="form-control" required v-on:change="page_three.underground_floors = $event.target.value">
<option>--Select--</option>
<option value="1 Underground Floor">1</option>
<option value="2 Underground Floors">2</option>
<option value="3 Underground Floors">3</option>
</select>
<div class="invalid-feedback">
Valid underground floors selection is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="roof_type">Roof Type</label>
<select id="roof_type" class="form-control" required v-on:change="page_three.roof_type = $event.target.value">
<option>--Select--</option>
<option value="Concrete">Concrete</option>
<option value="Wood">Wood</option>
</select>
<div class="invalid-feedback">
Valid Roof Type is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="wall_type">Wall Type</label>
<select id="wall_type" class="form-control" required v-on:change="page_three.wall_type = $event.target.value">
<option>--Select--</option>
<option value="Concrete">Concrete</option>
<option value="Wood">Wood</option>
</select>
<div class="invalid-feedback">
Valid Wall Type is required.
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="storm_shutters">Storm Shutters</label>
<select id="storm_shutters" class="form-control" required v-on:change="page_three.storm_shutters = $event.target.value">
<option>--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<div class="invalid-feedback">
Valid Wall Type is required.
</div>
</div>
<div class="col-md-4">
<label for="adjacent_structures">Adjacent Structures</label>
<select id="adjacent_structures" class="form-control" required v-on:change="page_three.adjacent_structures = $event.target.value">
<option>--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<div class="invalid-feedback">
Valid Wall Type is required.
</div>
</div>
<div class="col-md-4">
<label for="number_of_stories">Number of Stories</label>
<select id="number_of_stories" class="form-control" required v-on:change="page_three.number_of_stories = $event.target.value">
<option>--Select--</option>
<option value="1 Story">1</option>
<option value="2 Stories">2</option>
<option value="3 Stories">3</option>
</select>
<div class="invalid-feedback">
Number of Stories is required.
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="distance_from_coast">Distance from Coast Line</label>
<select id="distance_from_coast" class="form-control" required v-on:change="page_three.distance_from_coastline = $event.target.value">
<option>--Select--</option>
<option value="More than 500 Meters">More than 500 Meters</option>
<option value="Less than 500 Meters">Less than 500 Meters</option>
</select>
<div class="invalid-feedback">
Coast Line distance is required.
</div>
</div>
<div class="col-md-6">
<label for="distance_above_sea">Distance above Sea Level</label>
<input type="text" id="distance_above_sea" class="form-control" placeholder="Distance above sea - in Meters" required v-on:change="page_three.distance_above_sea = $event.target.value">
<div class="invalid-feedback">
Distance above Sea Level is required.
</div>
</div>
</div>
<div class="btn_container">
<button @click.prevent="prev()" class="btn btn-md text-white previous">Previous</button>
<button @click.prevent="next()" class="btn btn-md text-white float-right next">Next</button>
</div>
</div>
<div class="page" v-show="step === 4">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<h4 class="mb-3">Security</h4>
<div class="row">
<div class="col-md-6 mb-3">
<div class="from-group">
<input type="checkbox" value="Local Guards" v-model="securities"> Local Guards
<input type="checkbox" value="Central Alarm" v-model="securities"> Central Alarm
<input type="checkbox" value="Local Alarm" v-model="securities"> Local Alarm
<input type="checkbox" value="TV Circuit" v-model="securities"> TV Circuit
</div>
</div>
</div>
<button @click.prevent="prev()" class="btn btn-md text-white previous">Previous</button>
<button @click.prevent="next()" class="btn btn-md text-white float-right next">Next</button>
</div>
<div class="page" v-show="step === 5">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
<h4 class="mb-3">Dwelling Limits</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="dwelling_amount">Dwelling Amount</label>
<input type="text" class="form-control" id="dwelling_amount" placeholder="$450,000 USD" required v-on:change="page_five.dwelling_amount = $event.target.value">
<div class="invalid-feedback">
Valid Dwelling Amount is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="other_structures">Other Structures</label>
<input type="text" class="form-control" id="phone" placeholder="$50,000 USD" v-on:change="page_five.other_structures = $event.target.value">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="outdoor_property">Outdoor Property</label>
<input type="text" class="form-control" id="contents" placeholder="$50,000 USD" v-on:change="page_five.outdoor_property = $event.target.value">
</div>
<div class="col-md-6 mb-3">
<label for="contents">Contents</label>
<input type="text" class="form-control" id="contents" placeholder="$25,000 USD" v-on:change="page_five.contents = $event.target.value">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="loss_of_rents">Loss of Rents</label>
<select class="form-control" v-on:change="page_five.loss_of_rents = $event.target.value">
<option>--Select--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="col-md-9 mb-3">
<label for="liabilty">Liability</label>
<input type="text" class="form-control" id="liability" placeholder="$300,000 USD" v-on:change="page_five.liability = $event.target.value">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="valuable_items">Valuable Items</label>
<input type="text" class="form-control" id="valuable_items" placeholder="$10,000 USD" v-on:change="page_five.valuable_items = $event.target.value">
</div>
<div class="col-md-6">
<label for="money">Money &amp; Securities</label>
<input type="text" class="form-control" id="money" placeholder="$15,000 USD" v-on:change="page_five.money_securities = $event.target.value">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="glass">Glass Breakage</label>
<input type="text" class="form-control" id="glass" placeholder="$5,000 USD" v-on:change="page_five.glass_breakage = $event.target.value">
</div>
<div class="col-md-6">
<label for="electronics">Electronics</label>
<input type="text" class="form-control" id="electronics" placeholder="$8,000 USD" v-on:change="page_five.electronics = $event.target.value">
</div>
<button @click.prevent="prev()" class="btn btn-md text-white previous">Previous</button>
<button @click.prevent="next()" class="btn btn-md text-white next">Review</button>
</div>
</div>
<div class="page review_page" v-show="step === 6">
<h3 class="text-center">Quotation Review</h3>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Personal Information
</div>
<div class="card-body">
<p class="card-text"><strong>Full Name:</strong> {{ page_one.name_first }} {{ page_one.name_last }}</p>
<p class="card-text"><strong>Email:</strong> {{ page_one.email }} </p>
<p class="card-text"><strong>Phone:</strong> {{ page_one.phone }}</p>
<button type="button" class="btn btn-md btn-warning text-white float-right" v-on:click="direct(1)">Edit</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Dwelling Information
</div>
<div class="card-body">
<p class="card-text"><strong>Address:</strong> {{ page_two.address_street }} {{page_two.address_city }}, {{page_two.address_state }} {{page_two.address_postal }}</p>
<p class="card-text"><strong>Applicant Type:</strong> {{ page_two.applicant_type }}</p>
<p class="card-text"><strong>Property Use:</strong> {{ page_two.property_use }}</p>
<p class="card-text"><strong>Property Type:</strong> {{ page_two.property_type }}</p>
<button type="button" class="btn btn-md btn-warning text-white float-right" v-on:click="direct(2)">Edit</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
General Underwriting
</div>
<div class="card-body">
<p class="card-text"><strong>Underground Floors:</strong> {{ page_three.underground_floors }}</p>
<p class="card-text"><strong>Roof Type:</strong> {{ page_three.roof_type }}</p>
<p class="card-text"><strong>Wall type:</strong> {{ page_three.wall_type }}</p>
<p class="card-text"><strong>Storm Shutters :</strong> {{ page_three.storm_shutters }}</p>
<p class="card-text"><strong>Adjacent Structures :</strong> {{ page_three.adjacent_structures }}</p>
<p class="card-text"><strong>Number of Stories:</strong> {{ page_three.number_of_stories }}</p>
<p class="card-text"><strong>Distance from Coastline :</strong> {{ page_three.distance_from_coastline }}</p>
<p class="card-text"><strong>Distance above sea level :</strong> {{ page_three.distance_above_sea }}</p>
<button type="button" class="btn btn-md btn-warning text-white float-right" v-on:click="direct(3)">Edit</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Security
</div>
<div class="card-body">
<p class="card-text"><strong>Securities:</strong> {{ securities }}</p>
<button type="button" class="btn btn-md btn-warning text-white float-right" v-on:click="direct(4)">Edit</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Dwelling Limits
</div>
<div class="card-body">
<p class="card-text"><strong>Dwelling Amount:</strong> {{ page_five.dwelling_amount }}</p>
<p class="card-text"><strong>Other Structures:</strong> {{ page_five.other_structures }}</p>
<p class="card-text"><strong>Outdoor Property:</strong> {{ page_five.outdoor_property }}</p>
<p class="card-text"><strong>Contents:</strong> {{ page_five.contents }}</p>
<p class="card-text"><strong>Loss of Rents:</strong> {{ page_five.loss_of_rents }}</p>
<p class="card-text"><strong>Liability:</strong> {{ page_five.liability }}</p>
<p class="card-text"><strong>Valuable Items:</strong> {{ page_five.valuable_items }}</p>
<p class="card-text"><strong>Money &amp; Securities:</strong> {{ page_five.money_securities }}</p>
<p class="card-text"><strong>Glass Breakage:</strong> {{ page_five.glass_breakage }}</p>
<p class="card-text"><strong>Electronics:</strong> {{ page_five.electronics }}</p>
<button type="button" class="btn btn-md btn-warning text-white float-right" v-on:click="direct(5)">Edit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Raw
script.js
const app = new Vue({
el:'#app',
data() {
return {
step:1,
page_one: {
name_first: '',
name_last: '',
email:null,
phone:null
},
page_two: {
address_street: null,
address_city: null,
address_state: null,
address_postal: null,
applicant_type: null,
property_use: null,
property_type: null,
},
page_three: {
roof_type: null,
wall_type: null,
underground_floors: null,
storm_shutters: null,
adjacent_structures: null,
number_of_stories: null,
distance_from_coastline: null, // More or less than 500 meters
distance_above_sea: null
},
page_four: {
security: {
guards: null,
central_alarm: null,
local_alarm: null,
tv_circuit: null
}
},
page_five: {
dwelling_amount: null,
other_structures: null,
outdoor_property: null,
contents: null,
loss_of_rents: null,
liability: null,
valuable_items: null,
money_securities: null,
glass_breakage: null,
electronics: null
},
securities: []
}
},
methods:{
prev() {
this.step--;
},
next() {
this.step++;
},
direct(s) {
this.step = s;
},
submit() {
alert('Submit to blah and show blah and etc.');
}
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
Raw
style.css
form {
background-color: #fff;
padding: 1.5rem;
}
form .page {
height: 32.5rem;
}
button.next {
position: absolute;
bottom: 0;
right: 0;
margin-right: 1.5rem;
margin-bottom: 1rem;
}
button.previous {
position: absolute;
bottom: 0;
left: 0;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
button.edit {
position: absolute;
bottom: 0;
right: 0;
}
.next {
background-color: #8CA535
}
.previous {
background-color: #980000;
}
.progress-bar {
background-color: #8CA535;
}
h4 {
color: #980000;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
@nkhandwe
Copy link
Author

nkhandwe commented Feb 3, 2023

html form multi step

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment