Embed

<section id="contact-zero">
  <div class="cz-card">
    
    <div class="cz-copy">
      <h2>Contact Us</h2>
      <p>Planning a visit? Get in touch and give us a call on:</p>
      <p class="cz-line"><strong>T:</strong> 020 3887 8041</p>
      <p class="cz-line"><strong>M:</strong> 07424 432174</p>
    </div>

    
    <form id="cz-form" class="cz-form" novalidate>
      
      <input type="hidden" name="access_key" value="7a28e0c2-69d3-49c7-9232-a9bbcf098fec" />
      <input type="hidden" name="subject" value="New Enquiry for zero oil" />
      <input type="hidden" name="from_name" value="Website Contact Form" />

      
      <input type="text" name="botcheck" class="cz-hp" tabindex="-1" autocomplete="off" />

      <div class="cz-row">
        <label class="cz-field">
          <span class="cz-label">Name</span>
          <input type="text" name="name" required minlength="2" placeholder="Your Name" autocomplete="name" />
        </label>

        <label class="cz-field">
          <span class="cz-label">Email</span>
          <input type="email" name="email" required placeholder="you@example.com" autocomplete="email" />
        </label>
      </div>

      <label class="cz-field">
        <span class="cz-label">Message</span>
        <textarea name="message" rows="7" required minlength="10" placeholder="Tell us what you need help with…"></textarea>
      </label>

      <div class="cz-actions">
        <button id="cz-send" type="submit" class="cz-btn">
          <span class="cz-spinner" aria-hidden="true"></span>
          <span class="cz-btn-text">Send</span>
        </button>
      </div>

      <div id="cz-note" class="cz-note" role="status" aria-live="polite"></div>
    </form>
  </div>
</section>

<style>
  /* ===== Namespaced styles (won't affect rest of site) ===== */
  #contact-zero { display: grid; place-items: center; padding: 40px 16px; }
  #contact-zero * { box-sizing: border-box; }

  #contact-zero .cz-card{
    width: min(780px, 100%);
    background: #293B4E; /* your dark blue */
    color: #F7FBFF;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }

  #contact-zero .cz-copy h2{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 12px;
  }
  #contact-zero .cz-copy p{ margin: 0 0 10px; }
  #contact-zero .cz-copy .cz-line{ margin: 8px 0; }

  /* Form layout */
  #contact-zero .cz-form { margin-top: 16px; }
  #contact-zero .cz-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #contact-zero .cz-field{ display: grid; gap: 8px; margin: 0 0 14px; }
  #contact-zero .cz-label{
    color: #D0DAE3; font-weight: 700; font-size: 14px;
  }

  /* Inputs */
  #contact-zero input,
  #contact-zero textarea{
    background: #364A5F !important;   /* same for all fields */
    border: 1px solid #445A70;
    color: #F7FBFF !important;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 16px;
    caret-color: #F7FBFF;
    outline: none;
  }
  #contact-zero input::placeholder,
  #contact-zero textarea::placeholder{ color:#D0DAE3; opacity:.9; }

  #contact-zero input:focus,
  #contact-zero textarea:focus{
    border-color: #8ea5b8;
    box-shadow: 0 0 0 3px rgba(142,165,184,.35);
  }
  #contact-zero textarea{ resize: vertical; min-height: 160px; }

  /* Hide honeypot across themes */
  #contact-zero .cz-hp{
    position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
    opacity:0 !important; pointer-events:none !important; border:0 !important; padding:0 !important; margin:0 !important;
  }

  /* Button */
  #contact-zero .cz-actions{ margin-top: 6px; }
  #contact-zero .cz-btn{
    background: #ffffff; color: #111826;
    border: 0; border-radius: 4px;
    padding: 12px 30px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items:center; gap:10px;
  }
  #contact-zero .cz-btn:hover{ filter: brightness(.97); }
  #contact-zero .cz-btn:disabled{ opacity:.7; cursor:not-allowed; }

  #contact-zero .cz-spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(0,0,0,.25); border-top-color:rgba(0,0,0,.75);
    display:none; animation: czspin 1s linear infinite;
  }
  #contact-zero .cz-btn.cz-loading .cz-spinner{ display:inline-block; }
  @keyframes czspin{ to{ transform: rotate(360deg); } }

  #contact-zero .cz-note{ margin-top: 10px; font-size:14px; color:#D0DAE3; min-height: 18px; }
  #contact-zero .cz-note.cz-ok{ color:#7bd88f; }
  #contact-zero .cz-note.cz-err{ color:#ff6b6b; }

  /* Chrome/Safari autofill fix (scoped) */
  #contact-zero input:-webkit-autofill,
  #contact-zero input:-webkit-autofill:hover,
  #contact-zero input:-webkit-autofill:focus,
  #contact-zero textarea:-webkit-autofill{
    -webkit-text-fill-color:#F7FBFF !important;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px #364A5F inset !important;
    -webkit-box-shadow: 0 0 0 1000px #364A5F inset !important;
    caret-color:#F7FBFF !important;
  }

  /* Responsive */
  @media (max-width: 560px){
    #contact-zero .cz-row{ grid-template-columns: 1fr; }
    #contact-zero .cz-copy h2{ font-size: 36px; }
  }
</style>

<script>
  (function(){
    const form = document.getElementById("cz-form");
    const btn  = document.getElementById("cz-send");
    const note = document.getElementById("cz-note");
    const endpoint = "https://api.web3forms.com/submit";

    function setNote(msg, type){
      note.textContent = msg || "";
      note.classList.remove("cz-ok","cz-err");
      if(type) note.classList.add(type === "ok" ? "cz-ok" : "cz-err");
    }

    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      // stop bots
      const hp = form.querySelector('[name="botcheck"]');
      if (hp && hp.value) { setNote("Bot detected. Submission blocked.","err"); return; }

      if (!form.checkValidity()) { form.reportValidity?.(); return; }

      const data = new FormData(form);
      data.append("form_source", window.location.href);

      btn.disabled = true;
      btn.classList.add("cz-loading");
      const textEl = btn.querySelector(".cz-btn-text");
      const oldText = textEl.textContent;
      textEl.textContent = "Sending…";

      try {
        const res = await fetch(endpoint, { method:"POST", body:data });
        const json = await res.json();
        if (json.success) {
          setNote("Thanks! Your message has been sent.","ok");
          form.reset();
        } else {
          setNote("Error: " + (json.message || "Unable to send."),"err");
        }
      } catch (err) {
        setNote("Network error. Please try again.","err");
      } finally {
        btn.disabled = false;
        btn.classList.remove("cz-loading");
        textEl.textContent = oldText;
      }
    });
  })();
</script>

Location

Business Hours:

Mon: 12pm - 11pm
Tue: 12pm - 11pm
Wed: 12pm - 11pm
Thur: 12pm - 11pm
Fri: 2pm -11pm
Sat: 12pm - 11pm
Sun: 12pm - 11pm