The default color scheme of the booking widget by BNBForms doesn’t meet your needs?
Although it’s rather universal and looks quite well on a number of websites that use it, you might want to completely alter the color scheme or individual parts of the form, e.g., an availability calendar.
We’ve just recently released a new update to the BNBForms platform, which allows you to customize each and every color of the key property search form that you embed on your website.
Before we go any further, see how BNBForms clients have already customized colors in their widgets: Client Websites Showcase.
This should definitely simplify the design and customization process for you since you don’t need any tech skills to change those – all the edits are applied in the visual editor via Appearance > Customize > Colors in your BNBforms dashboard.
In this post, we’re going to tell you about an easy way to customize the form as well as best design practices for applying new color schemes.
So let’s get down to the details of what you can do.
It’s worth mentioning that applying random colors to the form won’t do any good to the good-lookiness of your site. So our designers advise you the following:
- Try to stick to 3 colors (more colors create inconsistency).
- Use complementary colors to keep consistency across the entire site (helpful tools: Canva Wheel allows you to choose complementary colors, triadic, monochromic, analogues and tetradic colors).
- Pick colors that suit the general color scheme of your website.
- Pick readable colors for text.
Also read how to add the BNBForms widget to Wix, Squarespace, WordPress, GoDaddy, and a plain HTML website.
Let’s check each section.
General colors
In this section, you can change accent colors, as well as colors for headings and text.
For example, headings and accent colors:
Accent color. Applies for dynamic data.
Color 2. Applies to the form field frame.
Buttons
For buttons in the booking form, you can change button text colors, button background color, and the button background color on hover.
Page header
You can also change the border color for the form:
Accommodation Details
After the search parameters are entered, guests can see details of each room. You can also customize main accent colors of these details displayed next to the room.
You can also change the table border color to make those lines more visible as well as set a different color for icons.
Availability Calendar
There are many details you can change in the availability calendar – a background color, a header background color, header borders color, navigation elements, unavailable dates, booked date color, datepicker colors and more.
A calendar is one of the most essential and informative parts of the booking widget so you’ll definitely want to give it a brand look.
Remember that guests are used to green shades for available days and red shades for unavailable days.
Checkout page
You can also update key colors for the booking checkout page, including arrival and departure dates, accommodation header text color, and accommodation header background color.
So it’s up to you how your form will look!
Don’t forget to publish the changes when you are done with your editing. So, at first do the customization, then,
After you’re done with editing colors for the booking widget and customizing the property listing to your needs, you can go to generate the code script, it will take your change into account automatically.
That’s it! Now you have even more options to customize the booking widget to suit your site’s overall design. With tools such as Canva or any other to make color combinations easy, so that the booking widget doesn’t just look well but also professional from the design perspective.
Just getting started with BNBforms? Here are a few qucik facts about our services:
Cost: one fixed yearly subscription price ($119 per year)
Free trial: one month free
Limitations: no, you can host unlimited properties and bookings without any commissions for either side (you and your guest)
Live demo: BNBForms demo
Register for free: BNBForms dashboard
