JetFormBuilder Booking Form for a Rental Property With JetBooking

A JetFormBuilder booking form for a rental property needs three things. First, set the property (or room) CPT as the Booking instance post type in JetBooking. Second, give the form a Check-in/Check-out dates field and an Apartment Booking post submit action. Third, place the form on that CPT's single template. If you only need dates and an email, the standalone JetBooking Booking Form widget takes the reservation without JetFormBuilder.

• Decide what guests book
• Set up JetBooking
• Build the single template
• Choose the form type
• Option A: the Booking Form widget
• Option B: a JetFormBuilder booking form
• Show booked dates
• A property with several rooms
• Test the booking
• Common problems

Decide what guests book

Each post of the booking instance CPT has its own availability, and only one CPT can be the Booking instance post type. Every form, template and calendar points at that kind of post.

• Whole property (holiday home, apartment, cabin): Properties is the booking instance, and each property page gets its own form.
• Individual rooms (guesthouse, small hotel): Rooms is the booking instance. The property page lists its rooms, and each room page has the form. Identical rooms can be units of one post.

You also need an orders CPT, such as Booking Orders, for guest details and totals.

Set up JetBooking

You need JetBooking and JetEngine. The template needs JetThemeCore or Elementor Pro, and Option B also needs JetFormBuilder. The JetBooking preparation guideline covers this list.

1. Create the bookable CPT (Properties or Rooms) and the Booking Orders CPT in JetEngine.
2. Go to WordPress Dashboard > Bookings > Settings > General.
3. Keep the booking mode on Plain, the default. Plain mode works with or without WooCommerce. The WooCommerce based mode runs bookings through WooCommerce.
4. Set Booking orders post type to Booking Orders.
5. Set Booking instance post type to Properties or Rooms. The setup wizard asks for the same two post types.
6. In each property or room post, fill in Price per 1 day/night in the Pricing Settings block.

Build the single template

1. Go to Crocoblock > Theme Templates > + Add New.
2. Set Template Type to Single and choose your builder in Template Content Type.
3. Set the display conditions to your bookable CPT.
4. In the top section, add the title, a gallery and JetEngine Dynamic Field widgets for price, capacity, amenities and description.
5. Below that, leave a section for the booking form.

Choose the form type

Option A: the Booking Form widget

The standalone Booking Form comes as an Elementor widget, a Gutenberg block and a Bricks element. It creates the booking by AJAX and needs neither WooCommerce nor JetFormBuilder. Its settings are:

• Booking Instance ID: leave it empty on the instance's single template. On any other page, enter the post ID.
• Disable Email Field: turn it on only if you don't want the guest's email.
• Date Picker Field: Layout (single or separate fields), Position (Inline or List), Check in/Check out Label and Placeholder, Description, Date Format, Separator and First Day of the Week.
• Submit Button: Label (the default is Book).

After submitting, the guest sees "Booking was created successfully." The booking is saved as Pending; confirm it in Bookings with the Edit button. The Booking Form widget overview has the full settings reference.

Option B: a JetFormBuilder booking form

Go to JetFormBuilder > Add New and press Start from scratch. The form starts with a Hidden Field, a Text Field and an Action Button. The official How to Create a Booking Form guide has screenshots of each step.

Fields

1. Hidden Field: set its FORM FIELD NAME to post_id and its value to Current Post ID. It feeds APARTMENT ID FIELD, so don't delete or rename it.
2. Text Field for the guest name, plus a Text Field of type Email. Email isn't required in Plain mode, but JetBooking Workflows need it for scheduled emails.
3. Check-in/Check-out dates field named check_in_out_dates, marked required. Set FIELDS POSITION, LAYOUT, DATE FORMAT, DATE FIELD SEPARATOR and FIRST DAY OF THE WEEK.
4. Number Field named guests, if you charge by guest. Make it required with MIN VALUE 1.
5. Checkbox Fields named meals (per-night, per-person extras such as breakfast) and additional_services (once-per-stay extras such as cleaning), each option with a calculated value.
6. Calculated Field named total.

Price formula

In a calculation, the dates field returns the number of nights or days, depending on Booking period (Per Night or Per Day) in Bookings > Settings > Configuration. %META::_apartment_price% returns the post's Price per 1 day/night.

For a price per night plus one-off extras:

%check_in_out_dates% * %META::_apartment_price% + %additional_services%

For a price per person per night, with meals per person per night:

(%check_in_out_dates% * %META::_apartment_price% * %guests%) + (%check_in_out_dates% * %guests% * %meals%) + %additional_services%

Keep guests required with MIN VALUE 1 so the total is never calculated without a guest count.

For seasonal prices and rates, use %ADVANCED_PRICE::check_in_out_dates%. It returns the price for the selected dates, rates and seasons. Multiply it by %guests% or %units% if needed:

%ADVANCED_PRICE::check_in_out_dates% + %additional_services%

Every name in a formula must match the field's FORM FIELD NAME exactly. How to Set Automatic Price Calculator for Bookings has more options. For per-person pricing on fixed dates, see our tour booking form with price per person.

Post submit actions

1. Save Form Record: there by default. Keep it.
2. Insert/Update Post: set POST TYPE = Booking Orders and POST STATUS = Published. In FIELDS MAP, map name, email, dates, guests and total to Post Meta fields. Leave post_id unmapped. If you map it to Post ID (will update the post), the form edits the property post instead of creating an order.
3. Apartment Booking: set APARTMENT ID FIELD = post_id, CHECK-IN/CHECK-OUT DATE FIELD = check_in_out_dates and E-MAIL FIELD = your email field. Keep this action after Insert/Update Post.
4. Send Email: add one to the guest and one to the owner. It sends right after submit, in action order. Scheduled reminders go in Workflows.

