Instant Price Quote Calculator
About this app
Calculate your shipping price instantly based on various parameters such as distance, weight, length, and special equipment needed.
Instant Trucking Quote Calculator Trucking Quote Form Tarp Needed Get Quote
Related apps
Put this on your site
Source
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instant Trucking Quote Calculator</title>
<meta name="description" content="Calculate your trucking quote based on distance, weight, and additional options like tarp and urgency.">
<meta name="keywords" content="Trucking, Quote Calculator, Freight, Logistics">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
function calculateQuote() {
const miles = parseFloat(document.getElementById('miles').value);
const length = parseFloat(document.getElementById('length').value);
const weight = parseFloat(document.getElementById('weight').value);
const tarp = document.getElementById('tarp').checked;
let ratePerMile = 0.80;
if (length < 20) {
ratePerMile += 0.20;
} else if (length > 20) {
ratePerMile += 0.40;
}
if (weight < 3000) {
ratePerMile += 0.10;
} else if (weight > 7000) {
ratePerMile += 0.25;
} else if (weight > 3000) {
ratePerMile += 0.20;
}
if (miles < 3000) {
ratePerMile += 0.10;
}
if (tarp) {
ratePerMile += 0.15;
}
const totalQuote = miles * ratePerMile;
document.getElementById('quote').innerText = `Estimated Quote: $${totalQuote.toFixed(2)}`;
}
document.getElementById('quote-form').onsubmit = function(event) {
event.preventDefault();
calculateQuote();
};
});
</script>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
margin-bottom: 20px;
}
form {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
input[type=text], input[type=number], input[type=tel], input[type=email] {
width: 250px;
margin-bottom: 15px;
padding: 10px;
border: none;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #f77f00;
color: white;
cursor: pointer;
}
button:hover {
background-color: #d96300;
}
#quote {
margin-top: 20px;
font-size: 1.5em;
color: #84c8ff;
}
</style>
</head>
<body>
<h1>Trucking Quote Form</h1>
<form id="quote-form">
<input type="text" id="origin" placeholder="Origin" required>
<input type="text" id="destination" placeholder="Destination" required>
<input type="text" id="urgency" placeholder="Urgency" required>
<input type="number" id="miles" placeholder="Total Miles" required>
<input type="number" id="length" placeholder="Shipment Length (feet)" required>
<input type="number" id="weight" placeholder="Shipment Weight (pounds)" required>
<label><input type="checkbox" id="tarp"> Tarp Needed</label><br>
<input type="tel" id="phone" placeholder="Contact Phone" required>
<input type="email" id="email" placeholder="Contact Email" required>
<button type="submit">Get Quote</button>
</form>
<h2 id="quote"></h2>
</body>
</html>
NEW APPS
These are apps made by the community!