File: /home/healthvaluequotes/public_html/form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Health Value Quotes</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<style>
/* Styling the cards to match the uploaded design */
#difference .card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Soft, deep shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#difference .transition-hover:hover {
transform: translateY(-10px); /* Lifts the card on hover */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}
/* Adjusting the button to match the square orange style in the image */
#difference .btn-primary {
background-color: #f2ab2a;
border-color: #f2ab2a;
font-weight: bold;
text-transform: none;
letter-spacing: 0.5px;
}
</style>
</head>
<body id="page-top">
<!-- Navigation-->
<div class="top-info-bar py-2" style="background-color: #202D51; position: relative; z-index: 1040;">
<div class="container px-4 px-lg-5 d-flex justify-content-between align-items-center text-white" style="font-size: 0.85rem;">
<div class="d-flex align-items-center">
<i class="bi-envelope me-2"></i>
<a href="mailto:[email protected]" class="text-white text-decoration-none">[email protected]</a>
</div>
<div class="d-flex align-items-center">
<span class="me-4 d-none d-md-inline">
<i class="bi-clock me-1"></i> Mon - Fri 12:00am - 12:00pm
</span>
<a href="#contact" class="text-white text-decoration-none fw-bold">
<i class="bi-calendar-check me-1"></i> Appointment
</a>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3 shadow-sm" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">
<img src="assets/logo.svg" alt="Logo" height="60">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link text-dark" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#portfolio">Financing</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#contact">Request Service</a></li>
<li class="nav-item"><a class="nav-link text-dark" href="#contact">Maintenance</a></li>
</ul>
<div class="d-flex">
<a class="btn btn-primary rounded-pill px-3 mb-2 mb-lg-0" href="Tel:+18447830247">Call Now<br>+1 (844) 783-0247</a>
</div>
</div>
</div>
</nav>
<section id="health-enrollment-stepper" class="stepper-container">
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<form id="multiStepForm" novalidate>
<div class="step-content active" id="step-1">
<h1>Your 2026 Open Enrollment health plan comparison is just a few quick steps away!</h1>
<p class="question-text">1. Are you currently insured?</p>
<div class="radio-group">
<label class="pill"><input type="radio" name="insured" value="yes" required> Yes</label>
<label class="pill"><input type="radio" name="insured" value="no"> No</label>
</div>
<div class="error-placeholder"></div>
</div>
<div class="step-content" id="step-2">
<h1>Coverage Scope</h1>
<p class="question-text">2. Are you looking for Individual or Family coverage?</p>
<div class="radio-group">
<label class="pill"><input type="radio" name="coverage_type" value="individual" required> Individual</label>
<label class="pill"><input type="radio" name="coverage_type" value="family"> Family</label>
</div>
<div class="error-placeholder"></div>
</div>
<div class="step-content" id="step-3">
<h1>Family Plan Details</h1>
<p class="question-text">3. How many people will be included in your family plan?</p>
<div class="radio-group circles">
<label class="circle-btn"><input type="radio" name="family_size" value="2" required> 2</label>
<label class="circle-btn"><input type="radio" name="family_size" value="3"> 3</label>
<label class="circle-btn"><input type="radio" name="family_size" value="4+"> 4+</label>
</div>
<div class="error-placeholder"></div>
</div>
<div class="step-content" id="step-4">
<h1>Coverage Timeline</h1>
<p class="question-text">4. When will you want your coverage to start?</p>
<select name="start_date" class="custom-input" required>
<option value="" disabled selected>Select start date</option>
<option value="today">Today</option>
<option value="within-2-months">Within 2 months</option>
<option value="over-2-months">>2 months</option>
</select>
</div>
<div class="step-content" id="step-5">
<h1>Duration</h1>
<p class="question-text">5. How long are you going to need coverage?</p>
<div class="radio-group">
<label class="pill"><input type="radio" name="duration" value="under-6" required> < 6 months</label>
<label class="pill"><input type="radio" name="duration" value="over-6"> > 6 months</label>
</div>
<div class="error-placeholder"></div>
</div>
<div class="step-content" id="step-6">
<h1>Who is this policy for?</h1>
<p class="question-text">Please enter your full name.</p>
<div class="input-row">
<input type="text" name="first_name" id="firstName" class="custom-input" placeholder="First Name" required>
<input type="text" name="last_name" class="custom-input" placeholder="Last Name" required>
</div>
</div>
<div class="step-content" id="step-7">
<h1>Thanks, <span id="displayFirstName">Steve</span>.</h1>
<div class="sub-section">
<p class="question-text">Please enter your date of birth.</p>
<div class="input-row" style="justify-content: center;">
<input type="number" name="dob_month" id="dob_m" class="custom-input" style="width:80px" placeholder="MM" required>
<input type="number" name="dob_day" id="dob_d" class="custom-input" style="width:80px" placeholder="DD" required>
<input type="number" name="dob_year" id="dob_y" class="custom-input" style="width:120px" placeholder="YYYY" required>
</div>
</div>
<div class="divider"></div>
<div class="sub-section">
<p class="question-text">Gender</p>
<div class="radio-group">
<label class="pill"><input type="radio" name="gender" value="male" required> Male</label>
<label class="pill"><input type="radio" name="gender" value="female"> Female</label>
</div>
<div class="error-placeholder"></div>
</div>
</div>
<div class="step-content" id="step-8">
<h1>Let us help you enroll.</h1>
<div class="sub-section">
<p class="question-text">8. Tobacco Use?</p>
<div class="radio-group">
<label class="pill"><input type="radio" name="tobacco" value="yes" required> Yes</label>
<label class="pill"><input type="radio" name="tobacco" value="no"> No</label>
</div>
<div class="error-placeholder"></div>
</div>
<div class="divider"></div>
<div class="sub-section">
<p class="question-text">9. Household Income?</p>
<select name="household_income" class="custom-input" required>
<option value="" disabled selected>Select Income Range</option>
<option value="over-50">Over $50,001</option>
<option value="30-50">$30,001 - $50,000</option>
<option value="15-30">$15,001 - $30,000</option>
<option value="under-15">Under $15,000</option>
</select>
</div>
</div>
<div class="step-content" id="step-9">
<h1>10. Reason for New Coverage?</h1>
<select name="reason" class="custom-input" required>
<option value="" disabled selected>Select a reason</option>
<option value="lost-coverage">I lost my coverage</option>
<option value="moved">I moved to another state</option>
<option value="family-size">I changed the size of my family</option>
<option value="none">None of these apply</option>
</select>
</div>
<div class="step-content" id="step-10">
<h1>11. Do you need coverage for any of the following?</h1>
<select name="has_conditions" class="custom-input" required>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<div class="conditions-container">
<ul class="condition-list">
<li>Cancer or tumors</li>
<li>Major heart conditions</li>
<li>AIDS or HIV</li>
<li>Renal/Liver Disorders</li>
</ul>
<ul class="condition-list">
<li>Pregnancy</li>
<li>Major mental health</li>
<li>Diabetes (Type 1 or 2)</li>
<li>Scheduled surgeries</li>
</ul>
</div>
</div>
<div class="step-content" id="step-11">
<h1>12. Where do you need coverage?</h1>
<input type="text" id="street_address" name="street_address" class="custom-input" placeholder="Street Address" required>
<div class="input-row" style="margin-top:15px">
<input type="text" id="city" name="city" class="custom-input" placeholder="City" required>
<input type="text" id="state" name="state" class="custom-input" placeholder="State" required>
</div>
<input type="text" id="zipcode" name="zipcode" class="custom-input" style="margin-top:15px" placeholder="Zip Code" maxlength="5" required>
</div>
<div class="step-content" id="step-12">
<h1>Your Open Enrollment quote is ready!</h1>
<div class="sub-section">
<input type="email" name="email" id="email" class="custom-input" placeholder="Email Address" required>
<label class="check-box-row">
<input type="checkbox" name="terms" required> I accept the Terms of Service.
</label>
</div>
<div class="divider"></div>
<div class="sub-section">
<input type="tel" name="phone" id="phone" class="custom-input" placeholder="Phone Number" required>
<label class="check-box-row">
<input type="checkbox" name="marketing"> I would like to receive updates.
</label>
</div>
<button type="submit" class="compare-btn">Compare Plans</button>
</div>
<div class="nav-footer" id="navFooter">
<button type="button" id="backBtn" class="btn-gray">Back</button>
<button type="button" id="nextBtn" class="btn-blue">Next »</button>
</div>
</form>
</section>
<section id="confirmation" class="stepper-container" style="display:none;">
<h1>Your Quotes are Ready!</h1>
<h2 style="color:var(--primary); font-size: 32px;">+1 (855) 364-1844</h2>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDkgrp8EET31L8ZoctCF-uNDNS6zE9Bgg&libraries=places&callback=initAutocomplete" async defer></script>
<!-- Footer-->
<footer class="footer py-5 text-white" style="background-color: #000D1D;">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<img src="assets/img/footer-logo.svg" alt="Health Value Quotes" class="mb-4" height="60">
<div class="d-flex align-items-center mb-3">
<img src="assets/img/icons/transfer.png" alt="Phone" width="40" class="me-3">
<div>
<div class="small fw-bold text-uppercase">Toll Free</div>
<a href="tel:+18447830247" class="text-white text-decoration-none">+1 (844) 783-0247</a>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<img src="assets/img/icons/location.png" alt="Location" width="40" class="me-3">
<div>
<div class="small fw-bold text-uppercase">Location</div>
<div class="small">2983 N. Powerline Road<br>Pompano FL 33309</div>
</div>
</div>
<div class="d-flex gap-3">
<a href="#" class="text-white fs-5"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white fs-5"><i class="bi bi-twitter"></i></a>
<a href="#" class="text-white fs-5"><i class="bi bi-youtube"></i></a>
<a href="#" class="text-white fs-5"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h4 class="h5 fw-bold mb-4">About</h4>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="#page-top" class="text-danger text-decoration-none">Home</a></li>
<li class="mb-2"><a href="#about" class="text-white text-decoration-none">About Us</a></li>
<li class="mb-2"><a href="#services" class="text-white text-decoration-none">Services</a></li>
<li class="mb-2"><a href="#financing" class="text-white text-decoration-none">Financing</a></li>
<li class="mb-2"><a href="#contact" class="text-white text-decoration-none">Request Service</a></li>
<li class="mb-2"><a href="#maintenance" class="text-white text-decoration-none">Maintenance</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h4 class="h5 fw-bold mb-4">Services</h4>
</div>
<div class="col-lg-5 col-md-6">
<h4 class="h5 fw-bold mb-4">Newsletter</h4>
<p class="small text-white-50 mb-4">Get the latest news, tips and latest messages, including special offers</p>
<form id="newsletterForm">
<div class="mb-3">
<input type="email" class="form-control py-3" placeholder="Email" required>
</div>
<button type="submit" class="btn btn-warning w-100 py-3 fw-bold text-uppercase text-white" style="background-color: #FF9900; border: none;">Subscribe</button>
</form>
</div>
</div>
<hr class="my-5 opacity-25">
<div class="text-center small text-white-50">
Copyright 2026 © Health Value Quotes - All rights Reserved.
</div>
</div>
</footer>
<script>
$(document).ready(function() {
let currentStep = 1;
const totalSteps = 12; // Total active containers
// Formatting
$('#phone').on('input', function() { this.value = this.value.replace(/\D/g, '').slice(0, 10); });
$('#dob_m, #dob_d').on('input', function() { if (this.value.length > 2) this.value = this.value.slice(0, 2); });
$('#dob_y').on('input', function() { if (this.value.length > 4) this.value = this.value.slice(0, 4); });
// Validation
const validator = $("#multiStepForm").validate({
errorPlacement: function(error, element) {
if (element.attr("type") === "radio") error.appendTo(element.closest('.step-content').find('.error-placeholder'));
else error.insertAfter(element);
}
});
// Navigation Logic
$("#nextBtn").click(function() {
if ($("#multiStepForm").valid()) {
const coverage = $("input[name='coverage_type']:checked").val();
// Skip logic: Individual skips Family size (Step 3)
if (currentStep === 2 && coverage === 'individual') {
updateUI(4);
} else {
updateUI(currentStep + 1);
}
}
});
$("#backBtn").click(function() {
const coverage = $("input[name='coverage_type']:checked").val();
if (currentStep === 4 && coverage === 'individual') {
updateUI(2);
} else {
updateUI(currentStep - 1);
}
});
function updateUI(step) {
$(".step-content").removeClass("active");
currentStep = step;
$(`#step-${currentStep}`).addClass("active");
// Progress bar
$("#progressBar").css("width", (currentStep / totalSteps * 100) + "%");
// Nav visibility
$("#navFooter").toggle(currentStep < 12);
$("#backBtn").css("visibility", currentStep === 1 ? "hidden" : "visible");
if (currentStep === 7) $("#displayFirstName").text($("#firstName").val() || "Steve");
}
// API Post
$("#multiStepForm").submit(function(e) {
e.preventDefault();
if ($(this).valid()) {
$.post("https://pipeline.trustedhealthinsurancegroup.com/api/Leads", $(this).serialize())
.done(function() {
$("#health-enrollment-stepper").hide();
$("#confirmation").show();
});
}
});
// Google Autocomplete
const autocomplete = new google.maps.places.Autocomplete(document.getElementById('street_address'), { types: ['address'] });
autocomplete.addListener('place_changed', function() {
const place = autocomplete.getPlace();
place.address_components.forEach(c => {
if (c.types.includes('locality')) $('#city').val(c.long_name);
if (c.types.includes('administrative_area_level_1')) $('#state').val(c.short_name);
if (c.types.includes('postal_code')) $('#zipcode').val(c.long_name);
});
});
});
</script>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>