Calculator Tools Calculator Tools
Create

DTF Print & Press V26 | Seamless Customization Tool

Aug 9, 2025

About this app

Customize your DTF Print & Press with ease! Select products, locations, and quantities with our responsive tool.

DTF Print & Press V26 | Seamless Customization Tool DTF Print & Press V26 Powered by SeaSide Silk Screening Reset All Fields Name/PO Number Quantity Qty Price Breaks 24, 36, 48, 72, 144, 288 Total Price with Tax: 0.00 Product Type Select Product T-Shirt ($0) Polo ($1) Fleece ($2) Cap ($3) Print Location 1 Select Location N/A ($0) Left Front Chest ($1) Right Front Chest ($1) Full Front ($2) Full Back ($2) Print Location 2 Select Location N/A ($0) Left Front Chest ($1) Right Front Chest ($1) Full Front ($2) Full Back ($2) Print Location 3 Select Location N/A ($0) Left Front Chest ($1) Right Front Chest ($1) Full Front ($2) Full Back ($2) Print Location 4 Select Location N/A ($0) Left Front Chest ($1) Right Front Chest ($1) Full Front ($2) Full Back ($2)

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>DTF Print & Press V26 | Seamless Customization Tool</title>
<meta name="description" content="Customize your DTF Print & Press with ease! Select products, locations, and quantities with our responsive tool.">
<meta name="keywords" content="DTF Print, Custom T-Shirts, Screen Printing, Product Orders, Print Design Tool">

<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">


<script type="text/javascript">
try {
// App Javascript Goes Here
function calculateTotal() {
const quantity = parseInt($('#quantity').val());
const productPrice = parseFloat($('#product-type').find(':selected').data('price'));
const printLoc1Price = parseFloat($('#print-location-1').find(':selected').data('price'));
const printLoc2Price = parseFloat($('#print-location-2').find(':selected').data('price'));
const printLoc3Price = parseFloat($('#print-location-3').find(':selected').data('price'));
const printLoc4Price = parseFloat($('#print-location-4').find(':selected').data('price'));
const subtotal = (productPrice + printLoc1Price + printLoc2Price + printLoc3Price + printLoc4Price) * quantity;
const tax = subtotal * 0.16;
$('#total-cost').text((subtotal + tax).toFixed(2));
}

$(document).ready(function() {
$('#quantity').on('input', function() {
if ($(this).val() < 1) {
$(this).val(1);
}
calculateTotal();
});

$('select').on('change', function() {
calculateTotal();
});

$('#reset-btn').click(function() {
$('input, select').val('');
$('#total-cost').text('0.00');
$('#quantity').val(1);
$('#quantity').trigger('input');
});

$('#quantity').val(1).trigger('input'); // Set default for quantity
});

} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(to right, #ffafbd, #ffc3c3);
}
#main-container {
margin-top: 30px;
}
.form-group {
margin-bottom: 20px;
}
.total-cost {
font-size: 1.5em;
font-weight: bold;
color: #007bff;
}
.reset-btn {
float: right;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h2 class="text-center">DTF Print & Press V26</h2>
<p class="text-center">Powered by SeaSide Silk Screening</p>
<button id="reset-btn" class="btn btn-danger reset-btn">Reset All Fields</button>

<div class="form-group">
<label for="name-po">Name/PO Number</label>
<input type="text" class="form-control" id="name-po">
</div>

<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" id="quantity" min="1" value="1">
<small class="form-text text-muted">Qty Price Breaks 24, 36, 48, 72, 144, 288</small>
</div>

<div class="form-group">
<label for="total-quantity-price">Total Price with Tax:</label>
<div class="total-cost" id="total-cost">0.00</div>
</div>

<div class="form-group">
<label for="product-type">Product Type</label>
<select id="product-type" class="form-control">
<option value="" data-price="0">Select Product</option>
<option value="T-Shirt" data-price="0">T-Shirt ($0)</option>
<option value="Polo" data-price="1">Polo ($1)</option>
<option value="Fleece" data-price="2">Fleece ($2)</option>
<option value="Cap" data-price="3">Cap ($3)</option>
</select>
</div>

<div class="form-group">
<label for="print-location-1">Print Location 1</label>
<select id="print-location-1" class="form-control">
<option value="" data-price="0">Select Location</option>
<option value="N/A" data-price="0">N/A ($0)</option>
<option value="Left Front Chest" data-price="1">Left Front Chest ($1)</option>
<option value="Right Front Chest" data-price="1">Right Front Chest ($1)</option>
<option value="Full Front" data-price="2">Full Front ($2)</option>
<option value="Full Back" data-price="2">Full Back ($2)</option>
</select>
</div>

<div class="form-group">
<label for="print-location-2">Print Location 2</label>
<select id="print-location-2" class="form-control">
<option value="" data-price="0">Select Location</option>
<option value="N/A" data-price="0">N/A ($0)</option>
<option value="Left Front Chest" data-price="1">Left Front Chest ($1)</option>
<option value="Right Front Chest" data-price="1">Right Front Chest ($1)</option>
<option value="Full Front" data-price="2">Full Front ($2)</option>
<option value="Full Back" data-price="2">Full Back ($2)</option>
</select>
</div>

<div class="form-group">
<label for="print-location-3">Print Location 3</label>
<select id="print-location-3" class="form-control">
<option value="" data-price="0">Select Location</option>
<option value="N/A" data-price="0">N/A ($0)</option>
<option value="Left Front Chest" data-price="1">Left Front Chest ($1)</option>
<option value="Right Front Chest" data-price="1">Right Front Chest ($1)</option>
<option value="Full Front" data-price="2">Full Front ($2)</option>
<option value="Full Back" data-price="2">Full Back ($2)</option>
</select>
</div>

<div class="form-group">
<label for="print-location-4">Print Location 4</label>
<select id="print-location-4" class="form-control">
<option value="" data-price="0">Select Location</option>
<option value="N/A" data-price="0">N/A ($0)</option>
<option value="Left Front Chest" data-price="1">Left Front Chest ($1)</option>
<option value="Right Front Chest" data-price="1">Right Front Chest ($1)</option>
<option value="Full Front" data-price="2">Full Front ($2)</option>
<option value="Full Back" data-price="2">Full Back ($2)</option>
</select>
</div>
</div>
</body>
</html>