Vacancy Loss Calculator - Bootstrap 4
Example: /examples/vacancy-loss-calculator
View Bootstrap 3 Code View Bootstrap 5 CodeForm Import
eyJuYW1lIjoiVmFjYW5jeSBMb3NzIENhbGN1bGF0b3IiLCJzbHVnIjoidmFjYW5jeS1sb3NzLWNhbGN1bGF0b3IiLCJzdWNjZXNzTWVzc2FnZSI6bnVsbCwiaXNMZWFkIjoiMCIsImF0dHJpYnV0ZXMiOm51bGwsImZpZWxkcyI6W3siZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJNb250aGx5IFJlbnQiLCJzbHVnIjoibW9udGhseS1yZW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMSIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJOYW1lIiwic2x1ZyI6Im5hbWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI2IiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjMiLCJsYWJlbCI6IkVtYWlsIiwic2x1ZyI6ImVtYWlsIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNyIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxMCIsImxhYmVsIjoiUGhvbmUiLCJzbHVnIjoicGhvbmUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjgiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgQWRkcmVzcyIsInNsdWciOiJwcm9wZXJ0eS1hZGRyZXNzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI5IiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjIiLCJsYWJlbCI6IkNvbW1lbnRzIiwic2x1ZyI6ImNvbW1lbnRzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxMCIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJNb250aGx5IEhPQSBEdWVzIiwic2x1ZyI6Im1vbnRobHktaG9hLWR1ZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiTW9udGhseSBVdGlsaXRpZXMiLCJzbHVnIjoibW9udGhseS11dGlsaXRpZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjMiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQWRkaXRpb25hbCBNb250aGx5IENvc3RzIiwic2x1ZyI6ImFkZGl0aW9uYWwtbW9udGhseS1jb3N0cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNCIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJFc3QgTnVtYmVyIG9mIERheXMgVmFjYW50Iiwic2x1ZyI6ImRheXMtdmFjYW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNSIsImF0dHJpYnV0ZXMiOm51bGx9XX0=
HTML
<html>
<head>
<title>Vacancy Loss Calculator | {% snippet name='company-name' %}</title>
<meta name="description" content="Calculate your vacancy costs"/>
<link rel="stylesheet" href="/css/vacancy-loss-calculator.css">
</head>
<body>
<div id="vl-calculator">
<section class="calc-instructions">
<h1 class="calc-instructions__heading">Vacancy Loss Calculator</h1>
<h2 class="calc-instructions__sub">Instructions</h2>
<div class="calc-instructions__toggle custom-control custom-switch">
<span class="custom-switch__label custom-switch__label--left">Hide</span>
<input type="checkbox" class="custom-control-input collapsed" id="instructionsSwitch" data-toggle="collapse" data-target="#collapseInstructions" aria-expanded="true" aria-controls="collapseInstructions">
<label class="custom-control-label custom-switch__label custom-switch__label--right" for="instructionsSwitch">Show</label>
</div>
<div class="calc-instructions__steps collapse" id="collapseInstructions">
<div class="row">
<div class="col-lg-3 col-md-6">
<p>
1. Enter your information into each required field. Hover the info bubbles for more information.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
2. Populating all editable fields with values will increase the accuracy of the results.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
3. You may go back at any time to modify the contents of the fields.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
4. Click “Calculate” to populate your results immediately.
</p>
</div>
</div>
</div>
</section>
<section class="calc-form" data-ion="form" data-name="vacancy-loss-calculator" data-inline="1">
<form>
<div id="calcCarousel" class="calc-form__carousel carousel slide" data-ride="carousel" data-interval="false" data-wrap="false" data-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h3 class="calc-form__heading">step 1 of 2</h3>
<h4 class="calc-form__sub">Rental Information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="monthly_rent">Monthly Rent*</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_rent" type="text" class="form-control" name="monthly-rent" data-bind="value: monthlyRent" required>
</div>
</div>
<div class="form-group form-group-text">
<label for="monthly_hoa">Monthly HOA Dues</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_hoa" type="text" class="form-control" name="monthly-hoa-dues" data-bind="value: monthlyHoaDues">
</div>
</div>
<div class="form-group form-group-text">
<label for="monthly_utilities">Monthly Utilities</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_utilities" type="text" class="form-control" name="monthly-utilities" data-bind="value: monthlyUtilities">
</div>
</div>
<div class="form-group form-group-text">
<label for="additional_costs">Additional Monthly Costs</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="additional_costs" type="text" class="form-control" name="additional-monthly-costs" data-bind="value: additionalMonthlyCosts">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="vacant_days">Est Number of Days Vacant*</label>
<div class="input-group">
<input id="vacant_days" type="number" class="form-control" name="days-vacant" data-bind="value: vacantDays" required>
<div class="input-group-append"><span class="input-group-text">Days</span></div>
</div>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn ml-auto" href="#calcCarousel" role="button" data-slide="next">Next</button>
</div>
</div>
<div class="carousel-item">
<h3 class="calc-form__heading">step 2 of 2</h3>
<h4 class="calc-form__sub">personal & Property information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="name">Name*</label>
<input id="name" type="text" class="form-control" name="name" required>
</div>
<div class="form-group form-group-email is-required">
<label for="email">Email*</label>
<input id="email" type="email" class="form-control" name="email" required>
</div>
<div class="form-group form-group-phone is-required">
<label for="phone">Phone</label>
<input id="phone" type="tel" class="form-control" name="phone">
</div>
<div class="form-group form-group-text is-required">
<label for="property_address">Property Address</label>
<input id="property_address" type="text" class="form-control" name="property-address">
</div>
<div class="form-group form-group-comments">
<label for="comments">Comments</label>
<textarea id="comments" type="text" class="form-control" name="comments"></textarea>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-slide="prev">Previous</button>
<button id="calculate" type="submit" class="calc-form__btn">Get Results!</button>
</div>
</div>
</div>
</div>
</form>
</section>
<section class="calc-results">
<h2 class="calc-results__heading">Results</h2>
<div id="results" class="results">
<h3>DAILY VACANCY COST: $<span id="daily_vacancy_cost" data-bind="text: dailyVacancyCost"></span></h3>
<h3>TOTAL VACANCY COST: $<span id="vacancy_cost" data-bind="text: vacancyCost"></span></h3>
</div>
</section>
</div>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>
<script defer type="text/javascript" src="/js/vacancy-loss-calculator.js"></script>
</body>
</html>
CSS
/css/vacancy-loss-calculator.css
Javascript
/js/vacancy-loss-calculator.js
Vacancy Loss Calculator - Bootstrap 5
Example: /examples/vacancy-loss-calc-bs5
Form Import
eyJuYW1lIjoiVmFjYW5jeSBMb3NzIENhbGN1bGF0b3IiLCJzbHVnIjoidmFjYW5jeS1sb3NzLWNhbGN1bGF0b3IiLCJzdWNjZXNzTWVzc2FnZSI6bnVsbCwiaXNMZWFkIjoiMSIsImF0dHJpYnV0ZXMiOm51bGwsImZpZWxkcyI6W3siZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJNb250aGx5IFJlbnQiLCJzbHVnIjoibW9udGhseS1yZW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMSIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJOYW1lIiwic2x1ZyI6Im5hbWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyIiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjMiLCJsYWJlbCI6IkVtYWlsIiwic2x1ZyI6ImVtYWlsIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMyIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxMCIsImxhYmVsIjoiUGhvbmUiLCJzbHVnIjoicGhvbmUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjQiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgQWRkcmVzcyIsInNsdWciOiJwcm9wZXJ0eS1hZGRyZXNzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI1IiwiYXR0cmlidXRlcyI6bnVsbH0seyJmaWVsZFR5cGVJRCI6IjIiLCJsYWJlbCI6IkNvbW1lbnRzIiwic2x1ZyI6ImNvbW1lbnRzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNiIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJNb250aGx5IEhPQSBEdWVzIiwic2x1ZyI6Im1vbnRobHktaG9hLWR1ZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjciLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiTW9udGhseSBVdGlsaXRpZXMiLCJzbHVnIjoibW9udGhseS11dGlsaXRpZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjgiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQWRkaXRpb25hbCBNb250aGx5IENvc3RzIiwic2x1ZyI6ImFkZGl0aW9uYWwtbW9udGhseS1jb3N0cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiOSIsImF0dHJpYnV0ZXMiOm51bGx9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJFc3QgTnVtYmVyIG9mIERheXMgVmFjYW50Iiwic2x1ZyI6ImRheXMtdmFjYW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTAiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiRGFpbHkgVmFjYW5jeSBDb3N0Iiwic2x1ZyI6ImRhaWx5LXZhY2FuY3ktY29zdCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTEiLCJhdHRyaWJ1dGVzIjpudWxsfSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiVG90YWwgVmFjYW5jeSBDb3N0Iiwic2x1ZyI6InRvdGFsLXZhY2FuY3ktY29zdCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTIiLCJhdHRyaWJ1dGVzIjpudWxsfV19
HTML
<html>
<head>
<title>Vacancy Loss Calculator | {% snippet name='company-name' %}</title>
<meta name="description" content="Calculate your vacancy costs"/>
<link rel="stylesheet" href="/css/vacancy-loss-calc-bs5.css">
</head>
<body>
<div id="vl-calculator">
<section class="calc-instructions">
<h2 class="calc-instructions__sub">Instructions</h2>
<div class="form-check form-switch calc-instructions__toggle">
<span class="custom-switch__label custom-switch__label--left">Hide</span>
<input class="form-check-input custom-control-input collapsed" type="checkbox" role="switch" id="instructionsSwitch" data-bs-toggle="collapse" data-bs-target="#collapseInstructions" aria-expanded="true" aria-controls="collapseInstructions">
<label class="form-check-label custom-switch__label custom-switch__label--right" for="instructionsSwitch">Show</label>
</div>
<div class="calc-instructions__steps collapse" id="collapseInstructions">
<div class="row">
<div class="col-lg-3 col-md-6">
<p>
1. Enter your information into each required field. Hover the info bubbles for more information.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
2. Populating all editable fields with values will increase the accuracy of the results.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
3. You may go back at any time to modify the contents of the fields.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
4. Click “Calculate” to populate your results immediately.
</p>
</div>
</div>
</div>
</section>
<section class="calc-form" data-ion="form" data-name="vacancy-loss-calculator" data-inline="1">
<form>
<div id="calcCarousel" class="calc-form__carousel carousel slide" data-bs-ride="false" data-bs-interval="false" data-bs-wrap="false" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h3 class="calc-form__heading">step 1 of 2</h3>
<h4 class="calc-form__sub">Rental Information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="monthly_rent">Monthly Rent*</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_rent" type="text" class="form-control" name="monthly-rent" data-bind="value: monthlyRent" required>
</div>
</div>
<div class="form-group form-group-text">
<label for="monthly_hoa">Monthly HOA Dues</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_hoa" type="text" class="form-control" name="monthly-hoa-dues" data-bind="value: monthlyHoaDues">
</div>
</div>
<div class="form-group form-group-text">
<label for="monthly_utilities">Monthly Utilities</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="monthly_utilities" type="text" class="form-control" name="monthly-utilities" data-bind="value: monthlyUtilities">
</div>
</div>
<div class="form-group form-group-text">
<label for="additional_costs">Additional Monthly Costs</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="additional_costs" type="text" class="form-control" name="additional-monthly-costs" data-bind="value: additionalMonthlyCosts">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="vacant_days">Est Number of Days Vacant*</label>
<div class="input-group">
<input id="vacant_days" type="number" class="form-control" name="days-vacant" data-bind="value: vacantDays" required>
<div class="input-group-append"><span class="input-group-text">Days</span></div>
</div>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn ms-auto" href="#calcCarousel" role="button" data-bs-slide="next">Next</button>
</div>
</div>
<div class="carousel-item">
<h3 class="calc-form__heading">step 2 of 2</h3>
<h4 class="calc-form__sub">personal & Property information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="name">Name*</label>
<input id="name" type="text" class="form-control" name="name" required>
</div>
<div class="form-group form-group-email is-required">
<label for="email">Email*</label>
<input id="email" type="email" class="form-control" name="email" required>
</div>
<div class="form-group form-group-phone is-required">
<label for="phone">Phone</label>
<input id="phone" type="tel" class="form-control" name="phone">
</div>
<div class="form-group form-group-text is-required">
<label for="property_address">Property Address</label>
<input id="property_address" type="text" class="form-control" name="property-address">
</div>
<div class="form-group form-group-comments">
<label for="comments">Comments</label>
<textarea id="comments" type="text" class="form-control" name="comments"></textarea>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-bs-slide="prev">Previous</button>
<button id="calculate" type="submit" class="calc-form__btn">Get Results!</button>
</div>
</div>
</div>
</div>
<div class="calc-results">
<div class="calc-form-wrapper">
<h2 class="display-1 mb-5">Results</h2>
<div class="calc-form__container">
<div class="form-group form-group-text">
<label for="daily_vacancy_cost">Daily Vacancy Cost</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="daily_vacancy_cost" type="text" class="form-control" name="daily-vacancy-cost" data-bind="value: dailyVacancyCost">
</div>
</div>
<div class="form-group form-group-text">
<label for="vacancy_cost">Total Vacancy Cost</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="vacancy_cost" type="text" class="form-control" name="vacancy-cost" data-bind="value: vacancyCost">
</div>
</div>
</div>
</div>
<h4 class="display-1 mt-5">Schedule time with us today!</h4>
</div>
</form>
</section>
<div class="container">
<p class="pt-5 m-0 text-center text-muted">
<small>**Disclaimer: The vacancy loss calculator provided on this website is for demonstration purposes only. The results generated by the calculator are based on generic assumptions and may not reflect the actual costs associated with vacancy in your specific circumstances. It is important to note that these results should not be considered as factual or binding. We recommend consulting with a qualified professional to obtain accurate and personalized information regarding vacancy costs for your situation. By using this calculator, you acknowledge that we are not liable for any decisions made based on the results obtained.</small>
</p>
</div>
</div>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>
<script defer type="text/javascript" src="/js/vacancy-loss-calc-bs5.js"></script>
</body>
</html>
CSS
/css/vacancy-loss-calc-bs5.css
Javascript
/js/vacancy-loss-calc-bs5.js