Is your hotel website on HTML? Do you need to power it up with an online booking form?
In this tutorial, we’ll show you how to add an automated reservation widget to your HTML site by pasting a code snippet generated in your personal BNBForms account. No steep learning curve at all.
BNBForms is a vacation rental software service that allows you to add unlimited properties, accept unlimited bookings, get a hotel booking widget for HTML, sync reservations to online travel agents like Booking.com and do many more things per one fixed yearly subscription price ($119 per year), free for a month.
And yes, expect NO extra commissions for you or your guest.
It’s just the right thing for sundry lodging businesses, including hotels, vacation rentals, inns, campsites, pet boarding hotels, and more entities where daily rentals are applied.
You can fine-tune the BNBForms hotel booking widget for your HTML website at many aspects, including edit the property search form fields, rates and seasonal pricing, discounts, and more.
Check the BNBForms live demo – click on the Book button to see how it’ll work on your website.
What will you get with BNBForms?
Answering this question requires an article of its own.
You can discover multiple features on the BNBForms website, in your free dashboard account, and in our walkthrough guides.
To shorten those features to the key ones, we’d highlight the following:
- Various seasonal prices and rates depending on the number of guests and the length of stay
- Discount coupons and other ways to customize property prices
- Support for taxes and fees added as obligatory to the property prices
- Real-time property availability
- Tons of booking rules and settings to fine-tune your hotel system (check-in and check-out rules)
- The ability to sync your HTML site direct bookings to external platforms, including Airbnb, Booking and others that support the iCal file format
- Upsell extras
- Online payment processing via bank transfer, cash on arrival, PayPal, 2Checkout, Stripe, Braintree and Bambora
- Movable bookings and clients data in CSV
- Automated emails
- Analytics and stats on earning and bookings.
Overall, it’s a fully-featured, popular software that takes care of the entire property and bookings management process like a pro, but for an affordable price. At the same time, you’d get everything you’d expect from a vacation rental software.
💡 Discover: Best Vacation Rental Website Builders for Direct Bookings
How to get started & how to create a hotel booking form in HTML
Sign up for free in a few easy steps:
- Sign up with BNBForms.
- Confirm your email address by clicking on the confirmation link.
- Log in to your personal BNBForms account with the details you received.
- Add your first property via Accommodation > Add Accommodation type.
It’s free to use for 30 days, should be enough to configure your settings and generate a script to add a hotel booking form to HTML website.
How to add a hotel booking form to an HTML website with BNBForms
We’ve already written several tutorials on how to do this for Wix, Squarespace, WordPress and other platforms, but if you are on HTML, it’s probably the easiest way since you’re independent from third-party platform restrictions (e.g. GoDaddy doesn’t allow you to add a script globally for the website, only to a specific page).
That means for HTML websites, all you need to do is to paste the code snippet to the preferable site part and you are done. The widget will appear on every page on your site.
Simply follow the instruction in the BNBForms account to later add a hotel booking form in HTML.
- Go to your dashboard > widget script.
- Copy the embed script.
- Paste the embed script between the page’s <HEAD> tags in the source code. You can paste it either right after the opening <HEAD> tag or right before the closing </HEAD>. If the website performance of your concern, we recommend placing the snippet at the end of the <BODY> rather than the <HEAD>.
This should add the “Book now” button to your site, which will by default be floating on the right on every page of your HTML website.
This widget will source data from your BNBForms settings.
Notice that you can change the background colors of the button, its label, etc. to make it a better match for your website color scheme. With a few manipulations, you’ll be able to link any website button or piece of content to this booking widget if you need it to be opened in any other way.
Let’s see how the BNBForms widget works from the guest’s point of view. The pretty is pretty much intuitive as with Booking.com, for example.
Clicking on this button, your guest will see a compact, user-friendly hotel booking widget that will help them step by step place a booking.
They will start with specifying their arrival and departure dates, as well as the number of people (you can make this one ‘guests’ field or add two separate ones for ‘adults’ and ‘children’).
They can scroll the widget to see all the available rooms.
It’s also easy to click on a separate room and see its details, such as capacity, size, amenities, rates, available extras and an individual availability calendar.
If you’ve added an image gallery, guests can see images in the slider:
So guests can book a room from any point in the booking widget.
On the checkout page, guests can additionally add extras to their reservation, choose preferable rates (if available).
They can also see a detailed pricing table with all the taxes and fees included.
As for the final strokes, they provide their contact details and choose how they’d like to secure their booking by selecting one of the options you provide. The BNBForms widget allows you to set PayPal, 2Checkout, Stripe, Braintree and Bambora, as well as direct bank transfer and pay on arrival methods.
That’s it! Your guest secured themselves a place with your site booking form.
All the related notifications will be sent to you and your customer. In the BNBForms admin dashboard, you can view bookings, clients and payment history.
It’s also easy to sort bookings, add manual payments, change a booking status, edit client details or switch rooms/dates for your guests.
For those who pay at arrival, website admins can record payments manually.
To see all upcoming and past bookings in an easily readable format, you can view them in a calendar.
The payment history allows you to view payment statuses and gateways:
By the way, you can also add a booking from scratch from the admin dashboard – for example, if a guest called you or sent an email.
Going to the reports menu, you’ll see how much you’ve earned, including and excluding taxes, how many bookings you’ve made in a certain period of time and more insightful details.
If you were looking for how to make a booking form in HTML, hopefully, we’ve provided a solution!
It’s easy to add a hotel booking form to HTML site with BNBForms
No doubt, every solid property rental website needs an online booking form for the guest’s and business convenience.
To create a functioning, good-looking and powerful booking form on HTML for rental properties, you simply need to embed a code you generated after setting up your BNBForms account. Easy as it is.
Furthermore, you’ll be able to manage all the accommodations, reservations, clients and earnings under one roof in a single dashboard provided by our service. What’s really cool, you can test the waters for free by creating a free trial account, worth trying.