Optional: PayPal

1. In JetFormBuilder > Settings > Payments Gateways, turn on Enable Gateways (and Enable Test Mode for sandbox). Add the PayPal Client ID and Secret Key.
2. In the form, open Gateway Settings > PayPal CheckOut and press Edit. Choose Use Global Settings and press Sync Action Token. Set CURRENCY CODE, and set PRICE/AMOUNT FIELD to total.
3. Open each action's criss-crossed lines icon (Edit Action Conditions & Events). Under Events match, set Insert/Update Post to GATEWAY.SUCCESS and Apartment Booking to DEFAULT.PROCESS, as the official guide shows.

With this split, the booking is created at submit and the order post only after payment. After a test payment, open the booking's Details in Bookings and check that it links to the order.

An abandoned payment can leave dates blocked. Abandon a test PayPal payment, check that booking's status in Bookings, then pick the matching option in Bookings > Settings > Advanced:

• Pending, On hold or Processing: use Automatically switch bookings statuses. Add that status to Target Status(es) and choose a New Status such as Cancelled or Failed. The Switch interval sets how often it runs.
• Created: use Automatically remove temporary bookings, which deletes bookings in the Created status. Created can't be chosen as a Target Status.

Place the form

Put the form in the template's form section with the JetForm widget (Elementor) or the JetForm block (Gutenberg). It works in Bricks too.

Show booked dates

Add the Booking Availability Calendar widget or block near the form. It shows booked dates. With Allow to select dates on, it fills the form's check-in and check-out fields, and the Elementor widget also has Scroll to the form. The official docs list custom single pages built in Elementor or the Block Editor, with a JetFormBuilder (or legacy JetEngine) booking form. The JetBooking 4.1.2 changelog also mentions a calendar selection fix in the Bricks editor, so check Bricks support in your version.

A property with several rooms

Identical rooms: use units

1. Set the number of units for the post in the JetBooking Units Manager.
2. Add a Number Field named units and set its MAX VALUE preset to Post > Current Post > Post Units Number.
3. Click the eye icon in the block toolbar (JetEngine Dynamic Visibility) and turn on Enable. Choose Show element if condition met, click + Add new item and pick Apartment has Units.
4. Add a Hidden Field also named units, with FIELD VALUE set to Manual Input and VALUE set to 1. Give it the same condition with Hide element if condition met. Apartment has Units is true only for posts with more than one unit, so without this fallback single-unit posts can get a total of 0 plus extras.
5. In Apartment Booking, turn on Booking multiple units and set CAPACITY FIELD to units.
6. Multiply the stay price by units. With rates, use %ADVANCED_PRICE::check_in_out_dates% * %units% instead.

(%check_in_out_dates% * %META::_apartment_price% * %units%) + %additional_services%

If you charge per guest and per unit, combine both factors, then test it with a sample booking before going live:

(%check_in_out_dates% * %META::_apartment_price% * %units% * %guests%) + %additional_services%

One submission creates one booking per unit, all linked to one order. Deleting the order post deletes its bookings. Details are in How to Set Multiple Units Booking in Plain Mode.

Different room types in Plain mode with JetFormBuilder

The Apartment Booking action takes one APARTMENT ID FIELD, so give each room type its own page and form:

1. Set Rooms as the Booking instance post type and set the price on each room post.
2. Link each room to its property with a JetEngine relation.
3. On the property template, add a Listing Grid of related rooms. Each item links to its room page.
4. Build a Rooms single template with the room details, the Booking Availability Calendar and the booking form.

We recommend this over a room picker on the property page. If guests must book several room types in one go, look at WooCommerce based mode. A comment in Crocoblock/suggestions issue #2352 says that mode has allowed booking several items at once since JetBooking 3.0.0; confirm this in your version. To help guests narrow down properties, add filters as in our real estate property search filter.

Test the booking

1. Log out, open a property page, pick dates and submit.
2. Check JetFormBuilder > Form Records for the submission, and JetFormBuilder > Payments if PayPal is on.
3. Confirm a new Booking Orders post with the mapped meta values. The property post itself should be unchanged.
4. Go to WordPress Dashboard > Bookings and open the Details icon and the Edit button. Check the item, dates and status, and with PayPal, the order link.
5. Reload the property page. The booked dates should be unavailable.

Common problems

• No booking, or it lands on the wrong item. The form isn't on the instance CPT's single template, post_id isn't mapped to APARTMENT ID FIELD, or the widget sits on another page without a Booking Instance ID.
• The property post gets overwritten. post_id is mapped to Post ID (will update the post) in FIELDS MAP. Remove that mapping.
• The total is 0 or wrong. Check for a formula name that doesn't match the FORM FIELD NAME, a missing Price per 1 day/night or a missing units fallback. Keep guests required with MIN VALUE 1.
• Dates stay blocked after an abandoned payment. Check that booking's status. If it is Pending, On hold or Processing, add it to Target Status(es) in Automatically switch bookings statuses. If it is Created, turn on Automatically remove temporary bookings.
• Workflow emails never go out. Turn on Enable Workflows in Bookings > Settings > Workflows, and map an Email-type field to E-MAIL FIELD.
• The calendar doesn't fill the dates. Turn on Allow to select dates, and use a custom single page built in Elementor or the Block Editor. On Bricks, check that your JetBooking version supports the calendar there.

For hourly slots instead of nights, see JetBooking hourly booking.

That covers the full path from bookable CPT to a saved booking. If you would rather have the booking site built for you, post a request on BoostMyCroco.