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. (See Parse api response to get list of dates)
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/ 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