Logo showcase

Embed

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">

<style>
  :root{
    --primary:#003594;
    --soft:#d9e1ef;
    --white:#ffffff;
    --text:#0b1220;
    --muted:#4b5563;
    --border:rgba(0,0,0,.10);
    --shadow:0 14px 38px rgba(0,0,0,.10);
    --radius:18px;
    --radius-sm:12px;
  }

  .nas-wrap{
    font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    padding:16px;
    background:linear-gradient(180deg,var(--soft),#ffffff);
  }

  .nas-card{
    max-width:720px;
    margin:0 auto;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    position:relative;
    overflow:hidden;
  }

  .nas-card:before{
    content:"";
    position:absolute;
    inset:-60px -60px auto auto;
    width:220px;height:220px;
    background:radial-gradient(circle at 30% 30%, rgba(0,53,148,.22), rgba(0,53,148,0) 70%);
    pointer-events:none;
  }

  .nas-title{margin:0 0 6px;font-size:22px;font-weight:800;color:var(--text);}
  .nas-sub{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.4;}

  .nas-form{display:grid;gap:12px;}
  .nas-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  .nas-field label{
    display:block;
    font-size:12px;
    font-weight:800;
    margin:0 0 4px;
    color:var(--text);
  }

  .nas-field input,
  .nas-field select,
  .nas-field textarea{
    width:100%;
    padding:11px 12px;
    border-radius:var(--radius-sm);
    border:1px solid rgba(0,53,148,.25);
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    background:#fff;
    font-family:inherit;
  }

  .nas-field textarea{min-height:92px; resize:vertical;}

  .nas-field input:focus,
  .nas-field select:focus,
  .nas-field textarea:focus{
    border-color:rgba(0,53,148,.65);
    box-shadow:0 0 0 3px rgba(0,53,148,.12);
  }

  .nas-btn{
    border:1px solid var(--primary);
    background:var(--primary);
    color:#ffffff;
    font-weight:900;
    padding:12px 16px;
    border-radius:14px;
    cursor:pointer;
  }
  .nas-btn:disabled{opacity:.7; cursor:not-allowed;}

  .nas-note{font-size:12px;color:var(--muted);line-height:1.4;margin:0;}
  .nas-hp{position:absolute;left:-9999px;top:-9999px;}

  .nas-error{
    display:none;
    border:1px solid rgba(176,0,32,.25);
    background:rgba(176,0,32,.06);
    color:#b00020;
    border-radius:14px;
    padding:10px 12px;
    font-weight:800;
    font-size:13px;
    line-height:1.35;
    margin-bottom:6px;
  }

  /* THANK YOU SECTION styles */
  .nas-thanks{display:none;}

  .nas-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,53,148,.10);
    color:var(--primary);
    font-weight:900;
    font-size:12px;
    letter-spacing:.2px;
    margin-bottom:10px;
  }

  .nas-thanks-title{margin:0 0 6px;font-size:24px;font-weight:900;color:var(--text);line-height:1.15;}
  .nas-thanks-sub{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.45;}

  .nas-steps{
    border:1px solid rgba(0,53,148,.18);
    background:rgba(217,225,239,.45);
    border-radius:var(--radius);
    padding:14px;
    display:grid;
    gap:10px;
  }

  .nas-step{display:flex;gap:10px;align-items:flex-start;}
  .nas-num{
    width:28px;height:28px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary);color:#fff;font-weight:900;font-size:13px;
    flex:0 0 28px;margin-top:1px;
  }
  .nas-step strong{display:block;color:var(--text);font-weight:900;font-size:13px;margin-bottom:2px;}
  .nas-step span{display:block;color:var(--muted);font-size:12px;line-height:1.4;}

  .nas-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:14px;
  }
  .nas-linkbtn{
    text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    font-weight:900;
    padding:12px 16px;
    border-radius:14px;
  }

  /* Delivery section helper */
  .nas-section-title{
    margin:6px 0 -4px;
    font-size:12px;
    font-weight:900;
    color:var(--text);
    letter-spacing:.2px;
  }

  .nas-hint{
    font-size:12px;
    color:var(--muted);
    margin:-6px 0 0;
    line-height:1.35;
  }

  @media(max-width:720px){
    .nas-row{grid-template-columns:1fr;}
    .nas-thanks-title{font-size:22px;}
  }
</style>

