Embed

<section id="bokaForm" style="max-width:900px;margin:0 auto;padding:24px;">
  <h2 style="margin:0 0 8px 0;">Boka din taxi nu 🚕</h2>
  <p style="margin:0 0 20px 0;color:#444;">
    Fyll i dina uppgifter nedan så kontaktar vi dig inom kort.
  </p>

  
  <div id="formSuccess" style="display:none;padding:14px 16px;border-radius:8px;background:#e8f6ee;color:#0a7a3b;margin-bottom:16px;">
    Tack! Din bokning togs emot. Vi återkommer snarast. 🙌
  </div>
  <div id="formError" style="display:none;padding:14px 16px;border-radius:8px;background:#fdeaea;color:#b00020;margin-bottom:16px;">
    Oj! Något gick fel. Försök igen eller kontakta oss via telefon/WhatsApp.
  </div>

  
  <form id="taxiForm" method="POST" action="https://formspree.io/f/xldpkkdz" style="
      display:grid;gap:14px;
      grid-template-columns:1fr 1fr;
  ">
    
    <style>
      #taxiForm label{display:block;font-weight:600;color:#111;margin:4px 0 6px}
      #taxiForm .field{
        width:100%;padding:12px 14px;border:1px solid #ccc;border-radius:10px;
        background:#fff;color:#111;font-size:16px;outline:none;
      }
      #taxiForm .field:focus{border-color:#8a4b15;box-shadow:0 0 0 3px #f3e4d7}
      #taxiForm .col-2{grid-column:1 / -1}
      #taxiForm .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
      #taxiForm .btn{cursor:pointer;border:none;padding:12px 16px;border-radius:10px;font-weight:700}
      #taxiForm .btn-submit{background:#b6661a;color:#fff}
      #taxiForm .btn-secondary{background:#eee;color:#222}
      #taxiForm .note{color:#555;margin-top:6px}
      @media (max-width:680px){
        #taxiForm{grid-template-columns:1fr}
        #taxiForm .row{grid-template-columns:1fr}
      }
    </style>

    <div class="col-2">
      <label for="name">För- och efternamn</label>
      <input class="field" type="text" id="name" name="name" placeholder="Fullständigt namn" required />
    </div>

    <div>
      <label for="phone">Telefonnummer</label>
      <input class="field" type="tel" id="phone" name="phone" placeholder="07XXXXXXXX" autocomplete="tel"
             pattern="^(\+?\d{6,15})$" required />
    </div>

    <div>
      <label for="email">E-post</label>
      <input class="field" type="email" id="email" name="email" placeholder="namn@exempel.se" autocomplete="email" required />
    </div>

    <div class="col-2">
      <label for="pickup">Upphämtningsadress</label>
      <input class="field" type="text" id="pickup" name="pickup" placeholder="Gata, nr, postnr, stad" required />
    </div>

    <div class="col-2">
      <label for="dropoff">Destination</label>
      <input class="field" type="text" id="dropoff" name="dropoff" placeholder="Adress eller plats" required />
    </div>

    <div class="row col-2">
      <div>
        <label for="date">Datum</label>
        <input class="field" type="date" id="date" name="date" required />
      </div>
      <div>
        <label for="time">Tid</label>
        <input class="field" type="time" id="time" name="time" required />
      </div>
    </div>

    <div class="row col-2">
      <div>
        <label for="passengers">Antal passagerare</label>
        <input class="field" type="number" id="passengers" name="passengers" min="1" max="6" value="1" required />
      </div>
      <div>
        <label for="luggage">Väskor</label>
        <input class="field" type="number" id="luggage" name="luggage" min="0" max="8" value="0" />
      </div>
    </div>

    <div class="col-2">
      <label for="notes">Övrigt (valfritt)</label>
      <textarea class="field" id="notes" name="notes" rows="3" placeholder="Barnstol, extra bagage, flightnr…"></textarea>
      <p class="note">Vi bekräftar din bokning via sms eller samtal.</p>
    </div>

    
    <input type="hidden" name="_subject" value="New Taxi Booking — Kärlek Taxi" />
    <input type="hidden" name="_template" value="table" />

    <div class="col-2" style="display:flex;gap:10px;align-items:center;">
      <button type="submit" class="btn btn-submit" id="submitBtn">Skicka bokning</button>
      <button type="button" class="btn btn-secondary" id="cancelForm">Avbryt</button>
      
      <input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off" />
    </div>
  </form>
</section>

<script>
  (function () {
    const form = document.getElementById('taxiForm');
    const success = document.getElementById('formSuccess');
    const errorBox = document.getElementById('formError');
    const submitBtn = document.getElementById('submitBtn');
    const cancelBtn = document.getElementById('cancelForm');

    // إلغاء و مسح
    cancelBtn.addEventListener('click', () => {
      form.reset();
      success.style.display = 'none';
      errorBox.style.display = 'none';
      window.scrollTo({ top: document.getElementById('bokaForm').offsetTop - 40, behavior: 'smooth' });
    });

    // إرسال بدون مغادرة الصفحة (AJAX)
    form.addEventListener('submit', async function (e) {
      e.preventDefault(); // لا تخرج من الصفحة
      success.style.display = 'none';
      errorBox.style.display = 'none';

      // تعطيل زر الإرسال مؤقتًا
      submitBtn.disabled = true;
      const original = submitBtn.textContent;
      submitBtn.textContent = 'Skickar...';

      try {
        const formData = new FormData(form);
        const res = await fetch(form.action, {
          method: 'POST',
          body: formData,
          headers: { 'Accept': 'application/json' } // يمنع تحويلة الشكر الخارجية
        });

        if (res.ok) {
          form.reset();
          success.style.display = 'block';
          errorBox.style.display = 'none';
          // تمرير لطيف لرسالة الشكر
          const top = success.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top, behavior: 'smooth' });
        } else {
          throw new Error('Bad response');
        }
      } catch (err) {
        errorBox.style.display = 'block';
        success.style.display = 'none';
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = original;
      }
    });
  })();
</script>

Kärlek Taxi AB

Kärlek Taxi AB operates as a local taxi service in Gothenburg, Sweden, providing reliable transportation for residents and visitors. The company is in its early growth stage, generating modest monthly revenue as it builds its customer base.