Calculator Tools Calculator Tools
Create

DTF Print & Press Order Form

Aug 10, 2025

About this app

Submit orders for DTF Printing with custom inputs for product types, print locations, and pricing details.

DTF Print & Press Order Form DTF Print & Press - Customer Supplied Goods & Art - V26 - (Receive Goods/Print/Press/Prep & Pack/Ship or Pickup) **Powered by SeaSide Silk Screening** Name/PO Number: Quantity (>= 0): Qty Price Breaks: 24, 36, 48, 72, 144, 288 Product Type: T-Shirt $0 Polo $1 Fleece $2 Cap $3 Print Location 1: N/A $0 Left Front Chest $1 Right Front Chest $1 Full Front $2 Full Back $2 Print Location 2: N/A $0 Left Front Chest $1 Right Front Chest $1 Full Front $2 Full Back $2 Print Location 3: N/A $0 Left Front Chest $1 Right Front Chest $1 Full Front $2 Full Back $2 Print Location 4: N/A $0 Left Front Chest $1 Right Front Chest $1 Full Front $2 Full Back $2 Turn Time: Un-Selected $0 Standard Turn Time $1 1 Business Day < Standard - 10% 2 Business Days < Standard - 20% 3 Business Days < Standard - 30% 4 Business Days < Standard - 40% 5 Business Days < Standard - 50% 6 Business Days < Standard - 60% 7 Business Days < Standard - 70% 8 Business Days < Standard - 80% 9 Business Days < Standard - 90% Payment Type: Unselected $0 Credit Card (3.6% Fee) ACH (No Fees) Unit Total: $0.00 Order Total: $0.00 Reset

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 Order Form</title>
<meta name="description" content="Submit orders for DTF Printing with custom inputs for product types, print locations, and pricing details.">
<meta name="keywords" content="DTF printing, custom orders, screen printing, print locations, order form, garment printing">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<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 {
document.addEventListener("DOMContentLoaded", function() {
// Calculate Unit Total and Order Total
$('input, select').on('change', function() {
let quantity = parseFloat($('#quantity').val()) || 0;
const rcu = 0.16;
const productPrice = parseFloat($('#productType option:selected').data('price')) || 0;
const printLocation1Price = parseFloat($('#printLocation1 option:selected').data('price')) || 0;
const printLocation2Price = parseFloat($('#printLocation2 option:selected').data('price')) || 0;
const printLocation3Price = parseFloat($('#printLocation3 option:selected').data('price')) || 0;
const printLocation4Price = parseFloat($('#printLocation4 option:selected').data('price')) || 0;
const turnTimePrice = parseFloat($('#turnTime option:selected').data('price')) || 0;
const paymentTypePrice = parseFloat($('#paymentType option:selected').data('price')) || 0;

const receivingCost = quantity * rcu;
const ut = (productPrice + receivingCost + printLocation1Price + printLocation2Price + printLocation3Price + printLocation4Price + turnTimePrice) * quantity;
const ot = ut * (1 + (paymentTypePrice - 1));
$('#unitTotal').text('$' + ut.toFixed(2));
$('#orderTotal').text('$' + ot.toFixed(2));
});

// Reset all fields
$('#reset').on('click', function() {
$('#form')[0].reset();
$('#unitTotal').text('$0.00');
$('#orderTotal').text('$0.00');
});
});
} catch (error) {
throw error;
}
</script>

