Geschützt

WohlfühlreisenPlus internes Buchungssystem

---

Buchung absenden

„` :root{ –primary:#26496b; –primary2:#355f89; –bg:#f4f7fa; –card:#ffffff; –text:#1f2933; –soft:#6b7280; –line:#e3e8ef; } body{ background:var(–bg); font-family:Arial,sans-serif; } #registerForm{ max-width:920px; margin:35px auto; background:var(–card); border-radius:30px; overflow:hidden; box-shadow: 0 15px 40px rgba(0,0,0,.06), 0 5px 15px rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.03); } .form-top{ padding:42px 34px 38px; background:linear-gradient(135deg,#26496b,#355f89); } .form-logo{ font-size:11px; font-weight:700; letter-spacing:3px; color:rgba(255,255,255,.72); margin-bottom:14px; } .form-title{ font-size:36px; font-weight:900; line-height:1.1; color:#fff; margin-bottom:14px; } .form-subtitle{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.82); max-width:520px; } .form-grid{ padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-field{ display:flex; flex-direction:column; } #registerForm label{ margin-bottom:8px; font-size:13px; font-weight:800; color:var(–text); } #registerForm input, #registerForm textarea, #registerForm select{ width:100%; padding:16px 18px; border-radius:18px; border:1px solid var(–line); background:#fafbfd; font-size:15px; font-weight:600; box-sizing:border-box; } #registerForm textarea{ min-height:120px; resize:vertical; } .room-box{ display:none; margin:0 30px 25px; padding:22px; border-radius:24px; background:#f7fafd; border:1px solid #dde6ef; } .room-title{ font-size:22px; font-weight:900; margin-bottom:20px; color:var(–text); } .room-grid{ display:flex; flex-direction:column; gap:14px; } .room-card{ padding:18px; border-radius:20px; background:#fff; border:2px solid #dde5ef; cursor:pointer; transition:.25s; } .room-card.active{ border-color:#26496b; background:#f9fbff; } .room-radio{ position:absolute; opacity:0; pointer-events:none; } .room-name{ font-size:17px; font-weight:900; color:var(–text); } .room-extra{ margin-top:20px; display:none; } .textarea-box{ padding:0 30px; } .service-box{ margin:0 30px 25px; padding:22px; border-radius:24px; background:#f7fafd; border:1px solid #dde6ef; } .service-option{ display:flex; gap:12px; align-items:flex-start; margin:15px 0 0; font-size:14px; line-height:1.6; } .service-option input{ width:auto !important; margin-top:4px; } #registerForm button{ margin:20px 30px 30px; width:calc(100% – 60px); padding:20px; border:none; border-radius:20px; background:linear-gradient(135deg,#26496b,#355f89); color:#fff; font-size:17px; font-weight:900; cursor:pointer; } #meldung{ display:none; margin:24px 30px 30px; padding:18px; border-radius:18px; background:#edf8ef; border:1px solid #d5e7d9; font-size:14px; font-weight:700; text-align:center; color:#3b6846; } @media(max-width:760px){ .form-grid{ grid-template-columns:1fr; padding:24px; } .form-title{ font-size:30px; } .form-top{ padding:36px 26px; } .room-box, .service-box{ margin:0 24px 24px; } .textarea-box{ padding:0 24px; } #registerForm button{ margin:20px 24px 24px; width:calc(100% – 48px); } } const WEBAPP_URL = „https://script.google.com/macros/s/AKfycbyFZOry8kR_bJwcZp3PxTiz-1f6j_rQeVKSkuNvuDqorIC1GivpdlPJ3NcXZ-QHwZvQ/exec“; window.addEventListener(„DOMContentLoaded“, function(){ const form = document.getElementById(„registerForm“); const reiseTyp = document.getElementById(„reiseTyp“); const roomBox = document.getElementById(„roomBox“); const partnerBox = document.getElementById(„partnerBox“); const roomCards = document.querySelectorAll(„.room-card“); const meldung = document.getElementById(„meldung“); const submitBtn = document.getElementById(„submitBtn“); if(!form) return; roomBox.style.display = „none“; partnerBox.style.display = „none“; reiseTyp.addEventListener(„change“, function(){ if(reiseTyp.value === „Mehrtagesreisen“){ roomBox.style.display = „block“; }else{ roomBox.style.display = „none“; partnerBox.style.display = „none“; document.querySelectorAll(„.room-radio“) .forEach(function(r){ r.checked = false; }); roomCards.forEach(function(card){ card.classList.remove(„active“); }); } }); roomCards.forEach(function(card){ card.addEventListener(„click“, function(){ roomCards.forEach(function(c){ c.classList.remove(„active“); }); card.classList.add(„active“); const radio = card.querySelector(„.room-radio“); radio.checked = true; if(radio.value === „Doppelzimmer“){ partnerBox.style.display = „block“; }else{ partnerBox.style.display = „none“; } }); }); form.addEventListener(„submit“, async function(e){ e.preventDefault(); submitBtn.disabled = true; submitBtn.innerText = „Wird gesendet…“; const formData = new FormData(form); const data = Object.fromEntries(formData.entries()); try{ const response = await fetch( WEBAPP_URL, { method:“POST“, body:JSON.stringify(data) }); await response.text(); meldung.style.display = „block“; meldung.style.background = „#edf8ef“; meldung.style.border = „1px solid #d5e7d9“; meldung.style.color = „#3b6846“; meldung.innerHTML = „Vielen Dank! Ihre Buchung wurde erfolgreich gesendet.“; form.reset(); roomBox.style.display = „none“; partnerBox.style.display = „none“; roomCards.forEach(function(card){ card.classList.remove(„active“); }); submitBtn.disabled = false; submitBtn.innerText = „Buchung absenden“; }catch(error){ meldung.style.display = „block“; meldung.style.background = „#ffe9e9“; meldung.style.border = „1px solid #ffb8b8“; meldung.style.color = „#b42323“; meldung.innerHTML = „Fehler beim Senden. Bitte versuchen Sie es erneut.“; submitBtn.disabled = false; submitBtn.innerText = „Buchung absenden“; } }); });