DTF Print & Press V26
About this app
Customized order form for DTF Print & Press, featuring product selections and pricing information.
DTF Print & Press V26 DTF Print & Press Order Form Name/PO Number (max 40 chars): Quantity: Product Type: T-Shirt - $0 Polo - $1 Fleece - $2 Cap - $3 Print Location 1: None Front - $0 Back - $1 Sleeve - $2 Print Location 2: None Front - $0 Back - $1 Sleeve - $2 Print Location 3: None Front - $0 Back - $1 Sleeve - $2 Print Location 4: None Front - $0 Back - $1 Sleeve - $2 Total Price: $0.00 Submit Order
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</title>
<meta name="description" content="Customized order form for DTF Print & Press, featuring product selections and pricing information.">
<meta name="keywords" content="DTF Print, Press, Order Form, Product Type, Print Location, Custom Prints, Apparel">
<!-- 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() {
// price calculation function
let productPrices = {
"T-Shirt": 0,
"Polo": 1,
"Fleece": 2,
"Cap": 3
};
let printPrices = {
"Front": 0,
"Back": 1,
"Sleeve": 2,
"None": 0
};
// Get selected values and calculate the total
function calculateTotal() {
let productType = $("#productType").val();
let quantities = parseInt($("#quantity").val());
let total = productPrices[productType] * quantities;
$('select[name^="printLocation"]').each(function() {
total += printPrices[$(this).val()] * quantities;
});
$("#totalPrice").text("Total Price: $" + total.toFixed(2));
}
// Bind change events to calculate total dynamically
$("select").on("change", calculateTotal);
$("#quantity").on("input", calculateTotal);
});
} catch (error) {
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
padding: 20px;
font-family: 'Arial', sans-serif;
}
#main-container {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h2 {
color: #ffcc00;
}
label {
font-weight: bold;
}
.slider {
margin: 15px 0;
}
.total-price {
font-size: 20px;
font-weight: bold;
color: #ffcc00;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h2>DTF Print & Press Order Form</h2>
<form>
<div class="mb-3">
<label for="namePONumber" class="form-label">Name/PO Number (max 40 chars):</label>
<input type="text" class="form-control" id="namePONumber" maxlength="40" required>
</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" required>
<input type="range" class="slider" id="quantity-slider" min="1" max="100" value="1">
</div>
<div class="mb-3">
<label for="productType" class="form-label">Product Type:</label>
<select id="productType" class="form-select" required>
<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="printLocation1" class="form-label">Print Location 1:</label>
<select name="printLocation1" class="form-select" required>
<option value="None">None</option>
<option value="Front">Front - $0</option>
<option value="Back">Back - $1</option>
<option value="Sleeve">Sleeve - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation2" class="form-label">Print Location 2:</label>
<select name="printLocation2" class="form-select" required>
<option value="None">None</option>
<option value="Front">Front - $0</option>
<option value="Back">Back - $1</option>
<option value="Sleeve">Sleeve - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation3" class="form-label">Print Location 3:</label>
<select name="printLocation3" class="form-select" required>
<option value="None">None</option>
<option value="Front">Front - $0</option>
<option value="Back">Back - $1</option>
<option value="Sleeve">Sleeve - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation4" class="form-label">Print Location 4:</label>
<select name="printLocation4" class="form-select" required>
<option value="None">None</option>
<option value="Front">Front - $0</option>
<option value="Back">Back - $1</option>
<option value="Sleeve">Sleeve - $2</option>
</select>
</div>
<div class="total-price" id="totalPrice">Total Price: $0.00</div>
<button type="submit" class="btn btn-warning mt-3">Submit Order</button>
</form>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!