How do I customize the look and feel of booking forms?
Add CSS for brand colors and layout, JavaScript for dynamic behavior, and edit form content for custom text and labels — all without touching the core booking engine. Hubhus provides three safe code placement areas that cover nearly all customization needs.
TL;DR
Add CSS/JS in Booking form → Styling (global). Use Part 1 for early-running code (prefill, resource override). Use Part 3/4 for step-specific logic. Always use element.style.display to show/hide — never rely on CSS classes (Hubhus may reset them).
4 things to know
3 placement areas. Styling (global CSS/JS for the whole form), Part 1 (early-running code before interaction — use for prefill and resource overrides), Part 3/4 (step-specific: after date selection, time slot rendering, confirmation logic).
CSS: safe to change, safe to avoid. Safe: button colors, typography, spacing, branding. Avoid: global resets (* {}), overriding Hubhus core classes, forcing layout on date/time components, replacing flex/grid structures.
Show/hide with style.display — not CSS classes. Hubhus may reset CSS classes internally. Always use document.getElementById('el').style.display = 'none' for reliable hide/show. jQuery also works: $('#next-btn-div').hide().
jQuery is available. All Hubhus booking forms include jQuery. You can safely use $('#location_div').appendTo('#new-address-field') and similar selectors. Use ES5 syntax (no arrow functions, no let/const if targeting old browsers).
Read more⌄
Common Hubhus element IDs
| Element | ID | Purpose |
|---|---|---|
| Address field wrapper | #location_div | Customer address entry |
| Duration selector | #duration-input | Sets booking duration |
| Next/Submit button | #next-btn-div | Navigation buttons |
| Form steps | #step1, #step2, #step3 | Multi-step forms |
| Date picker | #date-picker | Calendar selection |
| Time slot container | #timeslots | Available time suggestions |
JavaScript examples
Set bookable resources: bookingForm.setCalendarResources([534, 552]);
Adjust routing weight: var r = bookingForm.getCalendarResources(); r[0].weight = 30; bookingForm.setCalendarResources(r);
Change button text on slot selection: bookingForm.on('slotSelected', function() { document.querySelector('#next-btn-div button').textContent = 'Confirm your time'; });
Mobile and best practices
- Use relative units (
rem,%,vh) and media queries in CSS - Avoid fixed widths or absolute positioning in custom CSS
- Keep CSS scoped to
.booking-form— never write global resets - Use Part 1 for early rendering changes, Part 3/4 for step-specific behavior
- Prefer
%placeholders%over hardcoded text in form content - Test on both desktop and mobile before publishing
Common searches
booking form css • custom button color • booking form styling • jquery booking form • show hide element • location_div • booking form javascript
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article