Embed

<div class="quote-box">
  <h2>Instant Service Estimate</h2>
  <p>Select services to view an estimated price range. Request an official quote to receive confirmation.</p>

  <form id="quoteForm" action="https://formspree.io/f/xvzgedny" method="POST">

    
    <input type="hidden" name="_redirect" value="/">

    
    <input type="hidden" name="_subject" value="📋 New Official Quote Request">

    
    <h3>Customer Information</h3>
    <div class="row"><input required name="Name" placeholder="Full Name"></div>
    <div class="row"><input required type="email" name="Email" placeholder="Email Address"></div>
    <div class="row"><input required name="Phone" placeholder="Phone Number"></div>
    <div class="row"><input required name="Address" placeholder="Service Address"></div>

    
    <div class="row">
      <label>Property Type</label>
      <select id="propertyType">
        <option value="res">Residential</option>
        <option value="com">Commercial</option>
      </select>
    </div>

    
    <div class="row">
      <label>Service Term</label>
      <select id="term">
        <option value="one">One‑Time</option>
        <option value="annual">Annual Contract (Full Year)</option>
      </select>
    </div>

    
    <div class="row">
      <label>Contract Discount</label>
      <select id="discount">
        <option value="0">No Discount</option>
        <option value="0.10">Seasonal (10% Off)</option>
        <option value="0.15">Annual (15% Off)</option>
      </select>
    </div>

    
    <h3>Services</h3>

    <div class="service">
      <label><input type="checkbox" data-name="Lawn Mowing"
        data-res-min="65" data-res-max="145"
        data-com-min="120" data-com-max="260"
        data-annual-mult="32"> Lawn Mowing</label>
    </div>

    <div class="service">
      <label><input type="checkbox" data-name="Hedge & Shrub Trimming"
        data-res-min="75" data-res-max="150"
        data-com-min="150" data-com-max="300"
        data-annual-mult="2"> Hedge & Shrub Trimming</label>
    </div>

    <div class="service">
      <label><input type="checkbox" data-name="Spring / Fall Cleanup"
        data-res-min="125" data-res-max="250"
        data-com-min="250" data-com-max="500"
        data-annual-mult="2"> Spring / Fall Cleanup</label>
    </div>

    <div class="service">
      <label><input type="checkbox" data-name="Snow Plowing"
        data-res-min="60" data-res-max="120"
        data-com-min="150" data-com-max="400"
        data-annual-mult="9"> Snow Plowing</label>
    </div>

    <div class="service">
      <label><input type="checkbox" data-name="Salting / Ice Management"
        data-res-min="25" data-res-max="125"
        data-com-min="75" data-com-max="250"
        data-annual-mult="13"> Salting / Ice Management</label>
    </div>

    
    <div class="total-box">
      <p><strong>Selected Services:</strong></p>
      <ul id="serviceList"></ul>

      <p class="final">
        Estimated Price Range:<br>
        <strong id="range">$0 – $0</strong>
      </p>

      <p class="deposit">
        Estimated Deposit (10%):<br>
        <strong id="deposit">$0 – $0</strong>
      </p>
    </div>

    
    <input type="hidden" name="Selected Services" id="emailServices">
    <input type="hidden" name="Estimate Range" id="emailRange">
    <input type="hidden" name="Deposit Range" id="emailDeposit">
    <input type="hidden" name="Property Type" id="emailProperty">
    <input type="hidden" name="Service Term" id="emailTerm">
    <input type="hidden" name="Discount Applied" id="emailDiscount">

    <button type="submit">Request Official Quote</button>

  </form>
</div>

<style>
.quote-box{max-width:760px;margin:auto;background:#fff;padding:36px;border-radius:18px;
font-family:system-ui,sans-serif;box-shadow:0 20px 45px rgba(0,0,0,.08)}
.row{margin-bottom:14px}
input,select,button{width:100%;padding:12px;border-radius:10px;border:1px solid #d1d5db}
.service{background:#f4f6f5;padding:14px;border-radius:12px;margin-bottom:10px}
.total-box{background:#ecfdf5;padding:22px;border-radius:14px;margin-top:26px}
.final{font-size:20px;color:#166534}
.deposit{margin-top:10px}
button{background:#2f7d32;color:white;font-weight:600;border:none;margin-top:26px}
</style>

<script>
(function(){

  function initEstimator(){

    const form = document.getElementById("quoteForm");
    if(!form) return;

    const services = form.querySelectorAll(".service input");
    const type = form.querySelector("#propertyType");
    const term = form.querySelector("#term");
    const discount = form.querySelector("#discount");
    const list = form.querySelector("#serviceList");
    const range = form.querySelector("#range");
    const deposit = form.querySelector("#deposit");

    function update(){
      let min=0, max=0;
      list.innerHTML="";

      services.forEach(s=>{
        if(s.checked){

          const p = type.value==="res"?"res":"com";

          let sMin = Number(s.dataset[p+"Min"]);
          let sMax = Number(s.dataset[p+"Max"]);

          if(term.value==="annual"){
            const mult = Number(s.dataset.annualMult||1);
            sMin*=mult;
            sMax*=mult;
          }

          min+=sMin;
          max+=sMax;

          const li=document.createElement("li");
          li.textContent=s.dataset.name;
          list.appendChild(li);
        }
      });

      min -= min * Number(discount.value);
      max -= max * Number(discount.value);

      range.textContent=`$${Math.round(min)} – $${Math.round(max)}`;
      deposit.textContent=`$${Math.round(min*0.1)} – $${Math.round(max*0.1)}`;
    }

    form.addEventListener("change", update);

    form.addEventListener("submit", function(){

      const selected=[];
      services.forEach(s=>{
        if(s.checked) selected.push(s.dataset.name);
      });

      document.getElementById("emailServices").value=selected.join(", ");
      document.getElementById("emailRange").value=range.textContent;
      document.getElementById("emailDeposit").value=deposit.textContent;
      document.getElementById("emailProperty").value=
        type.value==="res"?"Residential":"Commercial";
      document.getElementById("emailTerm").value=
        term.value==="annual"?"Annual Contract":"One‑Time";
      document.getElementById("emailDiscount").value=
        discount.options[discount.selectedIndex].text;
    });

    update(); // runs immediately (no refresh needed)
  }

  if(document.readyState==="loading"){
    document.addEventListener("DOMContentLoaded", initEstimator);
  } else {
    initEstimator();
  }

})();
</script>

Image carousel

Quality Without Compromise

Walkers Landscape Designs

Walkers Landscape Designs LLC is dedicated to making our customers happy, From expert landscaping and lawn care to seasonal cleanups and snow removal, we provide reliable, high-quality service year-round.
Quality Without Compromise