<div class=”blue-seaside-form-container” style=”max-width: 800px; margin: 40px auto; padding: 20px;”>
\n<div class=”form-header” style=”background: #2c3e50; color: white; padding: 25px; border-radius: 8px 8px 0 0; text-align: center;”>
\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><\/p>\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<form id=”blueseasidereservation” style=”display: grid; gap: 20px;”>
\n<!– Name, Email, Phone –>
\n<div style=”display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;”>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Name *<\/label>
\n<input type=”text” required style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”>
\n<\/div>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Email *<\/label>
\n<input type=”email” required style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”>
\n<\/div>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Cell Phone *<\/label>
\n<input type=”tel” required style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”>
\n<\/div>
\n<\/div><\/p>\n
<!– Accommodation –>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Accommodation Type *<\/label>
\n<div style=”display: flex; gap: 20px;”>
\n<label style=”display: flex; align-items: center; gap: 5px;”>
\n<input type=”radio” name=”accommodation” value=”studio” required> Studio
\n<\/label>
\n<label style=”display: flex; align-items: center; gap: 5px;”>
\n<input type=”radio” name=”accommodation” value=”maisonette”> Maisonette
\n<\/label>
\n<\/div>
\n<\/div><\/p>\n
<!– 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;”>Check in Date *<\/label>
\n<div style=”position: relative;”>
\n<input type=”date” id=”checkin_date” required style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”>
\n<\/div>
\n<small style=”color: #666; font-size: 12px; display: block; margin-top: 5px;”>Display: 15\/02\/2026 (dd\/mm\/yyyy)<\/small>
\n<\/div>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Check out Date *<\/label>
\n<div style=”position: relative;”>
\n<input type=”date” id=”checkout_date” required style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”>
\n<\/div>
\n<small style=”color: #666; font-size: 12px; display: block; margin-top: 5px;”>Display: 18\/02\/2026 (dd\/mm\/yyyy)<\/small>
\n<\/div>
\n<\/div><\/p>\n
<!– Guests –>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Number of guests *<\/label>
\n<div style=”display: flex; align-items: center; gap: 10px;”>
\n<div style=”display: flex; border: 1px solid #ddd; border-radius: 4px;”>
\n<button type=”button” id=”guest_minus” style=”background: #f5f5f5; border: none; padding: 10px 15px; cursor: pointer;”>-<\/button>
\n<input type=”text” id=”guest_count” value=”1″ readonly style=”width: 50px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd;”>
\n<button type=”button” id=”guest_plus” style=”background: #f5f5f5; border: none; padding: 10px 15px; cursor: pointer;”>+<\/button>
\n<\/div>
\n<span>guests<\/span>
\n<\/div>
\n<\/div><\/p>\n
<!– Car Rental –>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Looking for a car rental<\/label>
\n<div style=”display: flex; gap: 20px;”>
\n<label style=”display: flex; align-items: center; gap: 5px;”>
\n<input type=”checkbox” name=”car_rental” value=”yes”> Yes
\n<\/label>
\n<label style=”display: flex; align-items: center; gap: 5px;”>
\n<input type=”checkbox” name=”car_rental” value=”no”> No
\n<\/label>
\n<\/div>
\n<\/div><\/p>\n
<!– Message –>
\n<div>
\n<label style=”display: block; margin-bottom: 5px; font-weight: bold;”>Message<\/label>
\n<textarea rows=”4″ style=”width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;”><\/textarea>
\n<\/div><\/p>\n
<!– Submit –>
\n<div style=”text-align: center; margin-top: 20px;”>
\n<button type=”submit” style=”background: #3498db; color: white; border: none; padding: 15px 40px; font-size: 18px; border-radius: 4px; cursor: pointer; font-weight: bold;”>
\nSubmit Availability
\n<\/button>
\n<p style=”color: #666; font-size: 14px; margin-top: 10px;”>* indicates a required field<\/p>
\n<\/div>
\n<\/form>
\n<\/div>
\n<\/div><\/p>\n
<script>
\ndocument.addEventListener(‘DOMContentLoaded’, function() {
\n\/\/ Set default dates
\nconst today = new Date();
\nconst defaultCheckin = new Date(2026, 1, 15); \/\/ Feb 15, 2026
\nconst defaultCheckout = new Date(2026, 1, 18); \/\/ Feb 18, 2026<\/p>\n
function formatDateForInput(date) {
\nreturn date.toISOString().split(‘T’)[0];
\n}<\/p>\n
document.getElementById(‘checkin_date’).value = formatDateForInput(defaultCheckin);
\ndocument.getElementById(‘checkout_date’).value = formatDateForInput(defaultCheckout);<\/p>\n
\/\/ Guest counter
\ndocument.getElementById(‘guest_minus’).addEventListener(‘click’, function() {
\nconst input = document.getElementById(‘guest_count’);
\nlet value = parseInt(input.value);
\nif (value > 1) input.value = value – 1;
\n});<\/p>\n
document.getElementById(‘guest_plus’).addEventListener(‘click’, function() {
\nconst input = document.getElementById(‘guest_count’);
\nlet value = parseInt(input.value);
\nif (value < 20) input.value = value + 1;
\n});<\/p>\n
\/\/ Car rental (only one selection)
\nconst carCheckboxes = document.querySelectorAll(‘input[name=”car_rental”]’);
\ncarCheckboxes.forEach(cb => {
\ncb.addEventListener(‘change’, function() {
\nif (this.checked) {
\ncarCheckboxes.forEach(other => {
\nif (other !== this) other.checked = false;
\n});
\n}
\n});
\n});<\/p>\n
\/\/ Form submission
\ndocument.getElementById(‘blueseasidereservation’).addEventListener(‘submit’, function(e) {
\ne.preventDefault();
\nalert(‘Thank you! This is a demo form. To make it functional, connect it to your email service (like Formspree).’);
\n\/\/ Reset to defaults
\ndocument.getElementById(‘checkin_date’).value = formatDateForInput(defaultCheckin);
\ndocument.getElementById(‘checkout_date’).value = formatDateForInput(defaultCheckout);
\ndocument.getElementById(‘guest_count’).value = ‘1’;
\n});
\n});
\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"
<div class=”blue-seaside-form-container” style=”max-width: 800px; margin: 40px auto; padding: 20px;”> <div class=”form-header” style=”background: #2c3e50; color: white; padding: 25px; border-radius: 8px 8px 0 0; text-align: center;”> <h1 style=”margin: 0 0 8px 0; font-size: 28px;”>Reservation Form<\/h1> <p style=”margin: 0; opacity: 0.9;”>Submit your inquiry, and we will respond at our earliest convenience.<\/p> <\/div> <div class=”form-body” style=”background: white; padding: 30px; […]<\/p>\n","protected":false},"author":1,"featured_media":9415,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9829","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/9829","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=9829"}],"version-history":[{"count":7,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/9829\/revisions"}],"predecessor-version":[{"id":9858,"href":"https:\/\/www.blueseasidestudios.gr\/el\/wp-json\/wp\/v2\/pages\/9829\/revisions\/9858"}],"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=9829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}