<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MLB Insurance Full Smart Submission</title>
<style>
body { font-family: Arial, sans-serif; max-width: 900px; margin: auto; padding: 20px; }
h2 { color: #0074c4; }
.section { margin-bottom: 30px; }
.hidden { display: none; }
label { display: block; margin: 10px 0 5px; }
input, select, textarea { width: 100%; padding: 8px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>MLB Insurance Full Smart Submission Form</h1>
<form id="insuranceForm">
<!-- SECTION 1: Coverage Selection -->
<div class="section">
<h2>1. What coverage do you want quoted?</h2>
<label><input type="checkbox" name="coverages" value="auto" onchange="toggleSections()"> Commercial Auto</label>
<label><input type="checkbox" name="coverages" value="gl" onchange="toggleSections()"> General Liability</label>
<label><input type="checkbox" name="coverages" value="wc" onchange="toggleSections()"> Workers' Compensation</label>
</div>
<!-- SECTION 2: Business Info -->
<div class="section">
<h2>2. Business Details</h2>
<label>Legal Business Name:</label><input name="business_name">
<label>DBA:</label><input name="dba">
<label>Business Structure:</label>
<select name="entity">
<option value="">Select</option>
<option>Individual</option><option>Partnership</option><option>Corporation</option><option>LLC</option>
</select>
<label>Federal EIN:</label><input name="ein">
<label>Year Business Established:</label><input name="year_est">
<label>Business Phone:</label><input name="phone">
<label>Business Email:</label><input name="email">
<label>Website:</label><input name="website">
<label>Physical Address:</label><input name="phys_address">
<label>Mailing Address (if different):</label><input name="mail_address">
<label>List All Owners (Name, Title, % Ownership, Phone, Email):</label>
<textarea name="owners"></textarea>
</div>
<!-- SECTION 3: Commercial Auto -->
<div id="autoSection" class="section hidden">
<h2>3. Commercial Auto Details</h2>
<label>Do you operate school buses?</label>
<select name="bus_operation"><option value="">Select</option><option>Yes</option><option>No</option></select>
<label>Bus Use Type:</label>
<select name="bus_use">
<option>Contracted School</option>
<option>Charter</option>
<option>Private Hire</option>
</select>
<label>Months of Operation:</label>
<select name="operation_months"><option>9</option><option>12</option><option>Other</option></select>
<label>Hiring Procedures:</label><textarea name="hiring"></textarea>
<label>Driver Training Program:</label><textarea name="training"></textarea>
<label>Disciplinary Actions for Accidents:</label><textarea name="discipline"></textarea>
<label>Symbol 1 Coverage Desired?</label>
<select name="symbol1"><option>Yes</option><option>No</option></select>
<label>Are all vehicles titled to the business?</label>
<select name="titled_business"><option>Yes</option><option>No</option></select>
<label>Total Power Units:</label><input id="powerUnits" name="power_units" type="number" onchange="checkDownloads()">
<label>Total Drivers:</label><input id="driverCount" name="drivers" type="number" onchange="checkDownloads()">
<label>How many vehicles do you need to list?</label><input id="vehicleCount" type="number" min="1" max="50" onchange="generateVehicleFields()">
<label>Run MVRs How Often?</label><input name="mvr_freq">
<div id="vehicleFields"></div>
</div>
<!-- SECTION 4: General Liability -->
<div id="glSection" class="section hidden">
<h2>4. General Liability</h2>
<label>Business Operations Description:</label><textarea name="gl_ops"></textarea>
<label>Operate Off-Site / Transport Customers?</label>
<select name="gl_transport"><option>Yes</option><option>No</option></select>
<label>Annual Gross Receipts:</label><input name="gl_revenue" type="number">
<label>Estimated Payroll (if known):</label><textarea name="gl_payroll"></textarea>
<label>Use Subcontractors?</label>
<select name="gl_subs"><option>Yes</option><option>No</option></select>
<label>Need Coverage For:</label>
<label><input type="checkbox" name="gl_exposures" value="abuse"> Abuse & Molestation</label>
<label><input type="checkbox" name="gl_exposures" value="athletic"> Athletic Participants</label>
<label><input type="checkbox" name="gl_exposures" value="other"> Other</label>
<label>If Other, explain:</label><textarea name="gl_other_expl"></textarea>
</div>
<!-- SECTION 5: Workers' Comp -->
<div id="wcSection" class="section hidden">
<h2>5. Workers' Compensation</h2>
<label>Number of Employees:</label><input name="wc_employees" type="number">
<label>Total Annual Payroll:</label><input name="wc_payroll" type="number">
<label>Are any owners excluded?</label>
<select name="wc_owners_excl"><option>Yes</option><option>No</option></select>
<label>Are drivers covered under WC?</label>
<select name="wc_drivers"><option>Yes</option><option>No</option></select>
<label>Subject to DOT/Safety Audits?</label>
<select name="wc_dot"><option>Yes</option><option>No</option></select>
<label>Claims in last 3 years?</label>
<select name="wc_claims"><option>Yes</option><option>No</option></select>
<label>Loss Runs Upload Link:</label><p><em>Upload loss runs via our secure folder: <a href="#">[Box Upload Link Placeholder]</a></em></p>
</div>
<!-- SECTION 6: Contact & Downloads -->
<div class="section">
<h2>6. Contact & Supporting Docs</h2>
<label>Best Contact Person:</label><input name="contact_name">
<label>Contact Email:</label><input type="email" name="contact_email">
<label>Contact Phone:</label><input name="contact_phone">
<label>Preferred Contact Method:</label><select name="contact_method"><option>Email</option><option>Phone</option></select>
<label>Preferred Contact Time:</label><input name="contact_time">
<div id="downloads" class="hidden">
<h3>📥 Download Templates</h3>
<ul>
<li><a href="#" download>Download Blank Driver List Spreadsheet</a></li>
<li><a href="#" download>Download Blank Vehicle List Spreadsheet</a></li>
<li><a href="#" download>Download Summary Submission Spreadsheet</a></li>
</ul>
</div>
</div>
<button type="submit">Submit</button>
</form>
<script>
function toggleSections() {
const auto = document.querySelector('input[value="auto"]').checked;
const gl = document.querySelector('input[value="gl"]').checked;
const wc = document.querySelector('input[value="wc"]').checked;
document.getElementById('autoSection').classList.toggle('hidden', !auto);
document.getElementById('glSection').classList.toggle('hidden', !gl);
document.getElementById('wcSection').classList.toggle('hidden', !wc);
}
function checkDownloads() {
const powerUnits = parseInt(document.getElementById('powerUnits').value || 0);
const drivers = parseInt(document.getElementById('driverCount').value || 0);
const shouldShow = powerUnits > 0 || drivers > 0;
document.getElementById('downloads').classList.toggle('hidden', !shouldShow);
}
function generateVehicleFields() {
const count = parseInt(document.getElementById('vehicleCount').value || 0);
const container = document.getElementById('vehicleFields');
container.innerHTML = '';
for (let i = 1; i <= count; i++) {
const div = document.createElement('div');
div.innerHTML = `<h4>Vehicle ${i}</h4>
<label>Year / Make / Model:</label><input name="vehicle_${i}_make">
<label>VIN:</label><input name="vehicle_${i}_vin">
<label>Cost New (min $50,000):</label><input name="vehicle_${i}_cost" type="number">
<label>Passenger Capacity:</label>
<select name="vehicle_${i}_seating">
<option>0-30</option><option>31-60</option><option>60+</option>
</select>`;
container.appendChild(div);
}
}
</script>
</body>
</html>