Calculator Tools Calculator Tools
Create

Instant Price Quote Calculator

Mar 27, 2026

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>