Embed

<div class="cdc-quote" id="cdcQuote">
  <div class="cdc-card">
    <header class="cdc-head">
      <h2>Instant Concrete Imprint Quote</h2>
      <p>Flat rate: <strong>£120 per m²</strong>. Enter measurements below.</p>
    </header>

    <div class="cdc-grid">
      <label class="cdc-field">
        <span>Length (m)</span>
        <input id="cdcLength" type="number" inputmode="decimal" step="0.1" placeholder="e.g. 8">
      </label>

      <label class="cdc-field">
        <span>Width (m)</span>
        <input id="cdcWidth" type="number" inputmode="decimal" step="0.1" placeholder="e.g. 5">
      </label>

      <label class="cdc-field">
        <span>Or area (m²)</span>
        <input id="cdcArea" type="number" inputmode="decimal" step="0.1" placeholder="e.g. 40">
        <small class="cdc-help">If area is entered, it overrides length × width.</small>
      </label>
    </div>

    
    <div class="cdc-calc">
      <button class="cdc-btn cdc-btn--outline" type="button" id="cdcCalcBtn">
        Calculate Quote
      </button>
    </div>

    <div class="cdc-result">
      <div class="cdc-label">Estimated Cost</div>
      <div class="cdc-price" id="cdcPrice">£0</div>
      <div class="cdc-sub" id="cdcSub">Enter measurements to calculate.</div>

      <div class="cdc-cta">
        <button class="cdc-btn cdc-btn--full" id="cdcSecureBtn" type="button">
          Secure Quote Now
        </button>
      </div>
    </div>

    <div class="cdc-note">
      Estimate only — final price confirmed after a quick check if required.
    </div>
  </div>

  
  <div class="cdc-modal" id="cdcModal" aria-hidden="true">
    <div class="cdc-modal__backdrop" id="cdcBackdrop"></div>

    <div class="cdc-modal__panel">
      <div class="cdc-modal__head">
        <div>
          <div class="cdc-modal__kicker">Secure your quote</div>
          <h3>Send your quote to WhatsApp</h3>
          <div class="cdc-modal__meta" id="cdcMeta"></div>
        </div>
        <button class="cdc-x" id="cdcClose">✕</button>
      </div>

      <form class="cdc-form" id="cdcForm">
        <div class="cdc-form__grid">
          <input id="cdcName" required placeholder="Name *">
          <input id="cdcPhone" required placeholder="Mobile *">
          <input id="cdcEmail" placeholder="Email (optional)">
          <input id="cdcPostcode" required placeholder="Postcode *">
        </div>

        <label class="cdc-check">
          <input id="cdcConsent" type="checkbox" required>
          <span>I agree to be contacted about my quote.</span>
        </label>

        <button class="cdc-btn cdc-btn--full cdc-btn--dark" type="submit">
          Open WhatsApp & Send
        </button>
      </form>
    </div>
  </div>
</div>

<style>
:root{
  --green:#007b5e;
  --dark:#0f1a17;
  --border:#d8e3e0;
  --bg:#F2F5F5;
}
.cdc-quote{font-family:system-ui;color:var(--dark);}
.cdc-card{max-width:760px;margin:auto;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.cdc-head{padding:22px;background:linear-gradient(180deg,var(--bg),#fff)}
.cdc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px}
.cdc-field span{font-size:13px;color:#666}
.cdc-field input{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px}
.cdc-help{font-size:12px;color:#777}
.cdc-calc{padding:0 18px 10px}
.cdc-result{border-top:1px solid var(--border);padding:18px}
.cdc-label{font-size:13px;color:#666}
.cdc-price{font-size:38px;font-weight:900}
.cdc-sub{font-size:13px;color:#666}
.cdc-btn{border:none;border-radius:999px;padding:12px;font-weight:800;cursor:pointer}
.cdc-btn--full{width:100%;background:var(--green);color:#fff}
.cdc-btn--outline{width:100%;background:#fff;border:2px solid var(--green);color:var(--green)}
.cdc-btn--dark{background:var(--dark);color:#fff}
.cdc-note{padding:14px 18px;font-size:13px;color:#666}

.cdc-modal{position:fixed;inset:0;display:none;z-index:99999}
.cdc-modal[aria-hidden="false"]{display:block}
.cdc-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.cdc-modal__panel{position:relative;margin:8vh auto;background:#fff;max-width:720px;border-radius:16px;overflow:hidden}
.cdc-modal__head{padding:16px;background:var(--bg);display:flex;justify-content:space-between}
.cdc-x{border:none;background:#fff;font-size:18px;cursor:pointer}
.cdc-form{padding:18px}
.cdc-form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cdc-form input{padding:12px;border:1px solid var(--border);border-radius:10px}
.cdc-check{margin:12px 0;font-size:13px;color:#666}

@media(max-width:800px){
  .cdc-grid,.cdc-form__grid{grid-template-columns:1fr}
}
</style>

<script>
(function(){
  var RATE=120, WA="447846966871";

  function num(id){return parseFloat(document.getElementById(id).value)||0}
  function gbp(n){return n>0?new Intl.NumberFormat("en-GB",{style:"currency",currency:"GBP",maximumFractionDigits:0}).format(n):"£0"}

  function calc(){
    var L=num("cdcLength"), W=num("cdcWidth"), A=num("cdcArea");
    var area=A>0?A:(L>0&&W>0?L*W:0);
    var total=area*RATE;
    document.getElementById("cdcPrice").textContent=gbp(total);
    document.getElementById("cdcSub").textContent=area>0?area.toFixed(1)+" m² × £120/m²":"Enter measurements to calculate.";
    return {area,total};
  }

  ["cdcLength","cdcWidth","cdcArea"].forEach(id=>{
    document.getElementById(id).addEventListener("input",calc);
  });

  document.getElementById("cdcCalcBtn").onclick=calc;

  document.getElementById("cdcSecureBtn").onclick=function(){
    var r=calc();
    if(r.area<=0){alert("Please calculate your quote first.");return;}
    document.getElementById("cdcMeta").textContent="Estimated Cost: "+gbp(r.total);
    document.getElementById("cdcModal").setAttribute("aria-hidden","false");
  };

  document.getElementById("cdcClose").onclick=
  document.getElementById("cdcBackdrop").onclick=function(){
    document.getElementById("cdcModal").setAttribute("aria-hidden","true");
  };

  document.getElementById("cdcForm").onsubmit=function(e){
    e.preventDefault();
    var r=calc();
    var msg=`Concrete Imprint Quote%0AName: ${cdcName.value}%0AMobile: ${cdcPhone.value}%0APostcode: ${cdcPostcode.value}%0AArea: ${r.area.toFixed(1)} m²%0AEstimated Cost: ${gbp(r.total)}`;
    window.open("https://wa.me/"+WA+"?text="+encodeURIComponent(msg),"_blank");
    document.getElementById("cdcModal").setAttribute("aria-hidden","true");
  };
})();
</script>

The concrete driveway company

The Concrete Driveway Company specialises in premium imprinted concrete driveways and patios across Cardiff and the surrounding areas. We deliver fast turnaround times, clear upfront pricing, and high-quality installations built to last. Our imprinted concrete is durable, stylish, weed-resistant, and fully customisable with a wide range of colours and patterns. Alongside driveways and patios, we also offer general landscaping services, including fencing, turfing, groundworks and garden transformations. Reliable, professional and focused on quality—your home is in safe hands.