<div class="nas-wrap">
  <div class="nas-card">

    
    <div id="nasFormSection">
      <h3 class="nas-title">Material Quotation Request Form</h3>
      <p class="nas-sub">
        Share material details and quantity—our team will confirm availability, pricing, and next steps.
      </p>

      <div id="nasError" class="nas-error"></div>

      <form id="nasQuoteForm" class="nas-form" action="https://formspree.io/f/mlgdyvbo" method="POST">
        
        <input type="hidden" name="_redirect" value="https://northamericansupply.durablesites.com/thank-you">

        
        <div class="nas-hp" aria-hidden="true">
          <label>Website</label>
          <input type="text" name="_gotcha" tabindex="-1" autocomplete="off">
        </div>

        <input type="hidden" name="_subject" value="Material Quote – North American Supply">
        <input type="hidden" name="request_type" value="Material Quote">

        
        <div class="nas-row">
          <div class="nas-field">
            <label>Company Name (optional)</label>
            <input type="text" name="company_name">
          </div>
          <div class="nas-field">
            <label>Contact Name *</label>
            <input type="text" name="contact_name" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Email *</label>
            <input type="email" name="email" required>
          </div>
          <div class="nas-field">
            <label>Phone *</label>
            <input type="tel" name="phone" required>
          </div>
        </div>

        
        <div class="nas-row">
          <div class="nas-field">
            <label>Material Category *</label>
            <select name="material_category" required>
              <option value="">Select category</option>
              <option value="Fencing Materials">Fencing Materials</option>
              <option value="Flooring Materials">Flooring Materials</option>
              <option value="Roofing Materials">Roofing Materials</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <div class="nas-field">
            <label>Material Needed *</label>
            <input type="text" name="material_needed" placeholder="e.g., Black steel panels / Vinyl fence panels / LVP flooring / Shingles" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Quantity *</label>
            <input type="number" name="quantity" min="1" step="1" required>
          </div>

          <div class="nas-field">
            <label>Unit *</label>
            <select name="unit" required>
              <option value="">Select unit</option>
              <option value="Panels">Panels</option>
              <option value="Posts">Posts</option>
              <option value="Linear Feet">Linear Feet</option>
              <option value="Square Feet">Square Feet</option>
              <option value="Boxes">Boxes</option>
              <option value="Bundles">Bundles</option>
              <option value="Sheets">Sheets</option>
              <option value="Pieces">Pieces</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>

        <div class="nas-field">
          <label>Specs / Notes (optional)</label>
          <textarea name="specs_notes" placeholder="Add size, color, thickness, brand preference, deadlines, jobsite constraints, etc."></textarea>
        </div>

        
        <div class="nas-row">
          <div class="nas-field">
            <label>Delivery Method *</label>
            <select id="nasDeliveryMethod" name="delivery_method" required>
              <option value="">Select option</option>
              <option value="Delivery">Delivery</option>
              <option value="Pickup">Pickup</option>
            </select>
          </div>

          <div class="nas-field">
            <label>Requested Date (optional)</label>
            <input type="text" name="requested_date" placeholder="e.g., Jan 20, 2026">
          </div>
        </div>

        <div class="nas-section-title" id="nasLocationTitle">Delivery Address</div>
        <p class="nas-hint" id="nasLocationHint">If you selected <strong>Delivery</strong>, please provide the full jobsite address.</p>

        
        <div id="nasLocationFields">
          <div class="nas-field">
            <label>Street Address *</label>
            <input id="nasStreet" type="text" name="street_address" placeholder="1234 Industrial Way" autocomplete="street-address" required>
          </div>

          <div class="nas-row">
            <div class="nas-field">
              <label>City *</label>
              <input id="nasCity" type="text" name="city" required>
            </div>
            <div class="nas-field">
              <label>Province *</label>
              <input id="nasProvince" type="text" name="province" value="BC" required>
            </div>
          </div>

          <div class="nas-row">
            <div class="nas-field">
              <label>Postal Code *</label>
              <input id="nasPostal" type="text" name="postal_code" required>
            </div>
            <div class="nas-field">
              <label>Site Contact (optional)</label>
              <input type="text" name="site_contact" placeholder="Name / phone for delivery coordination">
            </div>
          </div>
        </div>

        <button id="nasSubmitBtn" class="nas-btn" type="submit">Submit Material Quote Request</button>

        <p class="nas-note">
          Questions? <strong>service@northamericansupply.ca</strong>
        </p>
      </form>
    </div>

    
    <div id="nasThanksSection" class="nas-thanks">
      <div class="nas-badge">✅ Request Received</div>

      <h3 class="nas-thanks-title">Nice work — you just moved your project forward.</h3>
      <p class="nas-thanks-sub">
        Your material quote request is in. That’s the “go” button most people never press.
        You’ve officially started the process—and we’ve got you from here.
      </p>

      <div class="nas-steps">
        <div class="nas-step">
          <div class="nas-num">1</div>
          <div>
            <strong>We confirm availability</strong>
            <span>We check stock, lead times, and the right product match for your specs.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">2</div>
          <div>
            <strong>We price it properly</strong>
            <span>Clear pricing and the best options for your timeline and quantity.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">3</div>
          <div>
            <strong>We coordinate delivery or pickup</strong>
            <span>So everything shows up when and where you need it—without stress.</span>
          </div>
        </div>
      </div>

      <div class="nas-actions">
        <a class="nas-linkbtn" href="/">Back to Home</a>
      </div>

      <p class="nas-note" style="margin-top:10px;">
        Want the most accurate quote? Reply to the confirmation email with a product list, drawings, or photos.
        Need us now? <strong>service@northamericansupply.ca</strong>
      </p>
    </div>

  </div>
