diff --git a/_src/blocks/booking-form/booking-form.css b/_src/blocks/booking-form/booking-form.css index a91eb392c..e5d68b3fe 100644 --- a/_src/blocks/booking-form/booking-form.css +++ b/_src/blocks/booking-form/booking-form.css @@ -17,6 +17,37 @@ display: block; } +.booking-form-container.display-as-content { + margin-top: 3em; + display: block; + width: unset!important; + height: unset!important; + min-height: unset !important; + max-height: unset !important; + position: unset !important; + background: transparent; + height: auto !important; +} + +.booking-form-container.display-as-content .modal-close-btn { + display: none; +} + +.booking-form-container form.loading > div { + pointer-events: none; + opacity: 0.6; + cursor: not-allowed; +} + +.booking-form-container.display-as-content .block.sidebar > div { + gap: 5em; +} + +.booking-form-container.display-as-content .block.sidebar > div > div:last-of-type { + width: 500px; + flex: 0 0 500px; +} + .booking-form-container .booking-form-wrapper { width: 768px; height: auto; @@ -32,6 +63,11 @@ position: relative; } +.booking-form-container.display-as-content .booking-form-wrapper { + max-height: unset; + overflow-y: unset; +} + .booking-form-container .booking-form-wrapper span.modal-close-btn { content: 'x'; position: absolute; @@ -65,13 +101,6 @@ display: none; } - -.booking-form-container form.loading > div { - pointer-events: none; - opacity: 0.6; - cursor: not-allowed; -} - .booking-form-container form.loading::before { content: ''; display: inline-block; @@ -222,6 +251,24 @@ height: 90vh; } + .booking-form-container.display-as-content .booking-form-wrapper { + width: unset; + height: unset; + } + + .booking-form-container.display-as-content .block.sidebar > div > div.columns-left-col h1 { + display: block; + } + + .booking-form-container.display-as-content .block.sidebar > div { + display: block; + } + + .booking-form-container.display-as-content .block.sidebar > div > div:last-of-type { + width: 100%; + flex: 0 0 100; + } + .booking-form-container .input-row { display: block; } diff --git a/_src/blocks/booking-form/booking-form.js b/_src/blocks/booking-form/booking-form.js index 46a94b0f6..13906ba0a 100644 --- a/_src/blocks/booking-form/booking-form.js +++ b/_src/blocks/booking-form/booking-form.js @@ -186,7 +186,7 @@ function sanitizeDataMap(dataMap) { ); } -function handleSubmit(formBox, widgetId, token) { +function handleSubmit(formBox, widgetId, token, fileName, download) { const locale = window.location.pathname.split('/')[1] || 'en'; const validateFields = () => { let isValid = true; @@ -276,8 +276,6 @@ function handleSubmit(formBox, widgetId, token) { // convert Map to ordered object: const orderedData = sanitizeDataMap(data); - const fileName = formBox.closest('.section').getAttribute('data-savedata'); - await submitWithTurnstile({ widgetId, token, @@ -291,6 +289,7 @@ function handleSubmit(formBox, widgetId, token) { formBox.classList.add('form-submitted'); formBox.querySelector('#title-box').innerHTML = successMsg.innerHTML; successMsg.scrollIntoView({ behavior: 'smooth' }); + if (download) window.open(download, '_blank'); } }, }); @@ -298,13 +297,19 @@ function handleSubmit(formBox, widgetId, token) { } export default function decorate(block) { + const sectionParent = block.closest('.section'); + const { appendto, download, savedata } = sectionParent.dataset; const formBox = createForm(block); block.innerHTML = ''; - block.appendChild(formBox); + if (appendto) { + sectionParent.querySelector(`.${appendto}`).appendChild(formBox); + } else { + block.appendChild(formBox); + } renderTurnstile('turnstile-container', { invisible: false }) .then(({ widgetId, token }) => { - handleSubmit(formBox, widgetId, token); + handleSubmit(formBox, widgetId, token, savedata, download); }) .catch((error) => { throw new Error(`Turnstile render failed: ${error.message}`);