<style>
body {
background-color: white;
color: black;
text-align: left;
}
.blue-box {
border: 2px solid blue;
padding: 10px;
margin: 20px 0;
}
.small-rect {
width: 120px;
height: 30px;
display: inline-block;
border: 1px solid #ccc;
}
#reset {
background-color: red;
color: white;
padding: 5px 15px;
border: none;
cursor: pointer;
}
#reset:hover {
opacity: 0.8;
}
.small-text {
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h5 class="text-center small-text">DTF Print & Press - Customer Supplied Goods & Art - V26 - (Receive Goods/Print/Press/Prep & Pack/Ship or Pickup) **Powered by SeaSide Silk Screening**</h5>

<form id="form">
<div class="blue-box">
<label for="namePo">Name/PO Number:</label>
<input type="text" id="namePo" class="form-control" required>

<label for="quantity">Quantity (>= 0):</label>
<input type="number" id="quantity" class="form-control" min="0" required>
<small class="small-text">Qty Price Breaks: 24, 36, 48, 72, 144, 288</small>

<label for="productType">Product Type:</label>
<select id="productType" class="form-select" required>
<option data-price="0" value="T-Shirt">T-Shirt $0</option>
<option data-price="1" value="Polo">Polo $1</option>
<option data-price="2" value="Fleece">Fleece $2</option>
<option data-price="3" value="Cap">Cap $3</option>
</select>
</div>

<div class="blue-box">
<label for="printLocation1">Print Location 1:</label>
<select id="printLocation1" class="form-select">
<option data-price="0" value="N/A">N/A $0</option>
<option data-price="1" value="Left Front Chest">Left Front Chest $1</option>
<option data-price="1" value="Right Front Chest">Right Front Chest $1</option>
<option data-price="2" value="Full Front">Full Front $2</option>
<option data-price="2" value="Full Back">Full Back $2</option>
</select>

<label for="printLocation2">Print Location 2:</label>
<select id="printLocation2" class="form-select">
<option data-price="0" value="N/A">N/A $0</option>
<option data-price="1" value="Left Front Chest">Left Front Chest $1</option>
<option data-price="1" value="Right Front Chest">Right Front Chest $1</option>
<option data-price="2" value="Full Front">Full Front $2</option>
<option data-price="2" value="Full Back">Full Back $2</option>
</select>

<label for="printLocation3">Print Location 3:</label>
<select id="printLocation3" class="form-select">
<option data-price="0" value="N/A">N/A $0</option>
<option data-price="1" value="Left Front Chest">Left Front Chest $1</option>
<option data-price="1" value="Right Front Chest">Right Front Chest $1</option>
<option data-price="2" value="Full Front">Full Front $2</option>
<option data-price="2" value="Full Back">Full Back $2</option>
</select>

<label for="printLocation4">Print Location 4:</label>
<select id="printLocation4" class="form-select">
<option data-price="0" value="N/A">N/A $0</option>
<option data-price="1" value="Left Front Chest">Left Front Chest $1</option>
<option data-price="1" value="Right Front Chest">Right Front Chest $1</option>
<option data-price="2" value="Full Front">Full Front $2</option>
<option data-price="2" value="Full Back">Full Back $2</option>
</select>
</div>

<div class="blue-box">
<label for="turnTime">Turn Time:</label>
<select id="turnTime" class="form-select">
<option data-price="0" value="Un-Selected">Un-Selected $0</option>
<option data-price="1" value="Standard Turn Time">Standard Turn Time $1</option>
<option data-price="1.10" value="1 Business Day &lt; Standard">1 Business Day < Standard - 10%</option>
<option data-price="1.20" value="2 Business Days &lt; Standard">2 Business Days < Standard - 20%</option>
<option data-price="1.30" value="3 Business Days &lt; Standard">3 Business Days < Standard - 30%</option>
<option data-price="1.40" value="4 Business Days &lt; Standard">4 Business Days < Standard - 40%</option>
<option data-price="1.50" value="5 Business Days &lt; Standard">5 Business Days < Standard - 50%</option>
<option data-price="1.60" value="6 Business Days &lt; Standard">6 Business Days < Standard - 60%</option>
<option data-price="1.70" value="7 Business Days &lt; Standard">7 Business Days < Standard - 70%</option>
<option data-price="1.80" value="8 Business Days &lt; Standard">8 Business Days < Standard - 80%</option>
<option data-price="1.90" value="9 Business Days &lt; Standard">9 Business Days < Standard - 90%</option>
</select>

<label for="paymentType">Payment Type:</label>
<select id="paymentType" class="form-select">
<option data-price="0" value="Unselected">Unselected $0</option>
<option data-price="1.036" value="Credit Card">Credit Card (3.6% Fee)</option>
<option data-price="1" value="ACH">ACH (No Fees)</option>
</select>
</div>

<div class="blue-box" style="margin-top: 20px;">
<div class="row">
<div class="col">
<label>Unit Total:</label>
<div class="small-rect" id="unitTotal">$0.00</div>
</div>
<div class="col">
<label>Order Total:</label>
<div class="small-rect" id="orderTotal">$0.00</div>
</div>
<div class="col">
<button type="button" id="reset">Reset</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>