DTF Print & Press Form
About this app
DTF Print & Press V26 customizable form for ordering with a calculation feature for total costs based on selected items.
DTF Print & Press Form DTF Print & Press V26 Powered by SeaSide Silk Screening Name/PO Number Quantity 0 Qty Price Breaks 24, 36, 48, 72, 144, 288 Product Type T-Shirt Polo Fleece Cap Print Location 1 N/A Left Front Chest Right Front Chest Full Front Full Back Total Price: 0.00 Reset All Fields
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
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 Form</title>
<meta name="description" content="DTF Print & Press V26 customizable form for ordering with a calculation feature for total costs based on selected items.">
<meta name="keywords" content="DTF Print, Fleece, T-Shirt, Print Location, Customizable Form, Pricing, Order Form">
<!-- 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. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Function to calculate costs
function calculateCosts() {
const quantity = parseInt(document.getElementById("quantity").value);
const productPrice = parseFloat(QTY_PRICES[document.getElementById("productType").value]) || 0;
const location1Price = parseFloat(PRINT_LOCATION_PRICES[document.getElementById("printLocation1").value]) || 0;
const costPerUnit = 0.16;
const totalReceivingCost = quantity * costPerUnit;
let totalPrice = (productPrice + location1Price) * quantity;
document.getElementById("receivingCost").value = totalReceivingCost.toFixed(2);
document.getElementById("totalPrice").innerHTML = (totalPrice + totalReceivingCost).toFixed(2);
}
const QTY_PRICES = {
"T-Shirt": 0,
"Polo": 1,
"Fleece": 2,
"Cap": 3
};
const PRINT_LOCATION_PRICES = {
"N/A": 0,
"Left Front Chest": 1,
"Right Front Chest": 1,
"Full Front": 2,
"Full Back": 2
};
$("input[name='quantity']").on("input", function() {
$("#quantityDisplay").text(this.value);
calculateCosts();
});
$("#productType, #printLocation1").on("change", calculateCosts);
$("#resetButton").click(function() {
$("#orderForm")[0].reset();
$("#quantityDisplay").text(0);
$("#totalPrice").text("0.00");
$("#receivingCost").val(0);
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(135deg, #f0f8ff, #b0e0e6);
color: #333;
font-family: Arial, sans-serif;
}
#main-container {
background: white;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h2 {
color: #007BFF;
}
.light-red-btn {
background-color: #ff7f7f;
color: white;
}
.slide-container {
display: flex;
align-items: center;
}
.slide-container input {
margin-right: 10px;
}
</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>
<form id="orderForm">
<div class="mb-3">
<label for="name" class="form-label">Name/PO Number</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="quantity" class="form-label">Quantity</label>
<div class="slide-container">
<input type="range" class="form-range" id="quantity" min="0" value="0" />
<span id="quantityDisplay">0</span>
</div>
<small>Qty Price Breaks 24, 36, 48, 72, 144, 288</small>
<input type="hidden" id="receivingCost" />
</div>
<div class="mb-3">
<label for="productType" class="form-label">Product Type</label>
<select class="form-select" id="productType" required>
<option value="T-Shirt">T-Shirt</option>
<option value="Polo">Polo</option>
<option value="Fleece">Fleece</option>
<option value="Cap">Cap</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation1" class="form-label">Print Location 1</label>
<select class="form-select" id="printLocation1" required>
<option value="N/A">N/A</option>
<option value="Left Front Chest">Left Front Chest</option>
<option value="Right Front Chest">Right Front Chest</option>
<option value="Full Front">Full Front</option>
<option value="Full Back">Full Back</option>
</select>
</div>
<div class="text-center">
<p>Total Price: <span id="totalPrice">0.00</span></p>
</div>
<button type="button" id="resetButton" class="btn light-red-btn">Reset All Fields</button>
</form>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!