{"id":328,"date":"2025-12-14T07:03:34","date_gmt":"2025-12-14T06:03:34","guid":{"rendered":"https:\/\/www.berner-bikes-mallorca.com\/?page_id=328"},"modified":"2025-12-15T11:27:17","modified_gmt":"2025-12-15T10:27:17","slug":"reservierungsformular","status":"publish","type":"page","link":"https:\/\/www.berner-bikes-mallorca.com\/en\/reservierungsformular\/","title":{"rendered":"Reservierungsformular"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:51px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-c4d272e2 wp-block-group-is-layout-constrained\" style=\"border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-bottom:var(--wp--preset--spacing--10);padding-left:0\">\n<div id=\"berner-form-root\">\n  <style>\n    #berner-form-root{\n      --font-family: \"Open Sans\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n      --text: #525356;\n      --muted: #7e8186;\n      --focus: rgb(90, 76, 194);\n      --btn: #ff6d5a;\n      --btnText: #fff;\n      font-family: var(--font-family);\n    }\n\n    #berner-form {\n      max-width: 560px;\n      margin: 0 auto;\n      background: transparent;\n    }\n\n    #berner-form h2 { margin: 0 0 6px 0; font-weight: 600; color: var(--text); }\n    #berner-form p.sub { margin: 0 0 18px 0; color: var(--muted); }\n\n    #berner-form .grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n    #berner-form .full { grid-column: 1 \/ -1; }\n    #berner-form .stack { display:grid; grid-template-columns: 1fr; gap: 14px; }\n\n    #berner-form label { font-weight: 600; display:block; margin: 0 0 6px 0; color:#555; }\n    #berner-form label.req::after { content:\" *\"; color: var(--btn); }\n\n    #berner-form input,\n    #berner-form select,\n    #berner-form textarea{\n      width:100%;\n      padding:12px;\n      border:1px solid rgba(0,0,0,.2);\n      border-radius:8px;\n      background:transparent;\n      font-size: 14px;\n    }\n    #berner-form input:focus,\n    #berner-form select:focus,\n    #berner-form textarea:focus {\n      outline:none;\n      border-color: var(--focus);\n      box-shadow: 0 0 0 3px rgba(90,76,194,0.10);\n    }\n\n    #berner-form .radio-row { display:flex; gap:14px; flex-wrap:wrap; }\n    #berner-form .radio{\n      border:1px solid rgba(0,0,0,.2);\n      padding:10px 12px;\n      border-radius:10px;\n      cursor:pointer;\n      user-select:none;\n      display:flex;\n      align-items:center;\n      gap:8px;\n    }\n    #berner-form .radio input { width:auto; }\n\n    #berner-form .consent-list { display:grid; gap:10px; }\n    #berner-form .consent {\n      display:flex;\n      gap:10px;\n      align-items:flex-start;\n      border:1px solid rgba(0,0,0,.2);\n      padding:12px;\n      border-radius:10px;\n      background:transparent;\n      font-size: 13px;\n    }\n    #berner-form .consent input { width:auto; margin-top:3px; }\n    #berner-form .consent a { color: var(--focus); }\n\n    #berner-form .section { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.15); }\n\n    #berner-form button{\n      margin-top:20px;\n      padding:14px;\n      width:100%;\n      border:none;\n      border-radius:10px;\n      background:var(--btn);\n      color:var(--btnText);\n      font-weight:700;\n      cursor:pointer;\n      font-size: 15px;\n    }\n    #berner-form button:disabled { opacity: 0.7; cursor: not-allowed; }\n\n    #leihrad-dependent,\n    #hotel-dependent { display:none; }\n\n    #thankyou{\n      display:none;\n      text-align:center;\n      padding: 30px 10px;\n    }\n\n    @media (max-width: 640px) {\n      #berner-form .grid { grid-template-columns: 1fr; }\n    }\n  <\/style>\n\n  <!-- Hidden iframe: verhindert Redirect \/ kein neuer Tab \/ keine JSON Anzeige -->\n  <iframe name=\"n8nHiddenFrame\" id=\"n8nHiddenFrame\" style=\"display:none;\"><\/iframe>\n\n  <form\n    id=\"berner-form\"\n    method=\"POST\"\n    action=\"https:\/\/n8n.remoteapp.de\/webhook\/5842ec49-2611-48dd-84fb-b650c4c0aa69\"\n    target=\"n8nHiddenFrame\"\n  >\n    <h2>Reservierungsformular<\/h2>\n    <p class=\"sub\">Bitte Felder ausf\u00fcllen und absenden.<\/p>\n\n    <input type=\"hidden\" name=\"_source\" value=\"wordpress\" \/>\n    <input type=\"hidden\" name=\"_submitted_at\" id=\"_submitted_at\" value=\"\" \/>\n    <input type=\"hidden\" name=\"_debug\" value=\"wp-form-submit\" \/>\n\n    <div class=\"grid\">\n      <div class=\"full stack\">\n        <div>\n          <label class=\"req\" for=\"vorname\">Vorname<\/label>\n          <input id=\"vorname\" name=\"vorname\" type=\"text\" required \/>\n        <\/div>\n        <div>\n          <label class=\"req\" for=\"nachname\">Nachname<\/label>\n          <input id=\"nachname\" name=\"nachname\" type=\"text\" required \/>\n        <\/div>\n      <\/div>\n\n      <div class=\"full stack\">\n        <div>\n          <label class=\"req\" for=\"geburtsdatum\">Geburtsdatum<\/label>\n          <input id=\"geburtsdatum\" name=\"geburtsdatum\" type=\"date\" required \/>\n        <\/div>\n        <div>\n          <label class=\"req\" for=\"email\">E-Mail<\/label>\n          <input id=\"email\" name=\"email\" type=\"email\" required \/>\n        <\/div>\n      <\/div>\n\n      <div class=\"full\">\n        <label class=\"req\" for=\"strasse\">Stra\u00dfe<\/label>\n        <input id=\"strasse\" name=\"strasse\" type=\"text\" required \/>\n      <\/div>\n\n      <div class=\"full stack\">\n        <div>\n          <label class=\"req\" for=\"hausnummer\">Hausnummer<\/label>\n          <input id=\"hausnummer\" name=\"hausnummer\" type=\"text\" required \/>\n        <\/div>\n        <div>\n          <label for=\"plz\">PLZ<\/label>\n          <input id=\"plz\" name=\"plz\" type=\"text\" inputmode=\"numeric\" \/>\n        <\/div>\n      <\/div>\n\n      <div class=\"full\">\n        <label class=\"req\" for=\"ort\">Ort<\/label>\n        <input id=\"ort\" name=\"ort\" type=\"text\" required \/>\n      <\/div>\n\n      <div class=\"full section\">\n        <label class=\"req\">BERNER Bikes Leihrad?<\/label>\n        <div class=\"radio-row\">\n          <label class=\"radio\">\n            <input type=\"radio\" name=\"leihrad\" value=\"ja mit Leihrad\" required \/>\n            ja mit Leihrad\n          <\/label>\n          <label class=\"radio\">\n            <input type=\"radio\" name=\"leihrad\" value=\"nein (kein Leihrad ben\u00f6tigt)\" required \/>\n            nein (kein Leihrad ben\u00f6tigt)\n          <\/label>\n        <\/div>\n      <\/div>\n\n      <div id=\"leihrad-dependent\" class=\"full\">\n        <div class=\"grid\">\n          <div class=\"full\">\n            <label class=\"req\" for=\"leihrad_abholung\">Leihrad Abholung<\/label>\n            <input id=\"leihrad_abholung\" name=\"leihrad_abholung\" type=\"date\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"leihrad_rueckgabe\">Leihrad R\u00fcckgabe<\/label>\n            <input id=\"leihrad_rueckgabe\" name=\"leihrad_rueckgabe\" type=\"date\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"wunschrad\">Wunschrad<\/label>\n            <select id=\"wunschrad\" name=\"wunschrad\">\n              <option value=\"\" selected disabled>Bitte w\u00e4hlen \u2026<\/option>\n              <option value=\"BERNER AIROW Disc Ultegra Di2\">BERNER AIROW Disc Ultegra Di2<\/option>\n              <option value=\"BERNER Experience Disc Ultegra Di2\">BERNER Experience Disc Ultegra Di2<\/option>\n              <option value=\"BERNER Experience Disc Ultegra mechanisch\">BERNER Experience Disc Ultegra mechanisch<\/option>\n              <option value=\"BERNER E-Rennrad Mahle X20 Disc\">BERNER E-Rennrad Mahle X20 Disc<\/option>\n              <option value=\"BERNER Disc Aluminium\">BERNER Disc Aluminium<\/option>\n              <option value=\"BERNER E-MTB\">BERNER E-MTB<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\">Pedale?<\/label>\n            <div class=\"radio-row\">\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"pedale\" value=\"ohne Pedale\" \/>\n                ohne Pedale\n              <\/label>\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"pedale\" value=\"mit Pedale\" \/>\n                mit Pedale\n              <\/label>\n            <\/div>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"koerpergroesse\">K\u00f6rpergr\u00f6\u00dfe<\/label>\n            <input id=\"koerpergroesse\" name=\"koerpergroesse\" type=\"text\" placeholder=\"z.B. 178 cm\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"seat_height\">A: Sitzh\u00f6he \/ seat height<\/label>\n            <input id=\"seat_height\" name=\"seat_height\" type=\"text\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"seat_length\">B: Sitzl\u00e4nge \/ seat length<\/label>\n            <input id=\"seat_length\" name=\"seat_length\" type=\"text\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"handlebar_height\">C: Lenkerh\u00f6he \/ handlebar height<\/label>\n            <input id=\"handlebar_height\" name=\"handlebar_height\" type=\"text\" \/>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"full section\">\n        <label class=\"req\">Zimmer Reservierung THB Hotels?<\/label>\n        <div class=\"radio-row\">\n          <label class=\"radio\">\n            <input type=\"radio\" name=\"hotel_res\" value=\"ja\" required \/>\n            ja\n          <\/label>\n          <label class=\"radio\">\n            <input type=\"radio\" name=\"hotel_res\" value=\"nein (kein Hotel)\" required \/>\n            nein (kein Hotel)\n          <\/label>\n        <\/div>\n      <\/div>\n\n      <div id=\"hotel-dependent\" class=\"full\">\n        <div class=\"grid\">\n          <div class=\"full\">\n            <label class=\"req\" for=\"hotel\">Hotel<\/label>\n            <select id=\"hotel\" name=\"hotel\">\n              <option value=\"\" selected disabled>Bitte w\u00e4hlen \u2026<\/option>\n              <option value=\"THB El Cid ****\">THB El Cid ****<\/option>\n              <option value=\"THB Mar\u00eda Isabel ****\">THB Mar\u00eda Isabel ****<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\">Zimmerart<\/label>\n            <div class=\"radio-row\">\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"zimmerart\" value=\"Einzelzimmer (DZ zur Alleinnutzung) mit Fr\u00fchst\u00fcck\" \/>\n                Einzelzimmer (DZ zur Alleinnutzung) mit Fr\u00fchst\u00fcck\n              <\/label>\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"zimmerart\" value=\"Einzelzimmer (DZ zur Alleinnutzung) mit Halbpension\" \/>\n                Einzelzimmer (DZ zur Alleinnutzung) mit Halbpension\n              <\/label>\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"zimmerart\" value=\"Doppelzimmer mit Fr\u00fchst\u00fcck\" \/>\n                Doppelzimmer mit Fr\u00fchst\u00fcck\n              <\/label>\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"zimmerart\" value=\"Doppelzimmer mit Halbpension\" \/>\n                Doppelzimmer mit Halbpension\n              <\/label>\n            <\/div>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\">Meerblick?<\/label>\n            <div class=\"radio-row\">\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"meerblick\" value=\"ja\" \/>\n                ja\n              <\/label>\n              <label class=\"radio\">\n                <input type=\"radio\" name=\"meerblick\" value=\"nein\" \/>\n                nein\n              <\/label>\n            <\/div>\n          <\/div>\n\n          <!-- untereinander -->\n          <div class=\"full\">\n            <label class=\"req\" for=\"anreise\">Datum der Anreise<\/label>\n            <input id=\"anreise\" name=\"anreise\" type=\"date\" \/>\n          <\/div>\n\n          <div class=\"full\">\n            <label class=\"req\" for=\"abreise\">Datum der Abreise<\/label>\n            <input id=\"abreise\" name=\"abreise\" type=\"date\" \/>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"full section consent-list\">\n      <label class=\"req\">Best\u00e4tigungen<\/label>\n      <label class=\"consent\">\n        <input type=\"checkbox\" name=\"mietbedingungen_akzeptiert\" required \/>\n        <span>\n          Mit Deiner Reservierung hast Du unsere\n          <a href=\"https:\/\/www.berner-bikes-mallorca.com\/mietbedingungen\/\" target=\"_blank\" rel=\"noopener\">Miet- und Stornobedingungen<\/a>\n          gelesen &amp; akzeptiert. Bitte unsere \u00d6ffnungszeiten beachten \u2013 diese findest Du unter unseren\n          <a href=\"https:\/\/www.berner-bikes-mallorca.com\/faq\/\" target=\"_blank\" rel=\"noopener\">FAQ\u00b4s<\/a>.\n        <\/span>\n      <\/label>\n      <label class=\"consent\">\n        <input type=\"checkbox\" name=\"vermittlung_hinweis\" required \/>\n        <span>\n          <strong>BERNER Bikes ist nur Vermittler<\/strong>, \u00fcbersendet die Reservierungsdaten &amp; erstellt eine Best\u00e4tigung in Vertretung von THB.\n          Mit Reservierung besteht ein direktes, rechtsverbindliches Gesch\u00e4ft zwischen THB &amp; Gast, die Gesch\u00e4fts- &amp; Stornobedingungen werden akzeptiert!\n          Alle Angaben werden mit Sorgfalt bearbeitet \u2013 Irrt\u00fcmer vorbehalten \u2013 es gelten die Hotelpreise lt. unserer Preisliste!\n          <a href=\"http:\/\/www.berner-bikes-mallorca.com\/\" target=\"_blank\" rel=\"noopener\">berner-bikes-mallorca.com<\/a> \u2013 Timo Berner \u2013 Wilhelm-Leuschner-Str.12 \u2013 64747 Breuberg\n        <\/span>\n      <\/label>\n    <\/div>\n\n    <div class=\"full\">\n      <label for=\"sonstiges\">Sonstiges<\/label>\n      <textarea id=\"sonstiges\" name=\"sonstiges\" maxlength=\"500\" rows=\"3\" placeholder=\"z. B. Name des Mitreisenden, Allergien\"><\/textarea>\n    <\/div>\n\n    <button type=\"submit\" id=\"submitBtn\">Absenden<\/button>\n  <\/form>\n\n  <div id=\"thankyou\">\n    <p><strong>Danke, wir haben deine Daten erhalten und pr\u00fcfen die Reservierungsanfrage f\u00fcr dich.<\/strong><\/p>\n    <p>Du erh\u00e4ltst in K\u00fcrze weitere Infos von uns.<\/p>\n    <p>Danke dein Berner-Bikes Team Mallorca<\/p>\n  <\/div>\n\n  <script>\n    (function(){\n      const form = document.getElementById(\"berner-form\");\n      const thankyou = document.getElementById(\"thankyou\");\n      const iframe = document.getElementById(\"n8nHiddenFrame\");\n      const submitBtn = document.getElementById(\"submitBtn\");\n\n      const leihradDep = document.getElementById(\"leihrad-dependent\");\n      const hotelDep = document.getElementById(\"hotel-dependent\");\n\n      const leihradRequiredIds = [\n        \"leihrad_abholung\",\"leihrad_rueckgabe\",\"wunschrad\",\n        \"koerpergroesse\",\"seat_height\",\"seat_length\",\"handlebar_height\"\n      ];\n      const leihradRequiredRadios = [\"pedale\"];\n      const hotelRequired = { selects:[\"hotel\"], inputs:[\"anreise\",\"abreise\"], radios:[\"zimmerart\",\"meerblick\"] };\n\n      function show(el, yes){ el.style.display = yes ? \"block\" : \"none\"; }\n      function setRequiredById(id, required){\n        const el = document.getElementById(id);\n        if (!el) return;\n        if (required) el.setAttribute(\"required\",\"required\");\n        else el.removeAttribute(\"required\");\n      }\n      function setRequired(ids, required){ ids.forEach(id => setRequiredById(id, required)); }\n\n      function clearValues(container){\n        if (!container) return;\n        container.querySelectorAll(\"input,select\").forEach(el=>{\n          if (el.type === \"radio\" || el.type === \"checkbox\") el.checked = false;\n          else if (el.tagName.toLowerCase() === \"select\") el.selectedIndex = 0;\n          else el.value = \"\";\n        });\n      }\n\n      function leihradYes(){\n        return form.querySelector('input[name=\"leihrad\"]:checked')?.value === \"ja mit Leihrad\";\n      }\n      function hotelYes(){\n        return form.querySelector('input[name=\"hotel_res\"]:checked')?.value === \"ja\";\n      }\n\n      function refreshDeps(){\n        const l = leihradYes();\n        show(leihradDep, l);\n        setRequired(leihradRequiredIds, l);\n        leihradRequiredRadios.forEach(name=>{\n          form.querySelectorAll(`input[name=\"${name}\"]`).forEach(r=>{\n            if (l) r.setAttribute(\"required\",\"required\"); else r.removeAttribute(\"required\");\n          });\n        });\n        if(!l) clearValues(leihradDep);\n\n        const h = hotelYes();\n        show(hotelDep, h);\n        setRequired(hotelRequired.selects.concat(hotelRequired.inputs), h);\n        hotelRequired.radios.forEach(name=>{\n          form.querySelectorAll(`input[name=\"${name}\"]`).forEach(r=>{\n            if (h) r.setAttribute(\"required\",\"required\"); else r.removeAttribute(\"required\");\n          });\n        });\n        if(!h) clearValues(hotelDep);\n      }\n\n      form.addEventListener(\"change\", (e)=>{\n        if (e.target.name === \"leihrad\" || e.target.name === \"hotel_res\") refreshDeps();\n      });\n      refreshDeps();\n\n      \/\/ \u2705 VALIDIERUNG erzwingen + nur bei Erfolg submitten\n      form.addEventListener(\"submit\", (e) => {\n        \/\/ Abh\u00e4ngigkeiten sicher setzen (falls jemand direkt submit klickt)\n        refreshDeps();\n\n        \/\/ Browser-Validierung anzeigen\n        if (!form.reportValidity()) {\n          e.preventDefault();\n          return;\n        }\n\n        \/\/ ok -> abschicken in iframe\n        const ts = document.getElementById(\"_submitted_at\");\n        if (ts) ts.value = new Date().toISOString();\n\n        submitBtn.disabled = true;\n        submitBtn.textContent = \"Sende\u2026\";\n      });\n\n      \/\/ Response im iframe => Formular ausblenden + Danke anzeigen\n      iframe.addEventListener(\"load\", () => {\n        form.style.display = \"none\";\n        thankyou.style.display = \"block\";\n      });\n    })();\n  <\/script>\n<\/div>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Reservierungsformular Bitte Felder ausf\u00fcllen und absenden. Vorname Nachname Geburtsdatum E-Mail Stra\u00dfe Hausnummer PLZ Ort BERNER Bikes Leihrad? ja mit Leihrad nein (kein Leihrad ben\u00f6tigt) Leihrad Abholung Leihrad R\u00fcckgabe Wunschrad Bitte w\u00e4hlen \u2026BERNER AIROW Disc Ultegra Di2BERNER Experience Disc Ultegra Di2BERNER Experience Disc Ultegra mechanischBERNER E-Rennrad Mahle X20 DiscBERNER Disc AluminiumBERNER E-MTB Pedale? ohne Pedale mit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-328","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/pages\/328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/comments?post=328"}],"version-history":[{"count":36,"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/pages\/328\/revisions"}],"predecessor-version":[{"id":393,"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/pages\/328\/revisions\/393"}],"wp:attachment":[{"href":"https:\/\/www.berner-bikes-mallorca.com\/en\/wp-json\/wp\/v2\/media?parent=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}