Landing Pages

Replaced Embedded Hero Forms With an Accessible Booking Modal

A conversion cleanup note about removing oversized forms from service-page heroes and replacing them with a reusable, keyboard-accessible booking modal.

Quick summary

A conversion cleanup note about removing oversized forms from service-page heroes and replacing them with a reusable, keyboard-accessible booking modal.

The problem

Long embedded forms pushed service content down the page, created awkward spacing, and made the booking experience inconsistent across a large generated site.

What I checked

  • Shared service-page template and hero spacing
  • Existing booking calls to action
  • Modal focus, keyboard, close, backdrop, and scroll behavior
  • Related-service recommendations
  • Homepage, service, and general-content routes

What I changed

  • Removed the oversized hero form and excess template spacing
  • Added a compact globally available booking modal
  • Implemented focus trapping, Escape and backdrop close behavior, and internal scrolling
  • Connected booking calls to action across the homepage and service pages
  • Added persistent mobile and desktop contact actions and verified the production build

Result

The site gained a consistent booking path that preserves more room for service content and remains usable with keyboards and smaller screens.

Where this fix usually leads next

This kind of work usually connects back to Landing Pages, Website Fixes and API & Integrations so the fix note can lead into a clearer support path instead of staying as an isolated one-off task.

What I'd watch next

  • Whether embedded booking-provider changes affect modal height
  • Whether all new CTAs use the shared modal trigger
  • Whether conversion data improves after the shorter page path

Tools used

Shared templatesAccessible modalResponsive testingProduction build

Need help with something similar?

Send the URL and what needs fixed.