</div>

<script>
  (function () {
    const form = document.getElementById("nasQuoteForm");
    const formSection = document.getElementById("nasFormSection");
    const thanksSection = document.getElementById("nasThanksSection");
    const errorBox = document.getElementById("nasError");
    const submitBtn = document.getElementById("nasSubmitBtn");

    const deliveryMethod = document.getElementById("nasDeliveryMethod");
    const locationTitle = document.getElementById("nasLocationTitle");
    const locationHint = document.getElementById("nasLocationHint");

    const street = document.getElementById("nasStreet");
    const city = document.getElementById("nasCity");
    const province = document.getElementById("nasProvince");
    const postal = document.getElementById("nasPostal");

    function setAddressRequired(isRequired){
      [street, city, province, postal].forEach(el => {
        if (!el) return;
        if (isRequired) el.setAttribute("required", "required");
        else el.removeAttribute("required");
      });
    }

    function updateDeliveryUI(){
      const val = (deliveryMethod && deliveryMethod.value) ? deliveryMethod.value : "";
      const isDelivery = (val === "Delivery");

      if (locationTitle) locationTitle.textContent = isDelivery ? "Delivery Address" : "Delivery Details";
      if (locationHint) {
        locationHint.innerHTML = isDelivery
          ? 'If you selected <strong>Delivery</strong>, please provide the full jobsite address.'
          : 'If you selected <strong>Pickup</strong>, you can leave the address blank (we’ll coordinate pickup details by email/phone).';
      }

      // Require address for Delivery only
      setAddressRequired(isDelivery);
    }

    function showError(msg){
      errorBox.textContent = msg;
      errorBox.style.display = "block";
    }

    if (deliveryMethod) {
      deliveryMethod.addEventListener("change", updateDeliveryUI);
      updateDeliveryUI();
    }

    // Inline confirmation (if scripts are allowed). If scripts are blocked, Formspree will redirect using _redirect.
    form.addEventListener("submit", async function (e) {
      e.preventDefault();
      errorBox.style.display = "none";
      submitBtn.disabled = true;

      try {
        const formData = new FormData(form);

        const res = await fetch(form.action, {
          method: "POST",
          body: formData,
          headers: { "Accept": "application/json" }
        });

        if (res.ok) {
          formSection.style.display = "none";
          thanksSection.style.display = "block";
          thanksSection.scrollIntoView({ behavior: "smooth", block: "start" });
          form.reset();
          if (deliveryMethod) updateDeliveryUI();
        } else {
          let data = {};
          try { data = await res.json(); } catch(_) {}
          showError(data?.errors?.[0]?.message || "Something went wrong. Please try again or email service@northamericansupply.ca.");
          submitBtn.disabled = false;
        }
      } catch (err) {
        showError("Network error. Please try again or email service@northamericansupply.ca.");
        submitBtn.disabled = false;
      }
    });
  })();
</script>

Text + image

<h2 style="text-align:center">North American Supply Satisfaction Guarantee</h2>
<p style="text-align:center">At North American Supply, we stand behind the quality of the products we supply and the workmanship of every installation we support. From materials to final installation, your satisfaction is our priority.</p>
<p style="text-align:center">We are committed to providing dependable products, clear communication, and professional service at every stage of your project. If there is a concern with the materials supplied or the installation performed, we will work with you promptly and fairly to resolve it.</p>
<p style="text-align:center">Our job isn’t complete until the materials meet our standards and the finished result meets yours.</p>