{"id":8446,"date":"2019-03-11T01:56:08","date_gmt":"2019-03-10T23:56:08","guid":{"rendered":"https:\/\/travelhouse.wpengine.com\/?page_id=8446"},"modified":"2026-02-09T21:02:10","modified_gmt":"2026-02-09T19:02:10","slug":"hotels-ikaria-island","status":"publish","type":"page","link":"https:\/\/www.blueseasidestudios.gr\/el\/hotels-ikaria-island\/","title":{"rendered":"Reservation Form"},"content":{"rendered":"<div class=\"vc_row wpb_row st bg-holder\"><div class='container '><div class='row'>\n\t<div class=\"wpb_column column_container col-md-12\"><div class=\"vc_column-inner wpb_wrapper\">\n\t\t\t\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<div class=\"blue-seaside-form-container\" style=\"max-width: 800px; margin: 40px auto; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\">\n    <div class=\"form-header\" style=\"background: #2c3e50; color: white; padding: 25px; border-radius: 8px 8px 0 0; text-align: center; margin-bottom: 0;\">\n        <h1 style=\"margin: 0 0 8px 0; font-size: 28px;\">Reservation Form<\/h1>\n        <p style=\"margin: 0; opacity: 0.9;\">Submit your inquiry, and we will respond at our earliest convenience.<\/p>\n    <\/div>\n    \n    <div class=\"form-body\" style=\"background: white; padding: 30px; border-radius: 0 0 8px 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08);\">\n        <!-- \u03a0\u03a1\u039f\u03a3\u0398\u0397\u039a\u0397: \u039c\u03ae\u03bd\u03c5\u03bc\u03b1 \u03b5\u03c0\u03b9\u03c4\u03c5\u03c7\u03af\u03b1\u03c2\/\u03c3\u03c6\u03ac\u03bb\u03bc\u03b1\u03c4\u03bf\u03c2 -->\n        <div id=\"form-message\" style=\"display: none; padding: 15px; margin-bottom: 20px; border-radius: 6px; text-align: center; font-weight: bold;\"><\/div>\n        \n        <form id=\"blueseasidereservation\" style=\"display: grid; gap: 25px;\">\n            <!-- ROW 1: Name & Surname -->\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px;\">\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Name *<\/label>\n                    <input type=\"text\" id=\"first_name\" name=\"first_name\" required style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box;\">\n                <\/div>\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Surname *<\/label>\n                    <input type=\"text\" id=\"last_name\" name=\"last_name\" required style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box;\">\n                <\/div>\n            <\/div>\n\n            <!-- ROW 2: Email & Phone -->\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px;\">\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Email *<\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" required style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box;\">\n                <\/div>\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Phone *<\/label>\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" required style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box;\">\n                <\/div>\n            <\/div>\n\n            <!-- ROW 3: Check-in & Check-out Dates -->\n            <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Check-in Date *<\/label>\n                    <div style=\"position: relative; cursor: pointer;\" onclick=\"document.getElementById('checkin_date').showPicker()\">\n                        <input type=\"date\" id=\"checkin_date\" name=\"checkin\" required \n                               style=\"width: 100%; padding: 12px 40px 12px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; cursor: pointer;\">\n                        <span style=\"position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;\">\ud83d\udcc5<\/span>\n                    <\/div>\n                    <small style=\"color: #7f8c8d; font-size: 13px; display: block; margin-top: 5px;\">Format: dd\/mm\/yyyy<\/small>\n                <\/div>\n                <div>\n                    <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Check-out Date *<\/label>\n                    <div style=\"position: relative; cursor: pointer;\" onclick=\"document.getElementById('checkout_date').showPicker()\">\n                        <input type=\"date\" id=\"checkout_date\" name=\"checkout\" required \n                               style=\"width: 100%; padding: 12px 40px 12px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; cursor: pointer;\">\n                        <span style=\"position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;\">\ud83d\udcc5<\/span>\n                    <\/div>\n                    <small style=\"color: #7f8c8d; font-size: 13px; display: block; margin-top: 5px;\">Format: dd\/mm\/yyyy<\/small>\n                <\/div>\n            <\/div>\n\n            <!-- ROW 4: Guests -->\n            <div>\n                <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Number of Guests *<\/label>\n                <div style=\"display: flex; align-items: center; gap: 15px;\">\n                    <div style=\"display: flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; width: fit-content;\">\n                        <button type=\"button\" id=\"guest_minus\" \n                                style=\"background: #f8f9fa; border: none; padding: 0; width: 44px; height: 44px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #2c3e50;\">  -<\/button>\n                        <input type=\"text\" id=\"guest_count\" name=\"guests\" value=\"1\" readonly \n                               style=\"width: 60px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 18px; font-weight: bold; padding: 0;\">\n                        <button type=\"button\" id=\"guest_plus\" \n                                style=\"background: #f8f9fa; border: none; padding: 0; width: 44px; height: 44px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #2c3e50;\">+<\/button>\n                    <\/div>\n                    <span style=\"font-size: 16px; color: #2c3e50;\">guests<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- ROW 5: Accommodation Type -->\n            <div>\n                <label style=\"display: block; margin-bottom: 8px; font-weight: bold; color: #2c3e50;\">Accommodation Type *<\/label>\n                <div style=\"display: flex; gap: 25px;\">\n                    <label style=\"display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; flex: 1; justify-content: center; transition: all 0.2s;\" \n                           onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='white'\">\n                        <input type=\"radio\" id=\"accommodation_studio\" name=\"accommodation\" value=\"Studio\" required style=\"width: 18px; height: 18px; accent-color: #3498db; cursor: pointer;\">\n                        <span style=\"font-size: 16px;\">Studio<\/span>\n                    <\/label>\n                    <label style=\"display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; flex: 1; justify-content: center; transition: all 0.2s;\" \n                           onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='white'\">\n                        <input type=\"radio\" id=\"accommodation_maisonette\" name=\"accommodation\" value=\"Maisonette\" style=\"width: 18px; height: 18px; accent-color: #3498db; cursor: pointer;\">\n                        <span style=\"font-size: 16px;\">Maisonette<\/span>\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <!-- ROW 6: Car Rental -->\n            <div>\n                <label style=\"display: block; margin-bottom: 8px; font-weight: bold; color: #2c3e50;\">Looking for a car rental?<\/label>\n                <div style=\"display: flex; gap: 25px;\">\n                    <label style=\"display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; flex: 1; justify-content: center; transition: all 0.2s;\" \n                           onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='white'\">\n                        <input type=\"checkbox\" id=\"car_rental_yes\" name=\"car_rental\" value=\"Yes\" style=\"width: 18px; height: 18px; accent-color: #3498db; cursor: pointer;\">\n                        <span style=\"font-size: 16px;\">Yes<\/span>\n                    <\/label>\n                    <label style=\"display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; flex: 1; justify-content: center; transition: all 0.2s;\" \n                           onmouseover=\"this.style.backgroundColor='#f8f9fa'\" onmouseout=\"this.style.backgroundColor='white'\">\n                        <input type=\"checkbox\" id=\"car_rental_no\" name=\"car_rental\" value=\"No\" style=\"width: 18px; height: 18px; accent-color: #3498db; cursor: pointer;\">\n                        <span style=\"font-size: 16px;\">No<\/span>\n                    <\/label>\n                <\/div>\n            <\/div>\n\n            <!-- ROW 7: Message -->\n            <div>\n                <label style=\"display: block; margin-bottom: 5px; font-weight: bold; color: #2c3e50;\">Message<\/label>\n                <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Enter any additional information or special requests...\" style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; resize: vertical;\"><\/textarea>\n            <\/div>\n\n            <!-- Submit Button -->\n            <div style=\"text-align: center; margin-top: 10px;\">\n                <button type=\"submit\" id=\"submit-btn\" style=\"background: #3498db; color: white; border: none; padding: 16px 50px; font-size: 18px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: background 0.3s;\"\n                        onmouseover=\"this.style.backgroundColor='#2980b9'\" onmouseout=\"this.style.backgroundColor='#3498db'\">\n                    <span id=\"submit-text\">Submit Availability<\/span>\n                    <span id=\"submit-loading\" style=\"display: none;\">Sending...<\/span>\n                <\/button>\n                <p style=\"color: #7f8c8d; font-size: 14px; margin-top: 15px;\">* indicates a required field<\/p>\n            <\/div>\n        <\/form>\n    <\/div>\n<\/div>\n\n<!-- \u2705 \u0395\u03c0\u03af\u03c3\u03b7\u03bc\u03b7 \u03b2\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b7 EmailJS -->\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\n\n<script>\n\/\/ \u2705 \u0392\u0397\u039c\u0391 1: \u0391\u03c1\u03c7\u03b9\u03ba\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7 EmailJS \u03bc\u03b5 \u03c4\u03bf PUBLIC KEY \u03a3\u039f\u03a5\n\/\/ \u03a4\u039f \u039a\u039b\u0395\u0399\u0394\u0399 \u03a3\u039f\u03a5: bQM23NE3gYTV7cIi2\n(function() {\n    emailjs.init('bQM23NE3gYTV7cIi2');\n})();\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Set default dates\n    const today = new Date();\n    const defaultCheckin = new Date(2026, 1, 15);\n    const defaultCheckout = new Date(2026, 1, 18);\n    \n    function formatDateForInput(date) {\n        return date.toISOString().split('T')[0];\n    }\n    \n    function formatDateForDisplay(dateString) {\n        const date = new Date(dateString);\n        const day = String(date.getDate()).padStart(2, '0');\n        const month = String(date.getMonth() + 1).padStart(2, '0');\n        const year = date.getFullYear();\n        return `${day}\/${month}\/${year}`;\n    }\n    \n    const checkinInput = document.getElementById('checkin_date');\n    const checkoutInput = document.getElementById('checkout_date');\n    \n    checkinInput.value = formatDateForInput(defaultCheckin);\n    checkoutInput.value = formatDateForInput(defaultCheckout);\n    \n    \/\/ Set minimum dates\n    checkinInput.min = formatDateForInput(today);\n    \n    \/\/ Update check-out minimum when check-in changes\n    function updateCheckoutMin() {\n        const checkinDate = new Date(checkinInput.value);\n        const nextDay = new Date(checkinDate);\n        nextDay.setDate(checkinDate.getDate() + 1);\n        \n        checkoutInput.min = formatDateForInput(nextDay);\n        \n        const currentCheckout = new Date(checkoutInput.value);\n        if (currentCheckout <= checkinDate) {\n            checkoutInput.value = formatDateForInput(nextDay);\n        }\n    }\n    \n    updateCheckoutMin();\n    checkinInput.addEventListener('change', updateCheckoutMin);\n    \n    \/\/ Guest counter\n    document.getElementById('guest_minus').addEventListener('click', function() {\n        const guestInput = document.getElementById('guest_count');\n        let currentValue = parseInt(guestInput.value);\n        if (currentValue > 1) {\n            guestInput.value = currentValue - 1;\n        }\n    });\n    \n    document.getElementById('guest_plus').addEventListener('click', function() {\n        const guestInput = document.getElementById('guest_count');\n        let currentValue = parseInt(guestInput.value);\n        if (currentValue < 20) {\n            guestInput.value = currentValue + 1;\n        }\n    });\n    \n    \/\/ Car rental: Only one checkbox\n    const carCheckboxes = document.querySelectorAll('input[name=\"car_rental\"]');\n    carCheckboxes.forEach(checkbox => {\n        checkbox.addEventListener('change', function() {\n            if (this.checked) {\n                carCheckboxes.forEach(other => {\n                    if (other !== this) other.checked = false;\n                });\n            }\n        });\n    });\n    \n    \/\/ \u2705 \u0392\u0397\u039c\u0391 2: \u03a5\u03c0\u03bf\u03b2\u03bf\u03bb\u03ae \u03a6\u03cc\u03c1\u03bc\u03b1\u03c2 \u03bc\u03b5 EmailJS\n    document.getElementById('blueseasidereservation').addEventListener('submit', async function(event) {\n        event.preventDefault();\n        \n        \/\/ \u0391\u03c0\u03b5\u03bd\u03b5\u03c1\u03b3\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b7 \u03ba\u03bf\u03c5\u03bc\u03c0\u03b9\u03bf\u03cd \u03ba\u03b1\u03b9 \u03b5\u03bc\u03c6\u03ac\u03bd\u03b9\u03c3\u03b7 loading\n        const submitBtn = document.getElementById('submit-btn');\n        const submitText = document.getElementById('submit-text');\n        const submitLoading = document.getElementById('submit-loading');\n        const formMessage = document.getElementById('form-message');\n        \n        submitBtn.disabled = true;\n        submitText.style.display = 'none';\n        submitLoading.style.display = 'inline';\n        \n        \/\/ \u039a\u03c1\u03cd\u03c8\u03b5 \u03c0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03b1 \u03bc\u03b7\u03bd\u03cd\u03bc\u03b1\u03c4\u03b1\n        formMessage.style.display = 'none';\n        \n        \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03b1\u03c0\u03b1\u03b9\u03c4\u03bf\u03cd\u03bc\u03b5\u03bd\u03c9\u03bd \u03c0\u03b5\u03b4\u03af\u03c9\u03bd\n        const accommodationSelected = document.querySelector('input[name=\"accommodation\"]:checked');\n        if (!accommodationSelected) {\n            showMessage('Please select an Accommodation Type (Studio or Maisonette).', 'error');\n            resetSubmitButton();\n            return;\n        }\n        \n        \/\/ \u0392\u03c1\u03b5\u03c2 \u03c4\u03b9 \u03ad\u03c7\u03b5\u03b9 \u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03b5\u03af \u03b3\u03b9\u03b1 Car Rental\n        let carRentalValue = 'Not specified';\n        const carRentalYes = document.getElementById('car_rental_yes');\n        const carRentalNo = document.getElementById('car_rental_no');\n        if (carRentalYes.checked) carRentalValue = 'Yes';\n        if (carRentalNo.checked) carRentalValue = 'No';\n        \n        try {\n            \/\/ \u2705 \u03a3\u03c4\u03b5\u03af\u03bb\u03b5 email \u03bc\u03ad\u03c3\u03c9 EmailJS\n            \/\/ SERVICE ID: service_xbsq6qn\n            \/\/ TEMPLATE ID: template_a9wpwzo\n            const response = await emailjs.send(\n                'service_xbsq6qn',     \/\/ Service ID \u03b1\u03c0\u03cc \u03c4\u03bf EmailJS\n                'template_a9wpwzo',    \/\/ Template ID \u03b1\u03c0\u03cc \u03c4\u03bf EmailJS\n                {\n                    first_name: document.getElementById('first_name').value,\n                    last_name: document.getElementById('last_name').value,\n                    email: document.getElementById('email').value,\n                    phone: document.getElementById('phone').value,\n                    checkin: formatDateForDisplay(document.getElementById('checkin_date').value),\n                    checkout: formatDateForDisplay(document.getElementById('checkout_date').value),\n                    guests: document.getElementById('guest_count').value,\n                    accommodation: accommodationSelected.value,\n                    car_rental: carRentalValue,\n                    message: document.getElementById('message').value || '(No message)',\n                    submission_date: new Date().toLocaleDateString('el-GR')\n                }\n            );\n            \n            \/\/ \u0395\u03c0\u03b9\u03c4\u03c5\u03c7\u03af\u03b1\n            showMessage('Thank you! Your reservation request has been sent successfully. We will contact you soon.', 'success');\n            \n            \/\/ \u0395\u03c0\u03b1\u03bd\u03b1\u03c6\u03bf\u03c1\u03ac \u03c6\u03cc\u03c1\u03bc\u03b1\u03c2 (\u03c0\u03c1\u03bf\u03b1\u03b9\u03c1\u03b5\u03c4\u03b9\u03ba\u03cc)\n            setTimeout(() => {\n                document.getElementById('blueseasidereservation').reset();\n                checkinInput.value = formatDateForInput(defaultCheckin);\n                checkoutInput.value = formatDateForInput(defaultCheckout);\n                updateCheckoutMin();\n                document.getElementById('guest_count').value = '1';\n            }, 3000);\n            \n        } catch (error) {\n            \/\/ \u03a3\u03c6\u03ac\u03bb\u03bc\u03b1\n            console.error('EmailJS Error:', error);\n            showMessage('Sorry, there was an error sending your request. Please try again or contact us directly.', 'error');\n        } finally {\n            resetSubmitButton();\n        }\n        \n        function showMessage(text, type) {\n            formMessage.textContent = text;\n            formMessage.style.backgroundColor = type === 'success' ? '#d4edda' : '#f8d7da';\n            formMessage.style.color = type === 'success' ? '#155724' : '#721c24';\n            formMessage.style.border = `1px solid ${type === 'success' ? '#c3e6cb' : '#f5c6cb'}`;\n            formMessage.style.display = 'block';\n            formMessage.scrollIntoView({ behavior: 'smooth' });\n        }\n        \n        function resetSubmitButton() {\n            submitBtn.disabled = false;\n            submitText.style.display = 'inline';\n            submitLoading.style.display = 'none';\n        }\n    });\n});\n<\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t<\/div> \n<\/div><!--End .row--><\/div><!--End .container--><\/div><div class=\"vc_row wpb_row st bg-holder\"><div class='container '><div class='row'>\n\t<div class=\"wpb_column column_container col-md-12\"><div class=\"vc_column-inner wpb_wrapper\">\n\t\t\t<div class=\"vc_empty_space\"   style=\"height: 80px\"><span class=\"vc_empty_space_inner\"><\/span><\/div><\/div>\n\t<\/div> \n<\/div><!--End .row--><\/div><!--End .container--><\/div>\n","protected":false},"excerpt":{"rendered":"Reservation Form Submit your inquiry, and we will respond at our earliest convenience. Name * Surname * Email * Phone * Check-in Date * \ud83d\udcc5 Format: dd\/mm\/yyyy Check-out Date * \ud83d\udcc5 Format: dd\/mm\/yyyy Number of Guests * - + guests Accommodation Type * Studio Maisonette Looking for a car rental? Yes No Message Submit Availability [...]","protected":false},"author":1,"featured_media":9415,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-single-hotel-modern.php","meta":{"footnotes":""},"class_list":["post-8446","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/8446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/comments?post=8446"}],"version-history":[{"count":11,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/8446\/revisions"}],"predecessor-version":[{"id":9903,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/8446\/revisions\/9903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/media\/9415"}],"wp:attachment":[{"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/media?parent=8446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}