BMIC - Claim Form UI

Developer
Tom Markart
Size
8,073 Kb
Views
12,144
  1. BMIC - Claim Form UI Previews
  2. BMIC - Claim Form UI HTML Codes
  3. BMIC - Claim Form UI CSS Codes
  4. BMIC - Claim Form UI JS Codes

How do I make an bmic - claim form ui?

What is a bmic - claim form ui? How do you make a bmic - claim form ui? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

BMIC - Claim Form UI Previews
IQ Test

BMIC - Claim Form UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BMIC - Claim Form UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://www.buildersmutual.com/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cloud.typenetwork.com/projects/617/fontface.css/'>
<link rel='stylesheet prefetch' href='https://www.buildersmutual.com/css/bmico6.css'>
<link rel='stylesheet prefetch' href='https://www.buildersmutual.com/fonts/font-awesome/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://www.buildersmutual.com/css/jquery.fancybox.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="mainHeader"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="javascript:void(0);"><img class="text-logo" src="http://www.buildersmutual.com/img/bmico-text-logo.png" /></a><button aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar-collapse-container" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div class="collapse navbar-collapse" id="navbar-collapse-container"> <ul class="nav navbar-nav leftNav"> <li> <a href="javascript:void(0);">About<span class="hidden-sm"> Us</span></a> </li> <li> <a href="javascript:void(0);"><span class="hidden-sm">For </span>Agents</a> </li> <li> <a href="javascript:void(0);"><span class="hidden-sm">For </span>Policyholders</a> </li> <li> <a href="javascript:void(0);">Claims<span class="hidden-sm"> Center</span></a> </li> </ul> <ul class="nav navbar-nav rightNav"> <li> <a href="javascript:void(0);">Careers</a> </li> <li> <a href="javascript:void(0);">Contact</a> </li> <li> <a href="javascript:void(0);">Español</a> </li> <li> <a href="javascript:void(0);"><i class="fa fa-lock"></i>Login</a> </li> </ul> </div> </div> </nav> <div class="container"> <header class="intHeader login"> <div class="logo"> <a href="javascript:void(0);"><img alt="Builders Mutual Insurance Company" class="img-responsive center-block" src="http://www.buildersmutual.com/img/bmico-main-logo.jpg" /></a> </div> <div class="sitesection"> <h2> Claims Center </h2> </div> </header> </div>
</section>
<section class="mainBody"> <div class="container"> <div class="col-xs-12"> <form action="javascript:myFunction(); return false;" id="wcclaim01" method="post" novalidate="novalidate"> <div class="form-group"> <fieldset class="well well-lg"> <h1> Worker's Compensation Claim </h1> <p> Please complete the form below. All fields are required. </p> <div class="progress"> <div class="one danger-color"></div> <div class="two no-color"></div> <div class="three no-color"></div> <div class="progress-bar progress-bar-danger" style="width:25%"></div> </div> <h2> <strong>Step 1: </strong>Injured Worker's Information </h2> <div class="input-group"> <label for="name">Injured Worker's Name</label><input aria-required="true" class="form-control required" id="name" name="name" size="40" type="text" /> </div> <div class="input-group"> <label for="dob">Date of Birth</label><input aria-required="true" class="form-control required" id="dob" name="dob" type="date" /> </div> <div class="input-group"> <label for="ssn">Last 4 Digits of Social Security Number</label><input aria-required="true" class="form-control required width-06" id="ssn" maxlength="4" name="ssn" type="number" /> </div> <div class="input-group"> <label for="gender">Gender</label><select class="form-control required" id="gender" name="gender"> <option value=""></option> <option value="M"> Male </option> <option value="F"> Female </option> </select> </div> <div class="input-group"> <label for="address">Address</label><input aria-required="true" class="form-control required" id="address" name="address" size="40" type="text" /> </div> <div class="input-group"> <label for="city">City</label><input aria-required="true" class="form-control required" id="city" name="city" size="40" type="text" /> </div> <div class="input-group"> <label for="state">State</label><select aria-required="true" class="form-control required" id="state" name="state"> <option value=""></option> <option value="DC"> District Of Columbia </option> <option value="FL"> Florida </option> <option value="MD"> Maryland </option> <option value="NC"> North Carolina </option> <option value="SC"> South Carolina </option> <option value="TN"> Tennessee </option> </select> </div> <div class="input-group"> <label for="zip">Zip Code</label><input aria-required="true" class="form-control required width-06" id="zip" maxlength="5" name="zip" type="number" /> </div> <div class="input-group"> <label for="phone">Phone Number</label><input aria-required="true" class="form-control required" id="phone" maxlength="12" name="phone" size="12" type="tel" /> </div> <div class="input-group"> <label for="email">Email Address</label><input aria-required="true" class="form-control required" id="email" name="email" size="40" type="email" /> </div> <div class="input-group"> <button class="btn btn-primary next">Next <i class="fa fa-chevron-right"></i></button> </div> </fieldset> </div> </form> <form action="javascript:myFunction(); return false;" id="wcclaim02" method="post" novalidate="novalidate"> <div class="form-group"> <fieldset class="well well-lg"> <h1> Worker's Compensation Claim </h1> <p> Please complete the form below. </p> <div class="progress"> <div class="one danger-color"></div> <div class="two danger-color"></div> <div class="three no-color"></div> <div class="progress-bar progress-bar-danger" style="width:51%"></div> </div> <h2> <strong>Step 2: </strong>Injured Worker Employment </h2> <div class="input-group"> <label for="hiredate">Date of Hire</label><input aria-required="true" class="form-control required" id="hiredate" name="hiredate" size="40" type="date" /> </div> <div class="input-group"> <label for="occupation">Occupation/Title</label><input aria-required="true" class="form-control required" id="occupation" name="occupation" size="40" type="text" /> </div> <div class="input-group"> <label for="dpw">Days Worked Per Week</label><select class="form-control required" id="dpw" name="dpw"> <option value=""></option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04"> 04 </option> <option value="05"> 05 </option> <option value="06"> 06 </option> <option value="07"> 07 </option> </select> </div> <div class="input-group"> <label for="hourly">Hourly Wage</label><input aria-required="true" class="form-control required" id="hourly" name="hourly" size="10" type="text" /> </div> <div class="input-group"> <label for="weekly">Weekly Wage</label><input aria-required="true" class="form-control required" id="weekly" name="weekly" size="10" type="text" /> </div> <div class="input-group"> <label for="hpd">Hours Worked Per Day (Average)</label><input aria-required="true" class="form-control required" id="hpd" name="hpd" size="5" type="number" /> </div> <div class="input-group"> <label for="supervisor">Supervisor's Name</label><input aria-required="true" class="form-control required" id="supervisor" name="supervisor" size="40" type="text" /> </div> <div class="input-group"> <label for="supphone">Supervisor's Phone Number</label><input aria-required="true" class="form-control required" id="supphone" maxlength="12" name="supphone" size="12" type="tel" /> </div> <div class="input-group"> <label for="supemail">Supervisor's Email Address</label><input aria-required="true" class="form-control required" id="supemail" name="supemail" size="40" type="email" /> </div> <div class="input-group"> <button class="btn btn-default prev"><i class="fa fa-chevron-left"></i> Previous</button><button class="btn btn-primary next">Next <i class="fa fa-chevron-right"></i></button> </div> </fieldset> </div> </form> <form action="javascript:myFunction(); return false;" id="wcclaim03" method="post" novalidate="novalidate"> <div class="form-group well well-lg"> <fieldset> <h1> Worker's Compensation Claim </h1> <p> Please complete the form below. </p> <div class="progress"> <div class="one danger-color"></div> <div class="two danger-color"></div> <div class="three danger-color"></div> <div class="progress-bar progress-bar-danger" style="width:77%"></div> </div> <h2> <strong>Step 3: </strong>Incident Details </h2> <div class="input-group"> <label for="incidentdate">Date of Incident</label><input aria-required="true" class="form-control required" id="incidentdate" name="incidentdate" size="40" type="date" /> </div> <div class="input-group"> <label for="incidenttime">Time of Incident</label><input aria-required="true" class="form-control required" id="incidenttime" name="incidenttime" size="10" type="text" /> </div> <div class="input-group"> <label for="corep">Company Representative That Was Notified</label><input aria-required="true" class="form-control required" id="corep" name="corep" size="40" type="text" /> </div> <div class="input-group"> <label for="datereport">Date Incident Reported to Company</label><input aria-required="true" class="form-control required" id="datereport" name="datereport" size="40" type="date" /> </div> <div class="input-group"> <label for="timereport">Time Incident Reported to Company</label><input aria-required="true" class="form-control required" id="timereport" name="timereport" size="10" type="text" /> </div> <div class="input-group"> <label for="incidentlocation">Job Site Location Where Incident Occured</label><input aria-required="true" class="form-control required" id="incidentlocation" name="incidentlocation" size="40" type="text" /> </div> <div class="input-group"> <label for="incidentdesc">Description of How Incident Occurred</label><textarea aria-required="true" class="form-control required" id="incidentdesc" name="incidentdesc" rows="7"></textarea> </div> <div class="input-group"> <label for="bodyinjury">Body Parts Injured</label><input aria-required="true" class="form-control required" id="bodyinjury" name="bodyinjury" size="40" type="text" /> </div> <div class="input-group"> <label for="fatal">Was the Injury Fatal?</label><select class="form-control required" id="fatal" name="fatal"> <option value=""></option> <option value="Y"> Yes </option> <option value="N"> No </option> </select> </div> <div class="input-group" id="dod"> <label for="deathdate">Date of Death</label><input aria-required="true" class="form-control required" id="deathdate" name="deathdate" size="40" type="date" /> </div> <div class="input-group"> <button class="btn btn-default prev"><i class="fa fa-chevron-left"></i> Previous</button><button class="btn btn-primary next">Submit Claim</button> </div> </fieldset> </div> </form> <div class="well well-lg" id="wcclaim04"> <div class="form-group"> <fieldset> <h1> Worker's Compensation Claim </h1> <h2> Your claim has been submitted. </h2> <p> <strong>Submitted:</strong>03/27/2017 </p> <p> <strong>Confirmation number:</strong> WC20T0128-A </p> <button class="btn btn-primary" id="print-page" onclick="printPage()">Print this page</button> </fieldset> </div> </div> </div> </div>
</section>
<section class="mainFooter"> <div class="container"> <p> footer </p> </div>
</section> <script src='https://www.buildersmutual.com/js/jquery-3.1.1.min.js'></script>
<script src='https://www.buildersmutual.com/js/bootstrap.min.js'></script>
<script src='https://www.buildersmutual.com/js/jquery.easing.min.js'></script>
<script src='https://www.buildersmutual.com/js/jquery.waypoints.min.js'></script>
<script src='https://www.buildersmutual.com/js/jquery.fancybox.js'></script>
<script src='https://www.buildersmutual.com/js/bmico.js'></script>
<script src='https://www.buildersmutual.com/js/jquery.validate.js'></script> <script src="js/index.js"></script>
</body>
</html>

