Contact Us

Testimonials

★ ★ ★ ★ ★

Average Rating: 4.5/5 (based on 100+ reviews)

Excellent

I had an excellent experience with this company. The team was professional and the quality of their work was

★ ★ ★ ★ ★

Sarah Thompson

Highly Recommend

I highly recommend this company for cabinet refacing. They did an amazing job transforming my kitchen

★ ★ ★ ★ ★

John Doe

Amazing Service

I recently had my kitchen cabinets refaced by this company and I am extremely satisfied with the results. The team was professional, efficient, and the quality of their work exceeded my expectations. I highly recommend their services.

★ ★ ★ ★ ★

Jane Smith

Great Experience

I had a great experience working with this company. The staff was friendly and knowledgeable, and they helped me design the perfect kitchen cabinets for my home. The installation process was smooth and the end result

★ ★ ★ ★ ★

Mike Johnson

Uncategorized
Hello world!
KCLCONSULTINGLLC.CO
•
November 7, 2024

Recent Posts

<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