Order

Professional Cabinet Quote System

Cabinet & Repairs Professional Quote System

Quality Custom Cabinetry Solutions

Contact: KCL@cabinetnrepairs.com | Phone: (Your Phone Number)

Quote Date:

Project Configuration

Cabinet Grade Selection

Finish Selection

Delivery Options

Pickup – FREE Delivery – $150 minimum plus $12.50 each cabinet

Custom Paint Color – $350 + $10 per cabinet

Customer Information

Cabinet Selection

Line	Cabinet Name	Qty	List Price	Your Cost	Total	Action

Accessories

Line	Accessory Name	Qty	List Price	Your Cost	Total	Action

Investment Summary

Cabinet Subtotal: $0.00

Accessory Subtotal: $0.00

Delivery Cost: $0.00

Custom Paint: $0.00

Grand Total: $0.00

Terms & Conditions

• Quote valid for 30 days
• 50% deposit required to begin production
• Lead time: 4-6 weeks from deposit receipt
• Installation available at additional cost
• All prices subject to material availability

Quote Actions

Instructions for Bluehost

• Save this file as “cabinet-quote.html”
• Upload to your public_html folder
• Access at: yourwebsite.com/cabinet-quote.html
• Use browser’s print function for PDF export

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Cabinet Order Form</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; }
    .container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    h1 { text-align: center; font-size: 24px; margin-bottom: 20px; }
    .form-group { margin-bottom: 15px; }
    label { display: block; font-size: 16px; margin-bottom: 5px; }
    select, input[type="text"], input[type="email"], input[type="tel"] { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
    button { width: 100%; padding: 10px; background-color: #007AFF; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 10px; }
    button:disabled { background-color: #aaa; cursor: not-allowed; }
    .item { background-color: #f9f9f9; padding: 10px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
    .item-text { font-size: 16px; flex: 1; }
    .item-actions { display: flex; gap: 10px; }
    .item-actions button { width: auto; padding: 5px 10px; font-size: 14px; }
    .summary { margin-bottom: 20px; }
    .confirmation { text-align: center; }
    .confirmation p { font-size: 18px; margin-bottom: 10px; }
    .hidden { display: none; }
    @media print { body { background-color: #fff; } .container:not(#summary-screen) { display: none; } button { display: none; } .item-actions { display: none; } #summary-screen { box-shadow: none; padding: 0; } }
  </style>
</head>
<body>
  <div class="container" id="form-screen">
    <h1>Custom Cabinet Order</h1>
    <div class="form-group">
      <label>Type</label>
      <select id="type" onchange="updateConditionalFields()">
        <option value="Door">Door</option>
        <option value="Drawer">Drawer</option>
      </select>
    </div>
    <div class="form-group" id="door-position-group">
      <label>Door Position</label>
      <select id="door-position">
        <option value="">Select position</option>
        <option value="Upper">Upper Door</option>
        <option value="Lower">Lower Door</option>
      </select>
    </div>
    <div class="form-group">
      <label>Style</label>
      <select id="style">
        <option value="">Select style</option>
        <option value="Shaker Door">Shaker Door</option>
        <option value="Raised Panel Door">Raised Panel Door</option>
        <option value="Slab Door">Slab Door</option>
      </select>
    </div>
    <div class="form-group">
      <label>Finish</label>
      <select id="finish" onchange="updateConditionalFields()">
        <option value="">Select finish</option>
        <option value="Painted Wood">Painted Wood</option>
        <option value="Laminate">Laminate</option>
      </select>
    </div>
    <div class="form-group" id="paint-color-group">
      <label>Paint Color</label>
      <select id="paint-color">
        <option value="">Select color</option>
        <option value="White">White</option>
        <option value="Gray">Gray</option>
        <option value="Black">Black</option>
      </select>
    </div>
    <div class="form-group">
      <label>Width (inches)</label>
      <select id="width"></select>
    </div>
    <div class="form-group">
      <label>Height (inches)</label>
      <select id="height"></select>
    </div>
    <div class="form-group">
      <label>Quantity</label>
      <select id="quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <button onclick="addItem()">Add Item</button>
    <button onclick="showSummary()" id="summary-btn" disabled>View Order Summary</button>
  </div>

  <div class="container" id="summary-screen" style="display: none;">
    <h1>Order Summary</h1>
    <div id="order-items" class="summary"></div>
    <div class="form-group">
      <label>Your Name</label>
      <input type="text" id="customer-name" placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label>Your Phone Number</label>
      <input type="tel" id="customer-phone" placeholder="Enter your phone number">
    </div>
    <div class="form-group">
      <label>Your Email</label>
      <input type="email" id="customer-email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label>Job Site Address</label>
      <input type="text" id="job-site-address" placeholder="Enter job site address">
    </div>
    <button onclick="sendOrder()">Send Order</button>
    <button onclick="copySummary()">Copy Summary</button>
    <button onclick="printSummary()">Print Summary</button>
    <button onclick="backToForm()">Back to Form</button>
  </div>

  <div class="container" id="confirmation-screen" style="display: none;">
    <h1>Order Confirmed!</h1>
    <div class="confirmation">
      <p id="confirmation-message"></p>
      <p>Order sent to KCL@cabinetnrepairs.com.</p>
      <p>Check your email for confirmation.</p>
    </div>
    <button onclick="startNewOrder()">Start New Order</button>
    <button onclick="retrySendOrder()" id="retry-btn" style="display: none;">Retry Sending</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
  <script>
    let orders = [];
    let lastTemplateParams = null;

    // Function to convert decimal to US tape measure fraction
    function toFraction(inches) {
      const whole = Math.floor(inches);
      const fraction = inches - whole;
      const sixteenths = Math.round(fraction * 16);
      if (sixteenths === 0) return `${whole}`;
      if (sixteenths === 16) return `${whole + 1}`;
      if (sixteenths === 8) return `${whole} 1/2`;
      if (sixteenths === 4) return `${whole} 1/4`;
      if (sixteenths === 12) return `${whole} 3/4`;
      if (sixteenths === 2) return `${whole} 1/8`;
      if (sixteenths === 6) return `${whole} 3/8`;
      if (sixteenths === 10) return `${whole} 5/8`;
      if (sixteenths === 14) return `${whole} 7/8`;
      return `${whole} ${sixteenths}/16`;
    }

    // Generate width options (12" to 36" in 1/16" increments)
    const widthSelect = document.getElementById('width');
    for (let i = 12; i <= 36; i += 1/16) {
      const option = document.createElement('option');
      option.value = i.toFixed(4);
      option.textContent = toFraction(i);
      widthSelect.appendChild(option);
    }
    widthSelect.value = '';

    // Generate height options (18" to 48" in 1/16" increments)
    const heightSelect = document.getElementById('height');
    for (let i = 18; i <= 48; i += 1/16) {
      const option = document.createElement('option');
      option.value = i.toFixed(4);
      option.textContent = toFraction(i);
      heightSelect.appendChild(option);
    }
    heightSelect.value = '';

    // Update visibility of conditional fields
    function updateConditionalFields() {
      const type = document.getElementById('type').value;
      const finish = document.getElementById('finish').value;
      const doorPositionGroup = document.getElementById('door-position-group');
      const paintColorGroup = document.getElementById('paint-color-group');
      doorPositionGroup.classList.toggle('hidden', type !== 'Door');
      paintColorGroup.classList.toggle('hidden', finish !== 'Painted Wood');
      if (type !== 'Door') document.getElementById('door-position').value = '';
      if (finish !== 'Painted Wood') document.getElementById('paint-color').value = '';
    }

    // Initialize conditional fields
    updateConditionalFields();

    function addItem() {
      const type = document.getElementById('type').value;
      const doorPosition = document.getElementById('door-position').value;
      const style = document.getElementById('style').value;
      const finish = document.getElementById('finish').value;
      const paintColor = document.getElementById('paint-color').value;
      const width = document.getElementById('width').value;
      const height = document.getElementById('height').value;
      const quantity = document.getElementById('quantity').value;

      if (!style || !finish || !width || !height || (type === 'Door' && !doorPosition) || (finish === 'Painted Wood' && !paintColor)) {
        alert('Please select all required fields.');
        return;
      }

      const item = {
        type,
        doorPosition: type === 'Door' ? doorPosition : '',
        style,
        finish,
        paintColor: finish === 'Painted Wood' ? paintColor : '',
        width: parseFloat(width),
        height: parseFloat(height),
        quantity: parseInt(quantity)
      };
      orders.push(item);

      document.getElementById('style').value = '';
      document.getElementById('finish').value = '';
      document.getElementById('paint-color').value = '';
      document.getElementById('door-position').value = '';
      document.getElementById('width').value = '';
      document.getElementById('height').value = '';
      document.getElementById('quantity').value = '1';
      document.getElementById('summary-btn').disabled = false;

      updateConditionalFields();
      alert('Item added. Add another or view summary.');
    }

    function showSummary() {
      const orderItems = document.getElementById('order-items');
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      orderItems.innerHTML = orders.map((item, index) => `
        <div class="item">
          <p class="item-text">
            Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, 
            Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, 
            ${toFraction(item.width)}" x ${toFraction(item.height)}", Quantity: ${item.quantity}
          </p>
          <div class="item-actions">
            <button onclick="editItem(${index})">Edit</button>
            <button onclick="deleteItem(${index})">Delete</button>
          </div>
        </div>
      `).join('');

      if (customerName || customerPhone || customerEmail || jobSiteAddress) {
        orderItems.innerHTML += `
          <div class="item">
            <p class="item-text">
              ${customerName ? 'Name: ' + customerName : ''}
              ${customerPhone ? '<br>Phone: ' + customerPhone : ''}
              ${customerEmail ? '<br>Email: ' + customerEmail : ''}
              ${jobSiteAddress ? '<br>Job Site Address: ' + jobSiteAddress : ''}
            </p>
          </div>
        `;
      }

      document.getElementById('form-screen').style.display = 'none';
      document.getElementById('summary-screen').style.display = 'block';
    }

    function editItem(index) {
      const item = orders[index];
      document.getElementById('type').value = item.type;
      document.getElementById('door-position').value = item.doorPosition;
      document.getElementById('style').value = item.style;
      document.getElementById('finish').value = item.finish;
      document.getElementById('paint-color').value = item.paintColor;
      document.getElementById('width').value = item.width.toFixed(4);
      document.getElementById('height').value = item.height.toFixed(4);
      document.getElementById('quantity').value = item.quantity.toString();
      orders.splice(index, 1);
      document.getElementById('summary-btn').disabled = orders.length === 0;
      updateConditionalFields();
      backToForm();
    }

    function deleteItem(index) {
      orders.splice(index, 1);
      showSummary();
      document.getElementById('summary-btn').disabled = orders.length === 0;
      if (orders.length === 0) backToForm();
    }

    function sendOrder() {
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      if (!customerName || !customerPhone || !customerEmail || !jobSiteAddress || orders.length === 0) {
        alert('Please provide your name, phone number, email, job site address, and at least one item.');
        return;
      }

      const orderSummary = orders.map((item, index) => (
        `Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, ` +
        `Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, ` +
        `Width: ${toFraction(item.width)}", Height: ${toFraction(item.height)}", Quantity: ${item.quantity}`
      )).join('\n');

      lastTemplateParams = {
        customer_name: customerName,
        customer_phone: customerPhone,
        customer_email: customerEmail,
        job_site_address: jobSiteAddress,
        order_summary: orderSummary,
        to_email: 'KCL@cabinetnrepairs.com',
      };

      emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', lastTemplateParams, 'YOUR_PUBLIC_KEY')
        .then(() => {
          document.getElementById('confirmation-message').textContent = `Thank you, ${customerName}!`;
          document.getElementById('summary-screen').style.display = 'none';
          document.getElementById('confirmation-screen').style.display = 'block';
          document.getElementById('retry-btn').style.display = 'none';
        })
        .catch((error) => {
          alert('Failed to send order. Please copy the summary or retry.');
          document.getElementById('retry-btn').style.display = 'block';
          console.error(error);
        });
    }

    function retrySendOrder() {
      if (lastTemplateParams) {
        emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', lastTemplateParams, 'YOUR_PUBLIC_KEY')
          .then(() => {
            document.getElementById('confirmation-message').textContent = `Thank you, ${lastTemplateParams.customer_name}!`;
            document.getElementById('retry-btn').style.display = 'none';
            alert('Order sent successfully!');
          })
          .catch((error) => {
            alert('Failed again. Please copy the summary.');
            console.error(error);
          });
      }
    }

    function copySummary() {
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      if (!customerName || !customerPhone || !customerEmail || !jobSiteAddress || orders.length === 0) {
        alert('Please provide your name, phone number, email, job site address, and at least one item.');
        return;
      }

      const orderSummary = orders.map((item, index) => (
        `Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, ` +
        `Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, ` +
        `Width: ${toFraction(item.width)}", Height: ${toFraction(item.height)}", Quantity: ${item.quantity}`
      )).join('\n');

      const fullSummary = [
        customerName ? `Name: ${customerName}` : '',
        customerPhone ? `Phone: ${customerPhone}` : '',
        customerEmail ? `Email: ${customerEmail}` : '',
        jobSiteAddress ? `Job Site Address: ${jobSiteAddress}` : '',
        orderSummary
      ].filter(line => line).join('\n');

      navigator.clipboard.writeText(fullSummary)
        .then(() => {
          document.getElementById('confirmation-message').textContent = `Thank you, ${customerName}!`;
          document.getElementById('summary-screen').style.display = 'none';
          document.getElementById('confirmation-screen').style.display = 'block';
        })
        .catch(() => alert('Failed to copy. Please manually copy the summary.'));
    }

    function printSummary() {
      window.print();
    }

    function backToForm() {
      document.getElementById('summary-screen').style.display = 'none';
      document.getElementById('form-screen').style.display = 'block';
    }

    function startNewOrder() {
      orders = [];
      document.getElementById('customer-name').value = '';
      document.getElementById('customer-phone').value = '';
      document.getElementById('customer-email').value = '';
      document.getElementById('job-site-address').value = '';
      document.getElementById('type').value = 'Door';
      document.getElementById('door-position').value = '';
      document.getElementById('style').value = '';
      document.getElementById('finish').value = '';
      document.getElementById('paint-color').value = '';
      document.getElementById('width').value = '';
      document.getElementById('height').value = '';
      document.getElementById('quantity').value = '1';
      document.getElementById('summary-btn').disabled = true;
      document.getElementById('confirmation-screen').style.display = 'none';
      document.getElementById('form-screen').style.display = 'block';
      updateConditionalFields();
    }
  </script>
</body>
</html>

TOP