BMIC - Claim Form UI - Script Codes CSS Codes

/* ----- Form ----- */
fieldset h1 { font-size: 28px;
}
fieldset h2 { font-size: 20px; margin-bottom: 40px;
}
.progress { background-color: #dfdfdf; margin: 40px 0; height: 10px;
}
.progress .one,
.progress .two,
.progress .three,
.progress .four { border-radius: 25px; height: 20px; position: absolute; margin-top: -5px; width: 20px; z-index: 1;
}
.progress .one { left: 25%;
}
.progress .two { left: 50%;
}
.progress .three { left: 75%;
}
.progress .no-color { background-color: inherit;
}
.progress .progress-bar-danger,
.progress .danger-color { background-color: #d1272e;
}
.input-group { margin-bottom: 20px;
}
.input-group label { clear: both; display: block; font-family: 'Interstate Lt', Arial, Helvetica, sans-serif;
}
.input-group label.error { color: #d1272e; padding-top: 5px;
}
.input-group .width-06 { width: 6em;
}
.input-group .width-10 { width: 10em;
}
.input-group button { margin: 45px 20px 0 0;
}
.input-group button .fa { color: #666; font-size: 12px;
}
.input-group button.btn-primary .fa { color: #fff;
}
.input-group textarea#incidentdesc { min-width: 320px;
}
/* ----- Breakpoints ----- */
@media screen and (min-width: 768px) { fieldset h1 { font-size: 40px; } fieldset h2 { font-size: 26px; margin-bottom: 40px; } .input-group textarea#incidentdesc { min-width: 520px; }
}
/* ----- Print ----- */
@media print { .well-lg { padding: 0; border-radius: 0; } .well { background-color: none; box-shadow: none; border-width: none; border-style: none; border-color: none; border-image: none; border-radius: 0; } #print-page, .mainFooter { display: none; }
}

