On this page

Jump to any section using the links below

Hubhus booking forms can be styled and customized to match your brand and user experience. This guide explains where to place CSS/JS, how to modify layout safely, and how to work with Hubhus-specific elements.

1. Where to add custom code

Hubhus provides multiple safe locations for styling and behaviour customizations.

a) Styling section (recommended for global styling)

Found under:

Booking form → Styling

Use this for:

• Global CSS rules

• General JavaScript that does not depend on early DOM modification

• Brand colors and layout adjustments

b) Form Part 1 (after description) — for early-running code

Useful for:

• Moving fields

• Prefilling values

• Setting calendar resources

• Running JavaScript before the user interacts

This block runs before the next-button on mobile, making it ideal for early DOM manipulation.

c) Form Part 3 / Part 4 — step-specific logic

Use these if you need:

• Behaviour changes after selecting a date

• Modifications to time slot rendering

• Conditional visibility based on step state

• Debugging placeholders like %booking_bookable_resources_as_pretty_json%

2. CSS customization

Add CSS in:

Booking form → Styling → Custom CSS

✔ Safe CSS modifications:

• Button colors

• Typography and spacing

• Section separation

• Branding

• Minor layout tweaks

❗ Avoid:

• Overriding Hubhus core classes

• Applying global resets (* {})

• Forcing layout changes on date/time components

• Replacing system flex/grid structures

Example: Custom button color

.booking-form button {
    background-color: #0051ff;
    color: #fff;
}

Example: Extra spacing

.booking-section {
    margin-bottom: 2rem;
}

3. JavaScript customization

JavaScript can be added in:

• Styling → Custom JavaScript

• Form Part 1

• Form Part 3/4

✔ Allowed use cases

• Prefilling fields

• Setting bookable resources

• Showing/hiding fields

• Reacting to booking events (slotSelected, etc.)

• Simple layout reordering

jQuery availability

Hubhus booking forms include jQuery.

You can safely use:

$('#location_div').appendTo('#new-address-field');

or

jQuery('#next-btn-div').hide();

4. Important: How to show/hide elements safely

Hubhus uses internal visibility logic. Therefore:

⚠️ Do NOT rely on CSS classes to hide elements.

Classes may be reset by the form engine.

✔️ Use direct style.display manipulation:

document.getElementById('step1').style.display = 'none';
document.getElementById('step2').style.display = 'block';

This ensures compatibility with multi-step booking flow.

5. Common Hubhus element IDs

These are frequently used when manipulating the booking form:

IDs may vary slightly per form, but these are the most common.

6. Changing text, labels, and content

You can customize:

• Titles

• Step descriptions

• Inline instructions

• Error and validation messages

• Placeholder text

All visible text inside Part 1–4 can be edited freely.

To insert dynamic placeholders:

Press CTRL+K (Windows) or CMD+K (Mac)
→ Search by name (“address”, “lead name”, “event date”, etc.)

7. Mobile responsiveness

Hubhus booking forms are mobile-optimized.
If adding custom CSS:

Use:

• Relative units (rem, %, vh)

• Media queries

Example:

@media(max-width: 600px) {
  .booking-form button {
     width: 100%;
     font-size: 1.1rem;
  }
}

Avoid forcing fixed widths or absolute positioning.

8. JavaScript examples

Set bookable resources

bookingForm.setCalendarResources([534, 552]);

Change weight for routing priority

let r = bookingForm.getCalendarResources();
r[0].weight = 30;
bookingForm.setCalendarResources(r);

Change button text when a slot is selected

bookingForm.on('slotSelected', () => {
   document.querySelector('#next-btn-div button').textContent =
       'Confirm your time';
});

9. Best practices

✔ Keep CSS scoped to .booking-form
✔ Use JavaScript only when necessary
✔ Avoid overwriting system classes
✔ Test on both desktop and mobile
✔ Use Part 1 for early rendering changes
✔ Prefer placeholders instead of hard-coded text

Summary

You can fully customize booking forms through:

• CSS for visual styling

• JavaScript for dynamic behavior

• Part 1–4 for layout and text customization

• Brand placeholders for identity consistency

With these tools, you can adapt the booking experience to fit your brand and operational requirements—while keeping the form reliable and mobile-friendly.

? Common searches

booking setup • calendar setup • appointment scheduling • booking configuration

? Also known as

appointment • scheduling • reservation • calendar event

Related articles

Creating and managing booking forms
How do I configure booking duration and time restrictions?
How do I configure booking form error and info messages?
How do I customize booking form fields?
How to add a button that pre-fills a meeting location in the booking form