Calculator Tools Calculator Tools
Create

DTF Print & Press - User Form

Aug 10, 2025

About this app

Engage in seamless DTF Printing with our user-friendly interface for Customer Supplied Goods & Art Management.

DTF Print & Press - User 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

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 - User Form</title>
<meta name="description" content="Engage in seamless DTF Printing with our user-friendly interface for Customer Supplied Goods & Art Management.">
<meta name="keywords" content="DTF Print, Customer Supplies, Art Management, Seamless Printing Process, SeaSide Silk Screening">

<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>

<style>
body {
background-color: white;
color: black;
font-family: 'Arial', sans-serif;
text-align: left;
}

.container {
margin: 20px auto;
padding: 15px;
border: 1px solid #007BFF;
border-radius: 5px;
}

.box {
border: 2px solid #007BFF;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}

.label {
font-size: 0.8rem;
}

#reset-btn {
cursor: pointer;
background-color: red;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
}

#unit-total, #order-total {
display: block;
margin-top: 10px;
font-weight: bold;
}

#hidden-receiving-cost {
display: none;
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Reset the form
document.getElementById('reset-btn').onclick = function() {
document.getElementById("dtf-form").reset();
updateCosts();
};

function updateCosts() {
const quantity = parseFloat(document.getElementById('quantity').value) || 0;
const receivingCost = quantity * 0.16;
const productType = parseInt(document.getElementById('product-type').value);
const unitTotal = productType * receivingCost;
const orderTotal = quantity * unitTotal;

document.getElementById('hidden-receiving-cost').value = receivingCost.toFixed(2);
document.getElementById('unit-total').innerText = "Unit Total: $" + unitTotal.toFixed(2);
document.getElementById('order-total').innerText = "Order Total: $" + orderTotal.toFixed(2);
}

document.getElementById('quantity').addEventListener('input', updateCosts);
document.getElementById('product-type').addEventListener('change', updateCosts);
});
</script>
</head>
<body>
<div class="container">
<h3>DTF Print & Press - Customer Supplied Goods & Art - V26</h3>
<h6 class="small-text">Receive Goods/Print/Press/Prep & Pack/Ship or Pickup - Powered by SeaSide Silk Screening</h6>

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

<label class="label" for="quantity">Quantity</label>
<input type="number" id="quantity" class="form-control" required min="0>
<input type="hidden" id="hidden-receiving-cost" value="0">
<small class="label">Qty Price Breaks 24, 36, 48, 72, 144, 288</small>

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

<div id="unit-total">Unit Total: $0.00</div>
<div id="order-total">Order Total: $0.00</div>

<div class="mb-3">
<button type="button" id="reset-btn">Reset</button>
</div>

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

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

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

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

<div class="box">
<label class="label" for="turn-time">Turn Time</label>
<select id="turn-time" class="form-select">
<option value="0">Un-Selected - $0</option>
<option value="1">Standard Turn Time - As Posted</option>
<option value="1.1">1 Business Day < 10%</option>
<option value="1.2">2 Business Days < 20%</option>
<option value="1.3">3 Business Days < 30%</option>
<option value="1.4">4 Business Days < 40%</option>
<option value="1.5">5 Business Days < 50%</option>
<option value="1.6">6 Business Days < 60%</option>
<option value="1.7">7 Business Days < 70%</option>
<option value="1.8">8 Business Days < 80%</option>
<option value="1.9">9 Business Days < 90%</option>
</select>

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