BMIC - Claim Form UI - Script Codes JS Codes

$(document).ready(function() { // Form validation has been intentionally commented out // in order to allow users to page through this mockup // without having to fill out each field. //$("#wcclaim01").validate(); //$("#wcclaim02").validate(); //$("#wcclaim03").validate();	// ----- Faking the steps through the form ----- $("#wcclaim02").hide(); $("#wcclaim03").hide(); $("#wcclaim04").hide(); $("#wcclaim01 button.next").click(function(){ //alert("next"); $("#wcclaim01").hide(); $("#wcclaim02").show(); $("html, body").animate({ scrollTop: 200 }, "slow"); return false; }); $("#wcclaim02 button.next").click(function(){ //alert("next"); $("#wcclaim01").hide(); $("#wcclaim02").hide(); $("#wcclaim03").show(); $("html, body").animate({ scrollTop: 200 }, "slow"); return false; }); $("#wcclaim02 button.prev").click(function(){ //alert("prev"); $("#wcclaim02").hide(); $("#wcclaim01").show(); $("html, body").animate({ scrollTop: 200 }, "slow"); return false; }); $("#wcclaim03 button.next").click(function(){ //alert("next"); $("#wcclaim03").hide(); $("#wcclaim04").show(); $("html, body").animate({ scrollTop: 200 }, "slow"); return false; }); $("#wcclaim03 button.prev").click(function(){ //alert("prev"); $("#wcclaim03").hide(); $("#wcclaim02").show(); $("html, body").animate({ scrollTop: 200 }, "slow"); return false; }); // ----- Conditional Date of Death ----- $("#dod").hide(); $('#fatal').change(function(){ if($(this).val() == 'Y'){ $("#dod").show(); } });
});
// ----- Print function -----
function printPage() { window.print();
}
BMIC - Claim Form UI - Script Codes
BMIC - Claim Form UI - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 8,073 Kb
Views 12,144
Do you need developer help for BMIC - Claim Form UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
Story Detail - expand secondary asset inline
Election Widget Vertical
Skewed Header - svg
Story Detail 1.0b
Responsive nav
Vertical Image Filler
Google Places API Parsing
Election Widget
MPP Contact Us
Story Detail 1.0 - related content - asset types - aspect ratio
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!