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;
  }

  .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">Installation Quotation Request Form</h3>
      <p class="nas-sub">
        Share your project details and site address—our team will follow up with a clear installation quote 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="Installation Quote – North American Supply">
        <input type="hidden" name="request_type" value="Installation 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>Service Type *</label>
            <select name="service_type" required>
              <option value="">Select service</option>
              <option value="Fencing Installation">Fencing Installation</option>
              <option value="Flooring Installation">Flooring Installation</option>
              <option value="Roofing Installation">Roofing Installation</option>
              <option value="Multiple Services">Multiple Services</option>
            </select>
          </div>

          <div class="nas-field">
            <label>Install Type *</label>
            <select name="install_type" required>
              <option value="">Select type</option>
              <option value="New Install">New Install</option>
              <option value="Replacement">Replacement</option>
              <option value="Repair">Repair</option>
              <option value="Not Sure Yet">Not sure yet</option>
            </select>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Estimated Project Size *</label>
            <input type="text" name="project_size" placeholder="e.g., 250 linear ft / 1,200 sq ft / 32 squares" required>
          </div>

          <div class="nas-field">
            <label>Timeline (optional)</label>
            <select name="timeline">
              <option value="">Select timeline</option>
              <option value="ASAP">ASAP</option>
              <option value="2–4 Weeks">2–4 Weeks</option>
              <option value="1–2 Months">1–2 Months</option>
              <option value="3+ Months">3+ Months</option>
            </select>
          </div>
        </div>

        <div class="nas-field">
          <label>Project Notes (optional)</label>
          <textarea name="project_notes" placeholder="Add any details that help (materials, access, stairs, tear-off needed, gates, site constraints, etc.)"></textarea>
        </div>

        
        <div class="nas-section-title">Project Address (Required)</div>
        <p class="nas-hint">Installation includes delivery coordination—please provide the full jobsite address.</p>

        <div class="nas-field">
          <label>Street Address *</label>
          <input 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 type="text" name="city" required>
          </div>
          <div class="nas-field">
            <label>Province *</label>
            <input type="text" name="province" value="BC" required>
          </div>
        </div>

        <div class="nas-row">
          <div class="nas-field">
            <label>Postal Code *</label>
            <input 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 site coordination">
          </div>
        </div>

        <button id="nasSubmitBtn" class="nas-btn" type="submit">Submit Installation 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">That was the hard part — you started.</h3>
      <p class="nas-thanks-sub">
        Your installation quote request is in. Most projects don’t move forward because nobody takes the first step.
        You did — and now we’ll turn your plan into a clear, actionable next move.
      </p>

      <div class="nas-steps">
        <div class="nas-step">
          <div class="nas-num">1</div>
          <div>
            <strong>We review site + scope</strong>
            <span>We confirm measurements, access, and any special requirements.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">2</div>
          <div>
            <strong>We provide a clear installation quote</strong>
            <span>Transparent pricing and the best approach for your timeline.</span>
          </div>
        </div>

        <div class="nas-step">
          <div class="nas-num">3</div>
          <div>
            <strong>We schedule the next step</strong>
            <span>From site visit to installation date—whatever your project needs.</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 photos, drawings, or measurements.
        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");

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

    // 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();
        } 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>