DTF Print & Press V26 - Custom Order Form
About this app
A custom order form for DTF Print & Press providing options for product types and print locations with dynamic pricing.
DTF Print & Press V26 - Custom Order Form DTF Print & Press V26 Powered by SeaSide Silk Screening Name/PO Number Quantity 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 Total Price: $0.00
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 V26 - Custom Order Form</title>
<meta name="description" content="A custom order form for DTF Print & Press providing options for product types and print locations with dynamic pricing.">
<meta name="keywords" content="DTF Print, Custom Order Form, T-Shirt, Polo, Fleece, Cap, Print Location Pricing, Quantity Slider">
<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() {
const productPrices = {
"T-Shirt": 0,
"Polo": 1,
"Fleece": 2,
"Cap": 3
};
const printLocationPrices = {
"N/A": 0,
"Left Front Chest": 1,
"Right Front Chest": 1,
"Full Front": 2,
"Full Back": 2
};
$('#quantity-slider').on('input change', function() {
const quantity = Math.max(1, $(this).val());
$('#quantity').val(quantity);
updateTotal();
});
$('#product-type').change(updateTotal);
$('#print-loc1').change(updateTotal);
$('#print-loc2').change(updateTotal);
$('#print-loc3').change(updateTotal);
$('#print-loc4').change(updateTotal);
$('#quantity').on('input change', function() {
const value = Math.max(1, $(this).val());
$('#quantity-slider').val(value);
updateTotal();
});
function updateTotal() {
const quantity = Math.max(1, $('#quantity').val());
const productPrice = productPrices[$('#product-type').val()];
const printPrice1 = printLocationPrices[$('#print-loc1').val()];
const printPrice2 = printLocationPrices[$('#print-loc2').val()];
const printPrice3 = printLocationPrices[$('#print-loc3').val()];
const printPrice4 = printLocationPrices[$('#print-loc4').val()];
const total = quantity * (0.16 + productPrice + printPrice1 + printPrice2 + printPrice3 + printPrice4);
$('#total-price').text(`Total Price: $${total.toFixed(2)}`);
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #f0f8ff, #b0e0e6);
color: #333;
font-family: Arial, sans-serif;
}
#main-container {
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background-color: white;
}
h1 {
text-align: center;
color: #007bff;
}
.form-label {
font-weight: bold;
}
.slider {
width: 100%;
}
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>DTF Print & Press V26</h1>
<p class="text-center text-muted">Powered by SeaSide Silk Screening</p>
<div class="mb-3">
<label for="name-po" class="form-label">Name/PO Number</label>
<input type="text" class="form-control" id="name-po" placeholder="Enter your Name or PO Number">
</div>
<div class="mb-3">
<label for="quantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="quantity" min="1" value="1">
<input type="range" class="slider" id="quantity-slider" min="1" max="100" value="1">
<small class="form-text text-muted">Qty Price Breaks: 24, 36, 48, 72, 144, 288</small>
</div>
<input type="hidden" id="hidden-price" value="0.16">
<div class="mb-3">
<label for="product-type" class="form-label">Product Type</label>
<select class="form-select" id="product-type">
<option value="T-Shirt">T-Shirt - $0</option>
<option value="Polo">Polo - $1</option>
<option value="Fleece">Fleece - $2</option>
<option value="Cap">Cap - $3</option>
</select>
</div>
<div class="mb-3">
<label for="print-loc1" class="form-label">Print Location 1</label>
<select class="form-select" id="print-loc1">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="print-loc2" class="form-label">Print Location 2</label>
<select class="form-select" id="print-loc2">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="print-loc3" class="form-label">Print Location 3</label>
<select class="form-select" id="print-loc3">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="print-loc4" class="form-label">Print Location 4</label>
<select class="form-select" id="print-loc4">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<hr>
<div class="text-center">
<h4 id="total-price">Total Price: $0.00</h4>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!