# Apartment booking form as iframe with date range picker

**URL:** <https://forum.bubble.io/t/apartment-booking-form-as-iframe-with-date-range-picker/146613>\
**Category:** Need help\
**Created:** [April 16, 2021, 9:43am UTC](https://forum.bubble.io/t/apartment-booking-form-as-iframe-with-date-range-picker/146613 "2021-04-16T09:43:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tegernsee.media](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@tegernsee.media](https://forum.bubble.io/u/tegernsee.media)\
**Post date:** [April 16, 2021, 9:43am UTC](https://forum.bubble.io/t/apartment-booking-form-as-iframe-with-date-range-picker/146613/1 "2021-04-16T09:43:25Z")

</div>

I need a booking form with a date range picker for check-in and check-out. And it should not be possible to choose not available dates. Also there is a minimum length of stay to validate the date range. And at the end the user should see the price for the booking.

The list of dates and the other fields I have in Airtable. Transformed from [Smoobu Api](https://docs.smoobu.com/#get-rates-api). (See [Parse api response to get list of dates](http://forum.bubble.io/t/parse-api-response-to-get-list-of-dates/141989))

The form should be embedded in wordpress sites. The best way is to do it as iframe. Right? Every apartment has a different ID. So I would need an iframe solution with a unique ID for each iframe.

**The form**

It should be a multi step form. Similar to[https://tawfnohf.paperform.co/](https://tawfnohf.paperform.co/) for example.

First the user sees the calendar and not available dates should be blocked and should have a different color. And it should not be possible for the user to pick a 3 day range for example when there is a “min\_length\_of\_stay” of 5 days.

- Then the user should see the price.
- Then the “name” should appear.
- Then “email address” and “phone number”
- Then “street/number” and “zip code” and “city”.

The inputs should be saved in Airtable.

For the date range picker I bought [Date/Time/Range Picker (bdk) Plugin | Bubble](https://bubble.io/plugin/datetimerange-picker-bdk-1567087763159x121115246110441470)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [June 25, 2021, 9:43am UTC](https://forum.bubble.io/t/apartment-booking-form-as-iframe-with-date-range-picker/146613/2 "2021-06-25T09:43:43Z")

</div>

Closed on June 25, 2021, 9:43am UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.