Vacancy Loss Calculator - Bootstrap 3
Example: /examples/vacancy-loss-calc-bs3
View Bootstrap 4 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-calc-bs3.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-md-3 col-sm-6">
<p>
1. Enter your information into each required field. Hover the info bubbles for more information.
</p>
</div>
<div class="col-md-3 col-sm-6">
<p>
2. Populating all editable fields with values will increase the accuracy of the results.
</p>
</div>
<div class="col-md-3 col-sm-6">
<p>
3. You may go back at any time to modify the contents of the fields.
</p>
</div>
<div class="col-md-3 col-sm-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="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="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?v2"></script>
</body>
</html>
CSS
/css/vacancy-loss-calc-bs3.css
Javascript
/js/vacancy-loss-calculator.js