Skip to content

Frontend Guide – Shortcodes

Simple BnB Rental includes two shortcodes you can use to display the booking form on your website. These shortcodes let your visitors check availability and send booking requests directly from the front end of your site, no technical setup required.

1. Main booking form

Shortcode: 

[simpbnb_booking]

Form Booking Frontend

What it does

This shortcode adds a complete booking form to any page or post.

It allows guests to:

  • Select check-in and check-out dates
  • Choose the number of adults and children
  • See the available rooms
  • Send a booking request

How to use it

  1. Create a new page in WordPress (for example, “Book your stay”).
  2. Paste this shortcode in the content area: [simpbnb_booking]
  3. Publish the page.

That’s it — the plugin automatically loads the booking form, room cards, and all necessary scripts and styles.

What visitors will see

  • On the left: a sidebar with date and guest selectors.
  • On the right: a list of available rooms, each with its name, image, and a “Book now” button.

If you have enabled the option “Show rooms before search” in the plugin settings, the page will immediately display all rooms when it loads. Otherwise, rooms appear only after the visitor selects dates and clicks Search availability.

2. Single-room booking form

Shortcode:

[simpbnb_room id="X"]

(where X is the ID of the room)

Room Form Frontend

What it does

This shortcode shows a booking form for one specific room only. It is ideal if you have created a dedicated WordPress page (or a custom post type) for each room, with its own description and photos.

How to use it

  1. Create a new WordPress page (or a CPT) for the room (for example, “Deluxe Suite”).
  2. Paste the shortcode with the correct ID: [simpbnb_room id="2"]
  3. Publish the page.

Now that page will display:

  • The room name, description, and image
  • A booking form with date and guest selectors
  • Buttons to check availability and confirm the reservation

If a visitor arrives on this page after clicking a room from the main booking form, their chosen dates and guests are automatically pre-filled.

3. Making room cards clickable

In the main booking form [simpbnb_booking], each room appears as a card with an image, title, and a “Book now” button.

By default, the cards are not clickable — only the button works. However, you can make the image and title link directly to the page of that specific room.

  1. Go to the WordPress admin area → Rooms.
  2. Edit a room.
  3. In the field “Details URL”, enter the full link to the WordPress page where you added the [simpbnb_room id="X"] shortcode.
  4. Save changes.

From now on:

  • The room’s image and title in the main form will be clickable.
  • When a visitor clicks them, they’ll be taken to the room’s own page.
  • If they had already chosen check-in/check-out dates, these values will automatically appear in the form on the room page.

4. The booking process

No matter which shortcode is used, the booking process follows the same steps:

  1. The guest fills in their stay details and clicks Search availability (or Check availability on a single room).
  2. The plugin shows available rooms and prices.
  3. When they click Book now, a small form appears asking for:
  4. Full name
  5. Email address
  6. (Optional) phone number
  7. After confirmation, the booking is saved as pending.

Depending on your plugin settings, pending reservations may temporarily hold the selected room for a short time before they expire or are confirmed.

If you are using the Pro version, the process can optionally continue to an online payment (via Stripe).

5. Styling and layout

The booking forms are responsive and adapt to most WordPress themes automatically.

If your page uses a very narrow layout or a page builder, you can place the shortcode inside a full-width section or container to ensure the sidebar and the results area have enough space.

The default design uses a clean, minimal layout that you can customize with your own CSS if needed.

6. Payment confirmation page

Shortcode:

[simpbnb_success]

This shortcode displays a confirmation page after the guest has successfully completed the payment through Stripe.

How it works

After returning from Stripe (the “Success” page), the plugin automatically generates a summary of the reservation. The content is created dynamically based on the booking details.

What it shows

A clear confirmation message, along with the main reservation details:

  • Payment received — including the reservation number and room name
  • Dates — check-in/check-out and number of nights
  • Guests — number of adults and children
  • Total amount — full booking cost
  • Amount paid — the amount charged through Stripe
  • Balance due — remaining amount to be paid (shown only if a deposit was used)

All values (dates, guests, and amounts) are automatically retrieved from the reservation.
The text adapts to the site’s language and the plugin’s settings.

How to use it

  1. Create a new WordPress page (for example, “Booking confirmed”).
  2. Add the shortcode [simpbnb_success].
  3. In Settings → Payments (Stripe), select this page as your Success page.

When a payment is completed successfully, the guest will be redirected here and see the full confirmation summary.

7. Payment cancellation page

Shortcode: [simpbnb_cancel]

This shortcode is used to display the landing page after a guest has canceled or abandoned the payment on Stripe.

What it shows

The message displayed depends on the reservation status:

  • If the booking is still pending, the user will see a message explaining that the payment was canceled, with an option to retry.
  • If the booking can no longer be paid online, the message invites the guest to contact the property for assistance.

The message is always accompanied by one or more links, depending on your settings:

  • Retry payment → lets the guest try the payment again (if available)
  • Back to search → returns to the booking form or room list
  • Contact us → opens your contact or support page

How to use it

  1. Create a new WordPress page (for example, “Payment canceled”).
  2. Add the shortcode [simpbnb_cancel].
  3. In Settings → Payments (Stripe), select this page as your Cancel page.
  4. Optionally, set the “Back to search” and “Contact us” URLs in the corresponding fields.

Example

If a guest cancels the payment, they will see a message like this:

Payment for reservation #31 (Double Room) was canceled. You can try again below.

With the following buttons:
[Retry payment] [Back to search] [Contact us]

8. Summary

Shortcode Purpose Where to use it
[simpbnb_booking] Shows the main booking form with room list On your main “Booking” or “Rooms” page
[simpbnb_room id="X"] Displays booking form for a single room On each individual room’s page
[simpbnb_success] Show a summary of the booking made On the page set as "Success page"
[simpbnb_cancel] Show a message after a user has canceled or interrupted the payment on Stripe On the page set as "Cancel page"

Tip

For the best experience:

  • Create one main booking page with [simpbnb_booking]
  • Create one page per room with [simpbnb_room id="X"]
  • In each room’s settings, set its Details URL to that page
  • Create the success page for payments with [simpbnb_success]
  • Create the cancellation page for payments with [simpbnb_cancel]

this makes everything link together automatically.